実際自分でコードは書かない場合は、フロントエンドエンジニアやコーダーと言われる人にデザインファイルを元に実装してもらうことになります。
自分で書かないとどこに気をつけて良いかがわからないですよね。今回はそこの部分を解説いたします。
コーディングがしやすいとは？
まずコーディングしやすいとはどういうことかふわっとしているので明確にしましょう。
コーディングするときには、概ね下記のような流れで進めていきます。
- デザインから共通のパーツを抜き出す
- 共通のパーツのCSS/SCSSを定義する
- 文書構造のみHTMLで書く
- CSS/SCSSでスタイリングしていく
- JSを書く
みたいな感じです。人によっては順番違ったり、ブロックごとにHTMLとCSSを同時に書く人もいると思います。この流れのときにデザインを見ながらつまづくことがないようにすれば、コーディングがしやすいデザインファイルと言えるのではないでしょうか。
共通パーツは共通パーツということをわかりやすく
ボタンやリンクなどページ内で使い回す共通項目は1Pのデザインでもあると思います。
そういうパーツに関しては、別でコンポーネント（Figmaの場合）として定義しておき読み込む方法にしておくと、コーディングする人はマスターコンポーネントにいくことができるので共通パーツを認識しやすくなります。
また、コンポーネントだけではわかりにくい部分やデザインツールの機能で表現仕切れない部分もあるかと思います。
そういう時はコメント機能やドキュメントで指示・コメントを書いておくのが良いでしょう。
文書構造もわかりやすく
タイトルタグやパラグラフタグやimgタグなどコンテンツに適したタグを使用してマークアップをしていきます。
その際に文書構造的におかしい場合は「？」となってしまうとスピードが遅くなってしまうので、デザイン上で明確になっていない場合はこちらもタイトルなのか画像なのかということをコメントに明記しておきましょう。
さらに画像を用いる場合は、altタグも指定しているとなお良しです。
文書構造を意識するには目次のようにページのデザインを箇条書きしてみると変な部分がわかりやすいと思います。
「あれ、これ並列にしているけどおかしいな」、「この項目の中にあるけど包括関係ではないな」などなど。
端数を使わない
0.9pxなど端数の値が出ているのはなるべく避けましょう。3カラムにして欲しいときにしょうがなくデザイン上端数が出てしまう時はコメントしておきましょう。
デザインルールを明確に
同じフッターなのにあるページでは余白が違ったりなどがあると、どういうパターンでこのフッターが適用されるのか知りたくなります。
「お問い合わせページだからリンクを減らしたい」、「ページ内とフッター内のコンテンツが重複しているから減らしたい」など理由があるはずです。
そのロジックをコーディングする人にも伝えてあげましょう。CSSのクラス名の指定やコンポーネントの作成に役立ちます。
UIスタックで抜け漏れをなくす
以前下記記事でも書きましたが「UIスタック」を意識し、各状態のデザインを用意しておくことを忘れないようにしましょう。
「あれ、エラー時ってどうなるんだっけ」ということを減らすことができ、コーディングに集中してもらえます。
渡す前にレビューもらう
どうしても一人で作成していると抜け漏れなどが発生してしまうので、時間が取れる場合はデザインを見せて説明する時間を作りましょう。
その際にUIスタックの抜け漏れや共通パーツの部分などの認識合わせができスムーズに進みます。
アニメーションする場合は、参考URLを
hoverやloadingなどCSS/JSを用いてアニメーションをしたいときもありますよね。その際にデザインで表現できれば良いですがそうでないことの方が多いと思います。
決まっている場合は参考になるURLを、そうでない場合はコーディングする人に提案をもらうのもありですね。
私はcodepenで似たようなのを参考リンクとしてデザインファイルのコメントに記載しています。
