前のレッスンに戻る
- ✓作り手の視点から離れ、ペルソナの立場でLPを操作・検証できる
- ✓決められた確認項目に沿って、公開LPの使い勝手を判定できる
- ✓アクセシビリティ（コントラスト・可読性）を確認できる
- ✓見つかった課題について、原因を自分で特定し、担当コーチと一緒に改善まで進められる
このレッスンについて
目安の学習時間：10分
公開したLPを、初めて訪れる人の視点で見たときに分かりにくい部分が残っていないかを確認し、改善するのがこのレッスンです。
検証・改善は担当コーチと一緒に進めます。
評価される観点は1つだけです。
見つかった課題について、自分で原因を特定し、担当コーチと一緒に改善までやりきれるか
これが、このレッスンで見られる評価内容です。検証結果や修正内容を別途記録して提出する必要はありませんが、担当コーチとの対話の中で、自分がどう気づき、どう考えて対応したかを説明できるようにしておいてください。
このレッスンには配点はありませんが、この工程を完了していることが修了条件の1つです。検証・改善を行わないまま最終提出に進むことはできません。
原因を自分で考えられているかどうかが評価されます。
課題が見つかること自体は問題ではありません。
見つけた後にどう向き合うかが重要です。
作り手の視点から離れる
目安の学習時間：25分
制作者であるあなたは、自分のLPのどこに何があるかをすでに知っています。そのため、初めて見る人の感覚とは異なる前提で画面を見てしまっていないかを、あらためて確認する必要があります。
この思い込みは、次のような形で現れます。
| 制作者の思い込み | 初めて訪れる人の実際 |
|---|---|
| 「スクロールすれば料金は見つかる」 | ファーストビューで欲しい情報が見えず、そのまま離脱する |
| 「CTAの色で目立っているはず」 | 周囲の装飾に紛れて気づかれない |
| 「文言で意味は伝わっている」 | 業界用語や省略した表現が、初見の人には伝わらない |
こうした思い込みに気づくには、企画書で整理したペルソナの「接点のきっかけ」を思い出し、そのきっかけで実際に訪れたつもりで、初めてこのLPを見る人として操作することが必要です。
可能であれば、実際に制作に関わっていない第三者に操作してもらうことも有効です。
第三者は、制作者が無意識に補完している前提知識を持たないため、思い込みに気づく最も確実な方法です。
ペルソナになって操作する
目安の学習時間：35分
ペルソナの状況・ニーズを思い出しながら、LPを最初から最後まで実際に操作します。
- スマートフォンとPCの両方の実機、または検証機能で確認する
- 読み飛ばさず、上から順に読み進める
- 気になった箇所、迷った箇所、離脱したくなった箇所をその都度メモする
このとき、ペルソナの「接点のきっかけ」に沿った経路で操作を始めることが重要です。
例えば「SNS広告で偶然見かけた」というきっかけなら、いきなりLPのURLを開くのではなく、広告文を想像してから開く、というように、実際の文脈に近い状態で操作してみてください。
文脈を再現すると、いきなり本文から読み始めたときには気づかなかった違和感に気づけることがあります。
メモは「良い・悪い」の評価ではなく、「この瞬間、自分が何を考え、次に何をしようとしたか」を実況するように書くと、後の原因特定（11-5）がしやすくなります。
「価格が見当たらず、下にスクロールするか、離脱するか迷った」のような記録が、修正の手がかりになります。
確認項目と判定基準
目安の学習時間：30分
以下の項目について、それぞれ判定してください。
| 確認項目 | OKの目安 |
|---|---|
| ニーズに対応する情報にアクセスできるか | 迷わず見つけられる |
| CTAが目に入るか | スクロールしなくても、または少しのスクロールで気づける |
| 迷う瞬間がないか | 次に何を見ればよいかが、リンクや構成から分かる |
| ファーストビューで何のサービスか分かるか | 3秒以内に把握できる |
| PC・SPの双方で崩れがないか | いずれの環境でも意図した表示になる |
制作の過程をすべて知っている自分の感覚と、初めて訪れる人の感覚にはズレが生まれやすいものです。そのズレが残っていないか、あらためて確認しましょう。
この視点は、検証全体を通じて何度も立ち返るべき基本姿勢です。
じっくり読めば分かる、では不十分で、瞬間的な理解のしやすさが問われます。
アクセシビリティを確認する
目安の学習時間：25分
- 背景色と文字色のコントラスト比（通常テキストは4.5:1以上が目安）を、デザイン基礎で学んだツールで測定する
- 画像上に文字を乗せている箇所の可読性を確認する
- PC版・SP版の両方で確認する
Lesson9のデザインカンプ作成時に確認済みの箇所も、実装後の見え方が変わっていないかをあらためて確認してください。
カンプの段階では問題がなくても、実装時にCMSの初期設定（背景色や透過処理など）が上書きされ、コントラストが崩れることがあります。
カンプと実装結果を並べて、色の見え方に差がないかも合わせて確認してください。
原因を特定して直す
目安の学習時間：55分
見つかった課題について、その場で直すのではなく、まずなぜそうなったのかという原因を考えてください。
- 情報設計の優先順位づけが甘かったのか
- ワイヤーフレームの構成どおりに実装できていなかったのか
- 文言やラベルの表現が分かりにくかったのか
- 単純な設定・実装のミスだったのか
原因の切り分け方を、11-2で出てきた「価格が見当たらず離脱を迷った」という例で考えてみましょう。
| 確認する順番 | 問い | 該当した場合の対応 |
|---|---|---|
| 1 | 情報設計（Lesson8）の時点で、価格情報の優先順位は正しく設定されていたか | 優先順位を見直し、要件定義に立ち戻って再検討する |
| 2 | ワイヤーフレーム・デザインカンプ（Lesson8〜9）で、価格情報は適切な位置に配置されていたか | デザイン段階の配置ミスとして、レイアウトを修正する |
| 3 | 実装（Lesson10）の際に、デザインカンプどおりに反映できていたか | 実装の反映漏れとして、該当セクションを修正する |
このように上流（情報設計）から順に確認していくと、同じ「価格が見つからない」という症状でも、原因が全く異なる工程にあることが見えてきます。
原因の工程が分かれば、修正すべき箇所も自然に決まります。
原因に応じて、セクションの順序、要素の配置、表現、リンクの位置などを修正します。
1箇所を直したら、同種の問題が他の箇所にもないかを横断的に点検してください。
例えば「価格情報が分かりにくい」という原因が見つかったら、他のセクション（サービス内容・申込方法など）でも同じように必要な情報が埋もれていないかを合わせて確認します。
この工程は担当コーチと一緒に進めます。
自分の気づきと仮説を伝えたうえで、担当コーチと一緒に改善策を検討し、実際に手を動かして修正までやりきってください。
1人で抱え込む必要はありませんが、丸投げでもなく、自分の考えを持ったうえで担当コーチと一緒に進めることが評価されます。
- このレッスンは提出物ではなく、担当コーチと一緒に検証・改善まで進める工程である
- 評価観点は1つ：見つかった課題について、自分で原因を特定し、担当コーチと一緒に改善までやりきれるか
- 作り手の視点から離れ、ペルソナの立場でLPを操作して検証する
- 確認項目5点（情報到達／CTAの視認性／迷いのなさ／ファーストビューの理解しやすさ／PC・SPの表示崩れ）で判定する
- アクセシビリティ（コントラスト比4.5:1以上）もあわせて確認する
- 課題を見つけたら、原因を特定してから修正し、同種の問題が他にないか横断的に点検する