【コーディング】デザインデータを渡されたら確認すべきチェック項目

コーディングを始める前に、デザインデータが正しく作られているか確認をしましょう。デザインデータの段階でおかしな箇所を事前に洗い出して、デザイナーさんに確認しておくと、コーディング中に実装に迷うことやデザインの意図を再現できずに修正依頼がきて工数が無駄にかかってしまうケースを防ぐことができます。

画像に関するチェック項目

SNSアイコンがスクリーンショットで埋め込まれていたり、素材サイトのロゴがはいっている画像がそのまま使われていたり、ぼやけている画像が使われていたり。

  • リンク切れの画像がないか?(画像が表示されていない)
  • 解像度が低い画像が使われていないか?画像が粗くないか?(ロゴ画像がぼやけているなど)
  • ダミー画像やサンプル画像が使われていないか?(Adobe Stockなどのサンプル画像がそのまま使われているなど)
  • 別々に画像を書き出してコーディングしたい要素が1枚の画像としてデザインされていないか?

配色・フォントに関するチェック項目

  • CMYKではなくRGBでデザインされているか?
  • 意図せずに異なるカラーコードが使われていないか?(同じ黒なのに微妙に色が違うなど)
  • 読み込めていないフォントがないか?表示できていないフォントがないか?
  • 意図せず異なるフォントの種類、フォントサイズ、文字間、行の高さになっていないか?
  • 有償フォントが使われていないか?(使われている場合はライセンスや使い方を要確認)
  • フォントサイズが10px未満になっていないか?(スマホだと小さすぎて読めない可能性がある)

コンテンツ・サイズ・余白に関するチェック項目

  • サンプルテキストが含まれていないか?(「テキストが入ります。テキストが入ります。」など)
  • 非表示になっているコンテンツのデザインが用意されているか?(詳しい内容は後述します)
  • pxでデザインされているか?(単位がptやmmでデザインされていないか?)
  • 要素のサイズに小数点が含まれていないか?
  • ボタンなどのクリックする要素が小さすぎないか?
  • コンテンツの最大幅が揃っているか?(ガイドに従ってデザインされているか?)
  • ページ間でサイドバーやカラムの大きさがずれていないか?(遷移時に不自然になる、統一感が損なわれる)
  • 余白がバラバラになっていて統一した方が良い箇所はないか?(意図せず、ズレちゃっているケース)

デザインデータが用意されているか確認しておきたい非表示コンテンツリスト

デザイナーさんが非表示になっているコンテンツのデザインを作り忘れているケースもよく散見されます。以下のチェックリストはよくある非表示コンテンツの例です。これらのデザインデータが用意されていない場合は、デザイナーさんに確認しましょう。

レイヤーが非表示になっていて、こちらが気づいていないだけの場合もあるので注意しながら確認しましょう。

  • スライドショー(スライダー・カルーセル)
  • アコーディオンメニューの開いた時のコンテンツ(FAQやメニューなど)
  • ハンバーガーメニュー(ドロワーメニュー)
  • モーダルウィンドウ
  • グローバルナビのプルダウンメニューの内容

レスポンシブデザインに関するチェック項目

デザインデータのカンバスサイズと異なる幅での表示を考慮していないデザインデータもよくみかけます。実装した時に表示が崩れることが予想される場合など、事前に確認しておくとよいです。

  • 幅を縮めていった時に収まり切らない要素があるか?(グローバルナビが収まり切らないなど)
  • iPhoneSE(320px)などの小さいデバイスの時にコンテンツがはみ出さないように設計されているか?(表示が見切れるや改行位置が崩れるなど)
  • スマホ版とPC版のデザインでコンテンツの差異がないか?(PCにはない要素がスマホデザインでは存在しているなど、整合性がとれているかどうかを確認する)

その他の確認項目

デザインデータとは直接関係はないですが、以下の項目もあわせて確認しておくと実装時や納品時に焦って確認する必要がなくなるのでおすすめです。

  • hover時やscroll時のアニメーションはどのように実装すればよいか?(指示書や参考URLをもらうなど)
  • スクロール固定のヘッダーなどスクロール固定の要素を確認する
  • リンク先はどこか?また、別タブで開く必要があるか?(ページの遷移)
  • タイトル、ディスクリプション、OGP画像、favicon画像は用意されているか?(headタグ)
  • WordPress(CMS)の更新箇所や表示ロジック(最新3件を表示するなど)などのシステムの仕様は明確になっているか?
  • 対応ブラウザは明確になっているか?
  • 納品方法は明確か?

まとめ

デザインデータ上で曖昧な点はなるべく洗い出してコーダー、デザイナー双方で擦り合わせた上で実装にはいれると品質を担保しながらサイト制作がすすめられると思います。よくわからないまま、なんとなく決めつけて制作を続けてしまうと後から修正が発生したり、相手に迷惑をかけてしまう場合もあります。よりよい制作のためにデザインデータを事前にチェックしておく癖をつけておくことをおすすめします。