デザインの確認と画像の書き出し

まずはデザインデータを眺めながら、どのようにコーディングするかイメージします。

デザインを見て、そのデザインの特徴や共通点を見つけます。そしてそれらを踏まえた上で、どのようにコードを書けば、効率性・メンテナンス性が良くなるか考えます。

この章では、下記の作業を進めます。

画像を使う箇所の把握

まずは、サイト内のどこで画像を使うかを洗い出します。

慣れてくると、画像を見ただけでどのフォーマットにすれば良いかもわかります。初心者の方は、下記の表を参考にフォーマットを決めると良いです。

例外もあるので、慣れないうちは、同じ画像を複数フォーマットで書き出して比較してみると良いです。

また、この教材では使っていませんが、WebPやAVIFを使うとさらに軽量化できることが多いです。

画像の書き出し

使う箇所とフォーマットが決まったら、Figmaから画像を書き出します。この段階で、画像は全て書き出してしまうと良いです。

カラー・フォント・コンテナ幅の把握

デザインにスタイルガイドが含まれている場合は、カラーやフォント、コンテナ幅などを比較的簡単に把握できます。

実務では、デザイナーがスタイルガイドを用意してくれるかどうかは環境によってまちまちです。用意されていない場合は、自分でデザインから色コードやフォント、余白の値を調べます。そのため、コーダーは基本的なFigmaの使い方を知っておく必要があります。

フォント

模写修行で使用するフォントは、Google Fontsで配布されているものです。Figmaのデザインで指定されているフォント名を確認し、Google Fontsで対応するフォントを探して、読み込み方やCSSでの指定方法を調べてください。

Figma上の表記とGoogle Fonts上の名称が異なることがあるので、見つからない場合は、AIに聞いたり、フォント名で検索してみると良いです。

サイト内で使い回す「パーツ」の把握

サイト内で同じようなパーツを使うことは多いです。毎回CSSを書くのは、効率性・メンテナンス性の観点から良くありません。

全ページのデザインを見て、どこを使い回すパーツとすべきか決めます。

サイト内で使い回す「コード」の把握

ボタンや見出しのような「パーツ」とは別に、サイト内の複数箇所で共通するスタイルもあります。

上の3つはサイト内の複数箇所で共通です。ただし、使い回す「パーツ」ではありません。ここでは一旦、使い回す「コード」と呼んでおきます。