このレッスンについて

目安の学習時間：10分

Lesson8で作った要件定義・ワイヤーフレームは、情報の骨格でした。
このレッスンでは、その骨格に配色・書体・画像・装飾を加えて、実際の見た目（デザインカンプ）に仕上げていきます。

デザインは「なんとなく良い感じ」で作るものではありません。
このレッスンの各節では、デザイン基礎やFigmaで学んだ原則のどれを使うかを明示しています。
作業を進めながら、「今、自分はどの原則に基づいてこの判断をしているか」を意識してください。
担当コーチとのレビューでは、見た目の良し悪しだけでなく、その判断根拠を必ず聞かれます。

デザイン作業に入る前の準備

目安の学習時間：20分

作業を始める前に、以下を手元にそろえてください。

• 完成させたワイヤーフレーム（PC版・SP版）
• 企画書（提供価値・対象顧客・トンマナの方針）
• Figma（すでに使い方を習得済み）

ワイヤーフレームの構成やファーストビューの決定内容を、このレッスンで勝手に変更しないでください。
デザイン段階で「やっぱりこっちの情報を先に見せたい」と感じても、それは情報設計のやり直しであり、Lesson8の判断根拠に立ち返って検討すべき問題です。
まずはLesson8の設計どおりに配色・書体を当てはめていくことに集中しましょう。

配色を決める

目安の学習時間：60分

配色は、企画書のトンマナの方針・提供価値と整合する形で決めます。

参照する既習内容：色彩4原理／配色バランス（ベース70%・メイン25%・アクセント5%）／8色が与えるイメージ／COLORABLE等の配色ツール

• 与えたい印象（企画書のトンマナ方針）から、メインカラーの候補を絞り込む
• ベース・メイン・アクセントの比率を70:25:5に近づける
• 色数を増やしすぎず、全体の統一感を優先する

配色が決まったら、「なぜこの配色にしたか」を、提供価値・トンマナとの整合の観点から自分の言葉で説明できるようにしておいてください。

「なぜこの配色が良くないのか」を説明できるようになると、担当コーチのレビューで指摘を受けたときも、単に色を変えるのではなく、上の3パターンのどれに当てはまるかを自分で特定して対応できます。

書体を決める

目安の学習時間：60分

参照する既習内容：フォント選定4ステップ／書体系統と印象／ウェイト／行間1.5〜2・字間5〜10%・行長25〜40字／ジャンプ率

• 提供価値・ターゲットの印象に合う書体系統を選ぶ
• 見出しと本文でウェイト・サイズにメリハリ（ジャンプ率）をつける
• 行間・字間・1行の文字数（行長）を基準値の範囲に収める

書体もデザインの印象を大きく左右する要素です。
配色と同様に、なぜその書体・サイズを選んだかを説明できる状態にしておきます。

これらはすでに数値の基準（行間1.5〜2・字間5〜10%・行長25〜40字）を学んでいるので、「なんとなく読みにくい」で終わらせず、どの基準から外れているかを具体的に測定して特定してください。

画像と素材を準備する

目安の学習時間：60分

参照する既習内容：画像形式（JPEG・PNG・GIF・SVG・WebP）の使い分け／書き出し倍率／圧縮とサイトスピード／素材の利用規約

• LPに使う画像・アイコン・イラスト素材を収集または生成する
• 用途に応じた形式を選び、表示速度に配慮した書き出しを行う
• 素材を利用する場合は、利用規約（出典表記・加工の可否・商用利用の可否）を必ず確認する

生成AIで画像を作成する場合は、Lesson1で学んだ生成AI利用ルールに従ってください。

4原則で情報の構造を成立させる

目安の学習時間：60分

参照する既習内容：近接・整列・対比・反復（CRAP）／視線誘導と導線設計

• 近接：関連する要素は近づけ、無関係な要素とは間隔を空ける
• 整列：要素の端をそろえ、見えない線で構造を作る
• 対比：重要な要素とそうでない要素の差をはっきりつける（サイズ・色・余白）
• 反復：同じ役割の要素（見出し・ボタン等）は同じスタイルで繰り返す

ワイヤーフレームで決めたファーストビューの情報が、実際のデザインでも一目で認識できるかを、4原則に照らして確認してください。

「なんとなく見づらい」で止まらず、4原則のどれに原因があるかを特定できるようになると、修正すべき箇所が具体的に絞り込めます。

部品とスタイルで一貫性を担保する

目安の学習時間：40分

参照する既習内容：コンポーネント／バリアント／スタイル／オートレイアウト

見出し・ボタン・カード等、複数箇所で使う要素は部品化し、スタイルとして登録してください。
セクションごとに似て非なる見出しデザインが混在すると、ページ全体の一貫性が崩れます。

• ボタンの形状・色・サイズを統一する
• 見出しのスタイル（サイズ・ウェイト・余白）を統一する
• 部品を共通化した箇所を把握しておく

可読性とコントラストを確認する

目安の学習時間：30分

参照する既習内容：画像上文字の可読性4手法／WCAGコントラスト比4.5:1

• 背景色と文字色のコントラスト比を、コントラストチェッカーで測定する（通常テキストは4.5:1以上を目安にする）
• 画像の上に文字を乗せる箇所は、オーバーレイやテキスト背景などの可読性確保の手法を適用する
• PC版・SP版の両方で確認する

デザインカンプの完成と提出

目安の学習時間：140分

これまでの工程をもとに、PC版・SP版のデザインカンプを完成させてください。
提出前に、以下を自分で確認します。

• ワイヤーフレームで決めたセクション構成・ファーストビュー・CTA配置がすべて反映されているか
• 配色・書体が全セクションで統一されているか
• 部品化した要素（ボタン・見出し等）にスタイルのブレがないか
• コントラスト比の基準を満たしているか
• PC版・SP版の両方が完成しているか

課題

企画書・要件定義・ワイヤーフレームの内容を踏まえ、PC版・SP版のデザインカンプを完成させる。

提出物

デザインカンプ（PC版・SP版）

提出後、担当コーチからのフィードバックを受け、必要な修正を行ってください。
修正は原則2回までを目安とします。
指摘に対しては、指摘箇所を直すだけでなく、なぜその状態になったのかを考え、他の箇所に同じ問題がないかも確認してから直すようにしてください。