Figmaなどで作成したデザインカンプをもとに、すでに完成しているHTMLにCSSを追加・調整していきましょう。
このステップでは「見た目をデザイン通りに再現できるかどうか」がポイントになります。
すでにワイヤーフレーム用のベースHTML/CSSは完成しているので、「装飾」や「細かな調整」をCSSで加えていく工程となります。
ステップ
STEP
デザインカンプの確認
Figmaなどで作成したデザインカンプ（ステップ04）を改めて確認します。
- 色、サイズ、余白、フォントなど
- 画像やアイコンなどの装飾要素
- レイアウトの変化（スマホ／PC）
STEP
必要な画像の書き出し（エクスポート）
Figmaから使いたい画像をエクスポートして、以下のように保存します。
espresolane/（プロジェクトのフォルダ） ├─ index.html ├─ style.css └─ images/ ← エクスポートした画像をここに入れる
PNG/JPG/WebP形式で保存。ファイル名は英数字＋ハイフン推奨（例：kv-main.jpg, logo.png など）
STEP
CSSで装飾・調整する
すでにあるHTMLに対して、以下のようなポイントをCSSで追加・調整していきます。
- 背景画像の設定（
background-image） - カラーの指定（
color,background-color） - フォントの調整（
font-family,font-size,line-height） - 配置の調整（
padding,margin,text-alignなど） - レイアウト（
flex,gridなど） - ホバーや装飾アニメーション（任意）
🎯 目標
- デザイン通りの見た目に近づける
- Figma → HTML/CSS の再現力を高める
- 自分の作成したデザインを自分のコードで表現できる力を身につける
完璧に再現するよりも「近づけようとする努力」が大切です!
- 一度CSSを書いて表示を見ながら、ブラウザとFigmaを何度も見比べてみましょう。
- 色やフォント、余白など、気になったところは少しずつ調整していきましょう。
