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

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

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

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

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

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

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

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

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

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

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

その他の確認項目

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

まとめ

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