RADICODE BLOG 
WEBデザインをいざコーディングして組み込むぞ！という時に、あっこれも作っておくんだった！と忘れがちなものを10つにまとめてみました！🙋♀️
作業中の優先順位で、あとで作ろうと思いながら忘れちゃうものもよくあるので、前もって issue を立てたり作業タスクに組み込んでおくと便利ですね！
特にチーム体制の場合にデザイン専任で担う方は、コーダーの方やエンジニアの方に前もって提示しておけるので作業効率もあがります😊
もちろん並行作業となる場合もあるので、全て揃っている状態かどうかはプロジェクトに左右します。
デザイン完了となりそうな際にチェックリストで見直してみてください✨
もくじ
SNSなどでリンクを共有すると、リンク先ページに設定されたOGP画像が表示されます。
OGP画像で視覚的にどういったページなのか伝えることができるので、デザインの際にデフォルトOGP画像は作成しておきましょう ✨
WEBブラウザを表示した際に、タブに表示されるアイコンです。
タブをたくさん開いた際に分かりやすく識別できるようにデザインできるといいですね☺️
iOS や Android でホームにブックマークした際に必要となります ✨
ユーザーがホームに追加してくれた際に迷子にならないように設定しておきましょう😊
404 や 503 や 500 などステータスエラーが表示されることもありますよね。
その際に表示されるエラーページも必要となるのでタイミングをみて作っておきましょう 💪
テキストベースのページになりますが、こちらもベースデザインがあると良いですね😊
例えば、商品一覧ページの際に商品画像が設定されていない場合に代替画像として表示する必要がある場合は画像がない場合のデフォルト画像が必要となってきます😊
検索結果やアーカイブページなど、表示するものが何もない時もよくある状態です。
真っ白な状態は、ユーザーが「？」と思ってしまうので疑問を排除できるように「お探しの商品は見つかりません」などメッセージを添えてデザインしておけるといいですね 😊
記事一覧や商品一覧表示の際に、見出しやリード文章が短い場合や長い場合のレイアウト挙動も添えておけるとよりスムーズに組み込みも進むと思います。
また話し合いの上、文字数なども決めたりできるのでお互い迷うことがなくて済みますね ✨
ボタンやフォームなど、active・focus 状態のデザインやフォームを操作してその処理が成功した場合などのインタラクションデザインで機能性を伝えるシーンもたくさんあります😊
それぞれのパターンでどのような挙動になることがデザインに明示されていると組み込みもサクサク進みます✨
レイヤー書き出しの際に、端数があると素材がぼやけたりします。
各種レイヤーが中途半端なサイズになっていないか確認しておきましょう😊
プロジェクトの規模によっては優先順位も変わりますが、デザインシステムもあればルールが決まっているのでチームが判断しやすくなりますね 😊
場合によってはダークモードパターンも必要かもしれません。
チーム開発は思いやりです 💪
個々の思いやりから始まる工夫やちょっとしたところが絶大に効いてきます。
デザイナーさんからエンジニアさん。
エンジニアからデザイナーさん。
もちろんディレクターさんやマネージャーさん。
上手に橋渡しができるようにお互い理解を深めることも大事ですね。
理解しようとする双方コミュニケーションの積み重ねで、チームワークを発揮していけたら万歳です 🙌
