ここでは、ワイヤーフレームをもとにFigmaやPhotoshopなどのツールを使って、ビジュアルデザイン（デザインカンプ）を作成します。
作業のベースとなるのは、以下の2つの資料です
- クライアントの要望（1ページ目の資料）
- あなた自身が記入する「コンセプトシート」（2ページ目）
これらをもとに、色やレイアウト、文字サイズ、雰囲気などを自分の考えで設計・表現していきましょう。
📎 コンセプトシートと連携しよう
DesigntoCode01のステップ１でダウンロードしたファイル内容を確認しましょう。
あわせて読みたい
DesigntoCode01_01：ワイヤーフレームを観察・再現する
ここではWebサイト制作における第一歩となる「ワイヤーフレームの作成」に取り組みます。ワイヤーフレームとは、Webページの情報構造やレイアウトを視覚的に設計するた...
コンセプトシートで考えた内容をデザインに落とし込むアイデアを考えます。
| セクション | 記入ポイント例 |
|---|---|
| 1. 店舗の概要 | 店名・ターゲット層（誰に向けたサイトか）・サービスの特徴（何が強みか） |
| 2. サイトの目的 | クライアントの目的に合ったコンテンツ配置や視覚的印象を考える |
| 3. デザインの方針 | 落ち着いた雰囲気？親しみやすさ？色や余白、フォントで工夫しよう |
| 4. あなたの提案 | 提案内容をどのように実装・反映するか考える（例：ヘッダーに何を置くか、ボタンの色をどうするか など） |
デザインツールで使用するカラーを決める
次にコンセプトシート記述した色彩計画をデザインツールで明確にしておきます。FigmaやPhotoshopでの作業に入る前に、配色の方向性を決めましょう。ツールのカラーパレットから色を選ぶ、またはカラーコードを決めておくと作業がスムーズです。
上記のようなカラー一覧を作成し、Figmaなどのカラーライブラリに登録しておきましょう。
Figmaライブラリー登録
ライブラリーに登録したい色を選択し、プロパティパネルの塗り＞スタイルとバリアブルを適用をクリックしライブラリに登録します。
Figmaライブラリー登録後の使用方法
ライブラリーに登録した色は、文字や図形に使えます。
Figmaライブラリー登録された色を編集
ライブラリーに登録した色は、あとから変更可能です。ライブラリで設定した色は一斉に変わります。
デザインツールで使用するフォントを決める
タイトル用、本文用など目的に応じてフォントを選定します。Google Fontsを使います。
使用するフォントもカラーと同じようにライブラリ登録できますので、登録しておきましょう。
デザインから必要なパーツをエクスポートする
デザインが完成したら、コーディングに必要な画像をエクスポートして、imagesフォルダに保存しておきましょう。
どのパーツを画像として使うかは、デザインの構造やCSSの知識によって判断できるようになります。はじめのうちは迷うかもしれませんが、経験を積むことで自然と判断力が身についていきます。
Figmaで画像をエクスポートする
❶ エクスポートしたい画像をフレームまたはグループ化をしておきます
- 画像やアイコン、装飾などを一つのまとまりにしておくと管理しやすくなります。
- このフレームの名前が、書き出されるファイル名になります。
- 日本語は使わず、英語小文字＋ハイフン（-）やアンダースコア（_）で
例：main-visual、logo_whiteなど - 目的が分かる名前にしましょう（例：
button-hover、hero-bgなど）
❷ フレームを選択した状態で、右サイドバーの「エクスポート」
- 下部にあるエクスポート横の
+をクリックしてエクスポート設定を追加します。
❸ 画像の形式と倍率を選択
- 通常の画像はJPG（またはWebP）軽量な画像形式です。
- 背景を透明にしたい場合は PNG を選びます（jpg webpより重たくなります）
- 倍率は「1x」（通常サイズ）でOK。必要に応じて「2x」も追加できます（Retina対応など）。
❹ 「フレーム名・レイヤー名」をエクスポートボタンをクリックして保存
- 名前の通りにファイルが保存されます（拡張子が付きます）。
- 保存する際の注意点：
- 日本語のまま書き出すと、コードで扱いにくくなるので避ける
imagesフォルダにまとめて保存しておくと、プロジェクトが整理しやすいです
デザイン例
