前のレッスンに戻る
- ✓「誰のためのLPか」「何のためのLPか」を、思いつきではなく順番に沿って考えられる
- ✓LPに必要な情報と機能を、多すぎず少なすぎない形で選び出せる
- ✓サイト（複数ページ）とランディングページ（1ページ）の設計上の違いを説明できる
- ✓このレッスンで学ぶ4つの考え方が、本課題のどのレッスンに対応しているかを説明できる
このレッスンについて
目安の学習時間：15分
Lesson3以降で、あなたは実際に自分の題材について考え、手を動かしていくことになります。
しかし、その前に「何を・どの順番で考えるか」という設計の型を身につけておく必要があります。
WordPressの実装学習では、見本サイトと詳細な手順に沿ってサイトを完成させてきました。
本課題では、この手順書がありません。
「何を作ればいいかわからない」となる原因は、操作方法を忘れたことではなく、作る前に考えるべきことを順番ごと教わっていないことにあります。
このレッスンでは、Web制作の現場で使われている「考える順番」を、架空の「パン屋のサイト」を例にしながら身につけていきましょう。
Lesson3以降では、この順番をそのまま自分の題材に当てはめて使ってください。
このレッスンで扱う考え方は、①顧客を理解する／②価値を定義する／③設計（情報設計・ワイヤーフレーム）／④機能選定の4つです。
どの考え方にも共通しているのは「まず洗い出す→次に絞り込む」という2ステップです。
まずはこの型を覚えておきましょう。
顧客を理解する
目安の学習時間：10分
サイトを作るとき、つい「いろんな人に見てもらいたい」と考えてしまいますが、これでは何を優先して伝えるべきか決まりません。
実務では、サイトを利用する可能性が高い層（ターゲットユーザー）を先に決め、そこからその代表的な1人の人物像（ペルソナ）を具体化する、という順番で考えます。
本格的なペルソナ作成では名前や趣味まで書き込みますが、次の3点に絞って考えれば十分です。
| 項目 | パン屋サイトの例 |
|---|---|
| 基本プロフィール | 30代、近隣に住む主婦・主夫。子どもの送り迎えの途中に立ち寄りたい |
| 抱えている悩み | 今日は何のパンが並んでいるかを事前に知りたい。アレルギー表示も気になる |
| 接点のきっかけ | SNSで見かけた、Googleマップで近くのパン屋を検索した |
このように「基本プロフィール」「抱えている悩み」「接点のきっかけ」の3点を書き出すだけで、後の工程（構成やデザイン）で迷ったときに立ち返る基準ができます。
「誰でも」で考えてしまうと、後の工程すべてで判断がブレます。まずは1人を思い浮かべましょう。
価値を定義する
目安の学習時間：15分
ビジネスニーズとユーザーニーズの両方を見る
サイトの目的を考えるときは、次の2つの視点を両方満たす必要があります。
| 視点 | パン屋サイトの例 |
|---|---|
| ビジネスニーズ（運営側が伝えたいこと） | 新作パンを知ってほしい、来店のきっかけを増やしたい |
| ユーザーニーズ（訪問者が知りたいこと） | 営業時間、定休日、今日のパンの種類、アレルギー情報 |
どちらか一方だけでは成立しません。
ビジネスニーズだけを追うと、宣伝ばかりで知りたい情報がないサイトになってしまいます。
反対にユーザーニーズだけを追うと、見るだけで来店につながらないサイトになってしまいます。
両方を並べて、重なるところを目的として定めましょう。
目的から情報を逆算する
目的が決まったら、次の順番で必要な情報に落とし込んでいきます。
- 目的を達成するために必要な情報を洗い出す（営業時間、パンの種類、店主の想い、アクセスなど）
- 洗い出した情報を、関連するものごとにグルーピングする（「パンの種類」と「アレルギー情報」は同じグループにまとまる、など）
- グループごとに、載せる情報のまとまりを整理する
このように「目的→必要な情報→グルーピング」の順で考えると、載せるべき情報も自然に絞り込まれていきます。
思いつきで情報を増やすと、2-4で扱う「情報が埋もれる」問題につながるので気をつけましょう。
運営側が伝えたいことと、訪問者が知りたいことの重なりを見つけることが目的定義の核心です。
設計（情報設計・ワイヤーフレーム）の考え方
目安の学習時間：15分
ワイヤーフレームとは、ページの中で「何を・どこに・どのように配置するか」を表す設計図です。
Lesson8で実際に手を動かして作成しますが、その前にここで「優先順位の決め方」を理解しておきましょう。
手順は次の4ステップです。
- 載せる情報を洗い出す（2-3で決めたグルーピング結果を使う）
- 情報どうしの関連性でさらにグルーピングする
- ターゲットユーザー（2-2で決めたペルソナ）にとって重要な順に並べ替える
- その順序を、上から下への配置に落とし込む
初心者が最も陥りやすい失敗は「大事な情報を全部、画面の一番上（ファーストビュー）に詰め込んでしまう」ことです。
パン屋サイトの例で言うと、新作情報・営業時間・店主のこだわり・SNSリンクを全部トップに並べてしまうと、結局どれも目に入らず、ペルソナが本当に知りたかった「今日のパンの種類」が下の方に埋もれてしまいます。
2-2で決めたペルソナの「接点のきっかけ」「抱えている悩み」に立ち返り、「この人が最初に見たいのは何か」を1つだけ選んで、ファーストビューに置くようにしましょう。
機能選定の考え方
目安の学習時間：10分
WordPressの実装学習では、お問い合わせフォームやスライダーなど、あらかじめ指定された機能を実装してきました。本課題では、どの機能を使うかも自分で選びます。
機能を選ぶときは、次の3つの基準で「やる／やらない」を仕分けましょう。
| 基準 | 問いかけ |
|---|---|
| 必要性 | 2-3で決めた目的の達成に、本当に必要か |
| 利用実態 | 2-2で決めたペルソナが、実際に使うか |
| 運用のしやすさ | 公開後、自分（または運営者）が更新し続けられるか |
「オンライン予約機能もつけたい」「多言語対応もしたい」など、機能はいくらでも思いつきます。
しかし機能を増やすほど、作る手間も、公開後の更新の手間も増えていきます。
本課題のようなランディングページでは、機能を絞り込んでシンプルに仕上げることが失敗しない一番の近道です。
「本当に必要か」を3つの基準で問い直し、迷ったら「やらない」を選びましょう。
機能を増やすことは簡単ですが、増やすほど作る手間・運用の手間が増えることを忘れないでください。
サイトとランディングページの違い
目安の学習時間：15分
ここまでの考え方は、複数ページで構成される「サイト」を前提に説明してきましたが、本課題で完成させる制作物は、1ページで完結する「ランディングページ（LP）」です。
この違いによって、設計の当てはめ方が少し変わります。
| 観点 | サイト（複数ページ） | ランディングページ（1ページ） |
|---|---|---|
| 情報のグルーピング結果 | 「ページ」に割り当てる | 「セクション」に割り当てる |
| 訪問者の動き | ページ間を自由に回遊する | 上から下へ読み進み、CTAに到達する |
| 目的 | 情報提供・複数の入口の用意など多岐にわたる | 特定のコンバージョン（申込・購入等）への誘導に一本化されている |
つまり、2-3〜2-4で学んだ「洗い出す→グルーピングする→優先順位をつける」という考え方の流れ自体は変わりませんが、最終的な受け皿が「ページ」ではなく「セクション」になり、訪問者の動きも「回遊」ではなく「上から下への読み進みとCTAへの到達」を設計対象とします。
LPとホームページの目的・ターゲット・デザインの違いについては、デザインおよびマーケティングの学習ですでに学んでいる内容です。ここではその違いが、情報設計の当てはめ方にどう影響するかを押さえておいてください。
受け皿が変わるだけで、「洗い出す→グルーピングする→優先順位をつける」という考え方自体は共通しています。
まとめ：各工程への当てはめ方
目安の学習時間：10分
このレッスンで扱った4つの考え方は、本課題の各工程にそのまま対応しています。
| 本課題の工程 | このレッスンで学んだ考え方 |
|---|---|
| Lesson3〜7 企画書（対象顧客） | 2-2 顧客を理解する（基本プロフィール／抱えている悩み／接点のきっかけ） |
| Lesson3〜7 企画書（制作目的・提供価値） | 2-3 価値を定義する（ビジネスニーズとユーザーニーズ） |
| Lesson3〜7 企画書（市場・競合調査） | 2-3 目的からの逆算の前提となる情報収集 |
| Lesson8 要件定義とワイヤーフレーム | 2-3 目的→必要な情報→グルーピング／2-4 情報設計の4ステップ／2-5 機能選定の3基準 |
| Lesson11 ユーザビリティ検証と改善 | 2-2 で定めたペルソナに立ち返る |
Lesson3に進んだら、企画書を書き始める前に、このレッスンの各セクションを見返しながら「洗い出す→絞り込む」の手順を1つずつなぞってみてください。
これでLesson2「設計の型」の解説を終わります。
次のレッスンからは、いよいよこの考え方を使って、あなた自身の題材について考えていきましょう。
- このレッスンで扱う4つの考え方は、①顧客を理解する／②価値を定義する／③設計（情報設計・ワイヤーフレーム）／④機能選定
- すべての考え方に共通するのは「まず洗い出す→次に絞り込む」の2ステップ
- 顧客を理解するとは「基本プロフィール」「抱えている悩み」「接点のきっかけ」の3点で十分
- 目的は、ビジネスニーズとユーザーニーズが重なるところに定める
- 情報設計は「洗い出す→グルーピングする→優先順位をつける→配置に落とす」の4ステップ。ファーストビューには最も見たい情報を1つだけ選ぶ
- 機能選定は「必要性・利用実態・運用のしやすさ」の3基準で判断し、迷ったら「やらない」を選ぶ
- サイトとLPでは、情報の受け皿が「ページ」から「セクション」に変わり、訪問者の動きも「回遊」から「上から下への読み進み」に変わる