このレッスンについて

目安の学習時間：10分

企画書で、あなたは「誰に」「何を」「なぜ」届けるのかを整理しました。
このレッスンでは、その内容を実際のLPの構成（どのセクションに何を、どの順番で置くか）に落とし込んでいきます。
次のLesson9でデザインカンプを作る前の設計図であり、この後の全工程の土台になるものです。
完成したら担当コーチと1on1で内容を確認してもらい、認識のズレがないかをすり合わせてから次のレッスンに進んでください。

企画書を読み返し、判断の材料をそろえる

目安の学習時間：15分

要件定義に入る前に、企画書に書いた内容を手元に広げてください。
ここから先の判断は、すべて企画書に立ち返って行います。
特に次の3点は、このレッスンを通じて何度も参照することになります。

• 対象顧客・ペルソナ：どのような人が、どのような状況でこのLPを訪れるか
• 提供価値：このサービスが、その人にとってなぜ価値があるのか
• 顧客の検討プロセス：認知から購買、購買後までの間で、このLPがどの段階に働きかけるものか

企画書の内容と、これから作る要件定義・ワイヤーフレームが食い違っていないか、レッスンの節目ごとに自分で確認しながら進めてください。

載せる情報を洗い出す

目安の学習時間：40分

まず、企画書の提供価値・対象顧客の情報をもとに、LPに載せる可能性がある情報をすべて書き出します。
この段階では取捨選択せず、思いつく限り挙げてください。

洗い出しの観点の例

• サービスの特徴・強み
• 価格・料金体系
• 利用の流れ・手順
• 実績・利用者の声
• 会社・提供者の情報
• よくある質問
• 申込方法・問い合わせ方法

架空題材「オンライン語学レッスンのお試しプラン」（提供価値：仕事終わりの社会人が通勤中の10分で学べる）であれば、洗い出しは次のようになります。

• レッスンの特徴（10分単位・スマホ完結・スキマ時間対応）
• 料金（初回無料、2回目以降の価格）
• 利用の流れ（登録→レッスン選択→受講→復習）
• 講師の紹介・実績
• 利用者の声（続けられた理由、変化）
• よくある質問（忙しくても続けられるか、返金は可能かなど）
• 申込方法（アプリのダウンロード方法、対応デバイス）

この段階で情報が少なすぎる場合、企画書の提供価値・差別化の記述が具体性に欠けている可能性があります。
企画書に立ち返って加筆してから先に進んでください。
逆に情報が多すぎて収拾がつかないと感じても、この段階で削らないでください。
取捨選択は次の8-3で行います。

グルーピングして優先順位をつける

目安の学習時間：60分

洗い出した情報を、関連性でグルーピングします。
例えば「価格」と「支払い方法」は同じグループ、「利用者の声」と「実績」は同じグループ、というようにまとめていきます。

グルーピングができたら、各グループに優先順位をつけます。
基準は「ペルソナにとっての重要度」です。
ペルソナが最も知りたいこと、最も不安に感じやすいことから順に並べてください。
自分にとって書きやすい順や、伝えたい順ではないことに注意してください。

架空題材で8-2の情報を整理すると、次のようになります。

優先順位がついたら、上から下へのセクション構成に落とし込みます。
この時点でのセクション構成は仮のものでかまいません。
次のワイヤーフレーム作成の中で微調整していきます。

ファーストビューを決める

目安の学習時間：30分

セクション構成ができたら、その中でも特に重要な「ファーストビュー（LPを開いて最初に見える範囲）」に何を置くかを決めます。

ここで陥りやすい失敗は、「重要な情報を全部ファーストビューに詰め込んでしまう」ことです。
結果としてどれも目に入らなくなり、ペルソナが本当に知りたかったことが埋もれてしまいます。

企画書のペルソナ・顧客の検討プロセスに立ち返り、「この人が最初に見たいものは何か」を1つだけ選んでください。
選んだ理由を、自分の言葉で説明できる状態にしておきます（担当コーチとの1on1で必ず聞かれます）。

架空題材で考えると、8-3で「提供価値の提示」グループを最優先にしたので、ファーストビューの候補は「10分単位のレッスン設計」になります。
ここで「講師の実績」や「料金の安さ」を同時に見せたくなっても、我慢して1つに絞ります。
候補が複数残って決めきれない場合は、Lesson6で特定した「LPが担う段階」に最も直結する情報はどれかを基準に選んでください。

機能を選定する

目安の学習時間：20分

LPに実装する機能（フォーム、スライダー、アコーディオン等）を、次の3つの基準で「やる／やらない」を仕分けます。

CTAの配置方針を決める

目安の学習時間：15分

CTA（コンバージョンへの行動を促すボタン・リンク）を、どの位置に何回配置するかを決めます。
企画書で整理した顧客の検討プロセスを踏まえ、「訪問者の気持ちが動いたタイミングで、すぐ行動に移せる位置」にCTAがあることを意識してください。

一般的には、ファーストビュー直後・訴求内容を読み終えた後・ページ最後の3箇所前後に配置しますが、これは目安であり、自分のLPの構成に応じて調整してください。

レイアウトルールを自分で設定する

目安の学習時間：35分

ワイヤーフレームを作る前に、ページ全体で統一するレイアウトルールを決めます。

• アートボード幅・コンテンツ幅（デザイン基礎で学んだ基準値を根拠に決める）
• 余白・カラム・要素間隔のルール（ガイド・グリッドを使って定義する）

この段階では、色をつけず無彩色（白・グレー・黒）で作成してください。
色がついていると、見る人（自分自身も含めて）が配色の印象に引っ張られ、情報の構造そのものを客観的に評価しにくくなります。

PC版のワイヤーフレームを作る

目安の学習時間：90分

8-2〜8-7で決めた内容（セクション構成・ファーストビュー・機能・CTA配置・レイアウトルール）をもとに、PC版のワイヤーフレームを作成します。

作成の際は、以下を確認しながら進めてください。

• セクション構成が、優先順位どおりに上から並んでいるか
• ファーストビューに、選定した1つの情報が明確に配置されているか
• CTAが、決めた位置・回数どおりに配置されているか
• レイアウトルール（幅・余白・カラム）が全セクションで統一されているか

SP版のワイヤーフレームを作る

目安の学習時間：75分

PCとスマートフォンでは、見やすいレイアウトが異なります。
横並びで配置していた要素が、スマホでは窮屈になったり、読みにくくなったりします。
PC版をそのまま縮小するのではなく、要素の並び・折り返し・ナビゲーションの扱いを個別に設計し直してください。

SP版ではコンテンツ幅の両端に適切な余白を設け、指でのタップ操作がしやすいボタンサイズ・間隔になっているかも確認します。

担当コーチとの確認

目安の学習時間：30分

PC版・SP版のワイヤーフレームが完成したら、担当コーチとの1on1で内容を確認してもらいます。
画面を共有しながら、次の点を自分の言葉で説明できるようにしておいてください。

• なぜこのセクション構成・順序にしたのか（企画書のどの記述が根拠か）
• なぜこの情報をファーストビューに選んだのか
• なぜこの機能を選定した（または選定しなかった）のか

1on1の前に、8-1〜8-9の各判断を1行ずつメモにまとめておくと、説明がスムーズになります。
表にまとめる必要はありませんが、「セクションA→企画書のこの記述が根拠」という対応が自分の中で整理できていれば十分です。

指摘があれば、その場で認識をすり合わせ、必要な範囲で修正します。
ここで固めた設計方針は、次のLesson9（デザインカンプ）でそのまま使うことになるため、曖昧なまま次に進まないようにしてください。