landing-page-design

ランディングページのデザイン

概要

コンバージョンにつながり、人々を魅了するランディングページを作成します。このスキルでは、コンバージョンを重視した構成と、際立つ個性的なビジュアルデザインを組み合わせ、AI にあふれる世界でも目を引くページを作ります。目指すのは、50〜100 ドルの価値があり、自信を持って販売できるページです。

必須：雰囲気の発見（最初に行うこと）

**コードを書く前に、必ず雰囲気の発見プロセスを実行してください。**これは回答を当てはめる表ではなく、毎回独自の美的方向性を生み出す創造的なプロンプトです。

目標：似たような製品であっても、同じ見た目のランディングページを作らないこと。

---

雰囲気の発見プロセス

以下の質問をユーザーに尋ね、その後、独自の方向性をまとめてください。回答を既定のパターンに当てはめるだけではいけません。

ステップ 1：背景を集める（次の質問をする）

Q1：このブランドを現実世界の場所や物に例えると、何ですか？

「業界は何か」ではなく、具体的なものを挙げてください。午前 2 時の東京のコンビニ。祖母の台所。ブルータリズム建築の立体駐車場。サンゴ礁。747 型機のコックピット。マラケシュの蚤の市。1970 年代の録音スタジオ。

Q2：最初の 3 秒で感じてほしい感情は何ですか？

1 つ選んでください：落ち着き。活力。好奇心。信頼。喜び。感銘。反抗心。懐かしさ。ひらめき。愉快さ。洗練。歓迎されている感覚。興味。自信。

Q3：意外な要素を 2 つ選び、掛け合わせてください。

例：「医療用パッケージ＋スケートボードのグラフィック」「スプレッドシート＋ストリートアート」「高級ホテル＋パンク系のジン」「NASA のミッションコントロール＋幼稚園」「日本のコンビニ＋ヴィクトリア朝の図書館」

Q4：このページを何と絶対に間違えられたくないですか？

積極的に避けたいものを 2〜3 個、具体的に挙げてください。「暗号資産プロジェクト」「ウェルネスアプリ」「銀行が作ったようなもの」「紫のグラデーションを使ったものすべて」

ステップ 2：美的方向性を考案する（検索せずに作る）

回答をもとに、以下を決めて独自の雰囲気を生み出してください。

色の考案（覚えた配色を使わず、場所や物から導き出す）

• Q1 の現実世界の場所や物には、どんな色がありますか？
• そのモチーフに本物らしさを感じる色を 3〜4 色選びます
• 具体的な HEX コードを新たに考案します。過去のプロジェクトのコードを再利用してはいけません
• 「青とオレンジ」ではなく、「真夜中のボデガ」や「ラストベルトの朝」のような、印象に残る名前を配色につけます

タイポグラフィの考案（掛け合わせに声を合わせる）

• その場所では、文字はどんな響きになりますか？
• Q3 の掛け合わせを体現するディスプレイフォントを見つけます
• いつもの選択肢に頼らず、新鮮な視点で Google Fonts を探します
• ウェイト、幅、コントラスト、癖を考慮します

レイアウトの考案（物理的な空間から導き出す）

• Q1 の場所では、空間はどのように構成されていますか？
• 窮屈ですか、それとも広々としていますか？グリッド状ですか、それとも有機的ですか？縦方向ですか、それとも横方向ですか？
• Q3 の掛け合わせを体現する、意外なレイアウトを選ぶとしたらどんなものですか？

動きの考案（感情に合わせる）

• Q2 の感情は、どのように動きますか？
• 落ち着き＝かろうじて気づくほどの動き。活力＝躍動的な動き。洗練＝ゆっくりと意図的な動き。
• このページを特徴づける動きを 1 つ選ぶとしたら何ですか？

ステップ 3：雰囲気の仕様を書く

コーディングの前に、以下を明確に書き出します。

VIBE NAME: [Invent a 2-3 word name]
REFERENCE: [The place/object from Q1]
EMOTION: [From Q2]
COLLISION: [From Q3]
ANTI-PATTERNS: [From Q4]

COLORS:
- Primary: [hex] - [why this color]
- Secondary: [hex] - [why]
- Background: [hex] - [why]
- Accent: [hex] - [why]
- Palette name: [evocative name]

TYPOGRAPHY:
- Display: [specific font name] - [why it fits]
- Body: [specific font name] - [why]
- Character: [describe the voice]

LAYOUT:
- Density: [sparse/balanced/dense]
- Shapes: [sharp/rounded/organic/mixed]
- Signature element: [one unusual layout choice]

MOTION:
- Level: [still/subtle/moderate/dynamic/chaotic]
- Signature animation: [one specific animation that defines this]

WILDCARD:
- One unexpected detail that doesn't "match" but makes it memorable

ステップ 4：新鮮さを確認する

先に進む前に、以下を確認します。

• 直近 3 件のプロジェクトの HEX コードを再利用していない
• 使い慣れたフォントを無意識に選んでいない（確認：Inter、Nunito、Space Grotesk を使っていませんか？使っている場合は別のフォントを探します）
• Q3 の掛け合わせが、実際に選択した要素に表れている
• 以前のランディングページと見間違える可能性がない
• 自分でも意外に感じる、型破りな要素を取り入れている

---

雰囲気の発見の例

Q1 - 場所／物：「ラッシュアワーの日本の駅」

Q2 - 感情：「自信」

Q3 - 掛け合わせ：「交通標識＋オートクチュール」

Q4 - 間違えられたくないもの：「瞑想アプリ、遊び心のあるもの全般、スタートアップ界隈のテック」

作成した雰囲気の仕様：

VIBE NAME: Shinjuku Runway
REFERENCE: Japanese train station at rush hour
EMOTION: Confident
COLLISION: Transit signage + haute couture
ANTI-PATTERNS: No soft gradients, no playful illustrations, no rounded friendly shapes

COLORS:
- Primary: #1a1a1a - the black of train doors
- Secondary: #f5f5f0 - platform concrete, worn smooth
- Background: #fafaf8 - fluorescent-lit white
- Accent: #e60012 - JR line red, commanding attention
- Palette name: "Platform Edge"

TYPOGRAPHY:
- Display: Darker Grotesque - confident, slightly condensed, European edge
- Body: Noto Sans JP - clean utility, transit-inspired
- Character: Authoritative but not cold. Clear. Directional.

LAYOUT:
- Density: Rich but organized - like a station map
- Shapes: Sharp with intentional rounded exceptions (like train windows)
- Signature element: Strong horizontal bands that divide sections like train schedules

MOTION:
- Level: Subtle but precise
- Signature animation: Elements slide in from the side like arriving trains - horizontal, smooth, with exact timing

WILDCARD:
- One element uses a fabric-like texture overlay - the haute couture collision

---

インスピレーションの出発点（Q1で行き詰まったとき）

場所： バンコクのナイトマーケット | 閉館間際の無人の美術館 | 午前4時の空港ラウンジ | ヴィンテージレコード店 | 病院の待合室 | カジノのフロア | 冬の温室 | 地下鉄のホーム | 天文台のドーム | 廃工場 | 豪華ヨットの船内 | 24時間営業のコインランドリー | 図書館の貴重書室 | 自動車整備工場 | 宇宙ステーションのモジュール

オブジェクト： 1980年代のシンセサイザー | 手術器具 | ヴィンテージの旅行かばん | レーシングバイク | アンティークのコンパス | 工業用織機 | ネオンサイン | タイプライター | 科学実験用ガラス器具 | 革装丁の本 | 回路基板 | 陶磁器の食器

時代／ムーブメント： ソビエト構成主義 | メンフィス・デザイン | スイス・インターナショナル | アール・ヌーヴォー | バウハウス | デ・ステイル | グーギー建築 | ストリームライン・モダン | ブルータリズム | 日本のメタボリズム | スカンジナビア・モダニズム | イタリア未来派

---

収束を防ぐルール

1. 16進カラーコードを記憶しない - いつもの青を思い出すのではなく、参考資料から毎回新しく色を生成する
2. フォントをローテーションする - 連続するプロジェクトで同じディスプレイフォントは使えない
3. 組み合わせの衝突を見せる - Q3の両方の影響が伝わらない場合は、もっと強く反映する
4. 意外性のある要素を必ず入れる - どの雰囲気にも、「なじまない」が個性を生む要素を1つ入れる
5. 名前を付ける - 名前のない雰囲気はありきたりになります。名前のある雰囲気には個性があります。

---

簡単な確認質問（最小限のバージョン）

ユーザーが背景情報なしに「ランディングページを作って」とだけ言った場合は、次の質問をします。

1. 「このブランドのエネルギーを表す場所やオブジェクトを1つ挙げるとしたら、何ですか？」
2. 「どんな感情を前面に出すべきですか？」
3. 「どんな見た目だけは絶対に避けるべきですか？」

この3つの回答から、雰囲気をまとめてください。

---

必須：コピー戦略（雰囲気の発見と同時に実施）

雰囲気の発見と並行して実施してください。 雰囲気の発見で見た目を決め、コピー戦略で言葉を決めます。コードを書く前に、両方を完了させてください。

コンバージョンの方程式

コピーに関するすべての判断は、次の方程式に基づきます。

Purchase Rate = Desire - (Labor + Confusion)

• 欲求を高める → 価値を明確かつ具体的に伝える
• 手間を減らす → 簡潔にし、流し読みしやすい構成にして、次の行動を明確にする
• 混乱を減らす → 何を提供するのかを正確に伝え、ボタンをひと目で見つけられるようにする

コピーの判断に迷ったら、「欲求を高めるか、手間や混乱を減らすか？」と考えてください。

ステップ1：懸念事項を把握する

見出しを1つ書く前に、購入をためらう理由を特定します。ユーザーに次の質問をします。

「お客様が購入をやめかけたのは、どんな理由からですか？」 「まだ購入していない人は、なぜ購入していないのでしょうか？」

よくある懸念事項のカテゴリー：

• 「これを使うスキルや時間がありません」
• 「自分の具体的な状況ではうまくいきません」
• 「得られるものに対して高すぎます」
• 「まだ十分に信用できません」
• 「実際に何をするものなのか分かりません」

主な懸念事項を3つ書き出します。これをもとに、見出しのフック、機能の説明、CTAの表現を決めます。

ステップ2：見出しの方程式

ヒーロー見出しはすべて、次の要素で構成します。価値提案 + フック

価値提案は、次の基準を満たす必要があります。

訪問者が見出しだけを見て、ほかには何も読まなかったとしても、何を販売しているのかを正確に理解できますか？

❌ 「ワークフローを改善」（企業向けの空疎な表現 — 何のワークフローですか？） ❌ 「生産性の未来」（具体的なことが何も伝わらない） ✅ 「食料品を1時間以内にお届け」（具体的で、明確） ✅ 「コード不要。視覚的にウェブサイトをデザイン」（できることと、主な懸念への対応を示している）

フックには2種類あります。

タイプA — 大胆で具体的な主張（好奇心を引き出す）：

• 「デプロイ時間を4時間から12分に短縮」
• 「先月、10,000チームがより速くリリース」

タイプB — 懸念への対応（購入の最大の障壁を取り除く）：

• 「クレジットカード不要」（信頼に関する懸念に対応）
• 「お使いの既存ツールで動作」（乗り換えコストに関する懸念に対応）
• 「5分でセットアップ」（手間に関する懸念に対応）

ステップ1で挙げた最も大きな懸念をもとに、フックの種類を選びます。

ステップ 3：サブ見出しのルール

サブ見出しの役割は、次の 2 つだけです。

1. 製品が何かを説明する（見出しがメリット重視の場合）
2. 強調した主張がどのように実現できるのかを説明する（見出しで主張を示した場合）

最大 1～2 文にします。軽快な文体にしましょう。3 文必要なら、見出しの役割が十分ではありません。

ステップ 4：機能紹介文の構成

各機能には、次の 3 要素だけを含めます。

要素	ルール
機能の見出し	価値提案だけを短く示します。率直に書きましょう。❌「チームに力を」 ✅「リアルタイムで共同作業」
機能の段落	簡潔に説明し、重要な懸念点を 1 つ解消します。必要なら詳細にリンクします。長文の壁は避けましょう。
機能の画像	製品の動作中の様子を見せます。ソフトウェアの場合は、GIF ＞ スクリーンショット ＞ 抽象的なアート。物理的な製品の場合は、使用例と品質がわかるクローズアップを使います。

各機能は、ヒーローセクションの主な価値提案と結び付ける必要があります。機能を無作為に並べるのではなく、ファーストビューで示した主張を裏付けるものにしましょう。

ステップ 5：CTA の文言

CTA は一般的なものではなく、ヒーローセクションのストーリーを引き継ぐ必要があります。

❌「始める」／「デモを申し込む」／「登録する」（安易で、文脈に合っていません） ✅「近くの食べ物を探す」（配達のストーリーを引き継ぐ） ✅「デザインを始める」（デザインツールのストーリーを引き継ぐ） ✅「節約額を確認する」（家計のストーリーを引き継ぐ）

CTA ボタンの文言は、見出しを読んだ後に続く自然な一文のように感じられるものにします。

ステップ 6：ソーシャルプルーフ戦略

著名な顧客やメディア掲載がある場合：

• ロゴを流れるように表示します。「みんなすでに知っている」という FOMO を生み出せます。
• 目を引く指標（顧客数、処理した売上など）を強調します。

目立ったソーシャルプルーフがまだない場合（立ち上げ初期）：

• 認知度の高い 3～5 社に無料で利用してもらい、その後ロゴを表示します。
• 実名と写真を添えた、具体的な推薦コメントを使います（ベータ版ユーザーのものでも構いません）。
• 合計数の統計を見せます（「500 以上のチームが利用」は、空のロゴ欄より効果的です）。
• メディア掲載、ポッドキャスト、ニュースレターでの言及があれば、「掲載実績」として紹介することを検討します。

偽ってはいけません。空のソーシャルプルーフ欄は、欄自体がないよりも悪い印象を与えます。

ステップ 7：複数の対象者への案内

製品が異なるペルソナ（個人とチーム、開発者とデザイナーなど）を対象とする場合：

ページ上部に、訪問者を関連セクションへ案内する**「自分で選ぶアドベンチャー」**要素を追加します。例：

• 切り替えタブ：「開発者向け」／「デザイナー向け」
• 分割されたヒーロー：「私は［役割 A］です」／「私は［役割 B］です」
• ヒーローからリンクする、対象者別のランディングページ

ニーズが異なる人たちを、同じファネルに無理に通さないようにしましょう。

コピー戦略仕様

Vibe Spec と併せて、次の内容を記述します。

TOP 3 OBJECTIONS:
1. [objection] → addressed in: [headline/feature/CTA]
2. [objection] → addressed in: [headline/feature/CTA]
3. [objection] → addressed in: [headline/feature/CTA]

HEADLINE:
- Value prop: [what you sell, concretely]
- Hook type: [bold claim / objection addressed]
- Full headline: [the actual text]
- Litmus test: Would someone know what we sell from this alone? [yes/no]

SUBHEADLINE: [1-2 sentences — what it is + how the claim works]

CTA TEXT: [narrative continuation of headline]

AUDIENCE: [single / multi-persona]
- If multi: [how we route them]

---

50％ルール

時間の 50％をヒーローセクションに費やしましょう。 SNS 用のカバー画像であり、第一印象であり、興味を引く要素です。ほかのすべては、ヒーローを適切に仕上げることから始まります。

セクション構成（上から下へ）

1. ヒーローセクション（最優先）

成否を左右する要素です。次の内容を含める必要があります。

• 見出し：Copy Strategy Spec に記載した価値提案とフック（上記参照）。リトマス試験に合格する必要があります。これだけを見た人が、何を販売しているのかわかりますか？
• サブ見出し：それが何か、そして主張がどのように成り立つかを説明します。最大 1～2 文にし、軽快な文体にします。
• CTA ボタン：見出しのストーリーを引き継ぎます（「始める」ではありません。上記の CTA の文言ルールを参照）。補助的な CTA は任意です。
• ソーシャルプルーフ：ロゴの流れるような表示、推薦コメント、または信頼を示すバッジを使います。立ち上げ初期の場合は、上記のソーシャルプルーフ戦略を参照してください。
• ビジュアル要素：製品画像、イラスト、またはアニメーション背景

ヒーローのバリエーション：

• 左にテキスト、右にビジュアルを配置した分割レイアウト
• 浮遊要素を配した中央揃え
• テキストを重ねた、画面全体に広がる背景
• 装飾要素を取り入れた非対称レイアウト

2. 特徴／メリットセクション

製品で何ができるかを示します。各特徴には、見出し（価値を簡潔に伝える表現。「Empower」や「Revolutionize」は使わない）、段落（簡潔にまとめ、懸念を1つ解消する）、画像（抽象的なアートではなく、製品の使用中の様子）の3要素が必要です。すべての特徴で、ヒーローの主要な価値提案に触れてください。

レイアウトの選択肢：

• Bento Grid：非対称レイアウトのカード（Appleが広めた形式）
• 交互配置の行：画像とテキストを左右交互に配置
• アイコングリッド：シンプルなアイコンと短い説明
• インタラクティブカード：ホバー時の状態変化、マイクロアニメーション

3. ソーシャルプルーフセクション

以下の要素で信頼を築きます：

• ロゴカルーセル（マーキーアニメーション）
• 写真付きの推薦コメントカード
• アニメーション付きカウンターで統計／指標を表示
• 導入事例の抜粋

4. 仕組みの説明セクション

手順を追って説明します：

• 番号付きの手順（01、02、03のパターンで洗練された印象を加えます）
• スクロールに合わせて固定し、段階的に表示
• タイムラインまたはフローチャートによる視覚化

5. 料金セクション（該当する場合）

• 2〜3段階のプラン比較
• 「おすすめ」プランを強調
• 機能比較表
• 下部にFAQのアコーディオン

6. CTAセクション

最後にコンバージョンを促します：

• 価値提案を繰り返す（ヒーローの見出しを想起させます）
• 元のフックを捉え直す力強い見出し
• 焦点を絞った単一のアクション — 別のCTAではなく、ヒーローと同じストーリーに沿ったCTA
• 緊急性を伝える要素（実際に差し迫った事情がある場合のみ。決して演出しないこと）

7. フッター

• ナビゲーションリンク
• ソーシャルアイコン
• 法的情報へのリンク
• 任意のニュースレター登録フォーム

AIっぽさを避ける原則

アイコン：Lucideは避ける（使われすぎています）

代わりに以下を使用します：

• Iconify Solar：複数のスタイル（アウトライン、ブロークン、デュオトーン）
• Heroicons：Appleのようなシンプルさが必要な場合
• Phosphor：柔軟なウェイトシステム
• カスタムSVG：ブランドを差別化する場合

フォント：Inter／Robotoは避ける

個性のある代替フォント：

• ディスプレイ：Newsreader、Playfair Display、Space Grotesk、Clash Display
• 本文：Outfit、Plus Jakarta Sans、Manrope、Satoshi
• 等幅：JetBrains Mono、IBM Plex Mono、Fira Code

色：紫のグラデーションは使わない

大胆な代替案：

• 深いネイビー＋エレクトリックなアクセントカラー
• 温かみのあるニュートラルカラー＋単一のアクセントカラー
• 色調に深みを持たせたモノクローム
• ネオンのアクセントを加えたダークモード
• アースカラー／オーガニックなパレット

レイアウト：グリッドを崩す

• 要素を重ねる
• 斜めのセクション
• 非対称な余白
• コンテナからはみ出すヒーロー要素
• デザイン要素としてのネガティブスペース

アニメーション用語

登場時のアニメーション

• fade-in：不透明度をシンプルに変化させます
• blur-in：ぼやけた状態から始まり、鮮明になります
• slide-in：方向に沿って登場します
• scale-in：小さいサイズから本来のサイズへ拡大します
• stagger：子要素を順番に表示します

継続的なアニメーション

• marquee：水平方向に無限スクロールします（ロゴ、推薦コメント）
• beam：光がパス／境界線に沿って移動します
• pulse：拡大縮小／不透明度を控えめに変化させます
• float：上下に穏やかに動きます
• rotate：継続的に回転します（アイコン、装飾）

インタラクティブなアニメーション

• hover-lift：Y方向への控えめな移動＋影
• hover-glow：境界線／影の色が変化します
• hover-reveal：隠れていた要素が表示されます
• click-ripple：マテリアルデザイン風のフィードバック

装飾要素

• 垂直のグリッド線（コンテナサイズに基づく）
• 要素をつなぐ曲線状のコネクター
• 背景のグラデーションオーブ／ブロブ
• グレイン／ノイズテクスチャのオーバーレイ
• 幾何学図形（円、角丸の長方形）

デザインリソース

ヒーローの参考例

• Superhero（superhero.design）：厳選されたヒーローセクション
• Dribbble：「hero section」「landing page」で検索
• Awwwards：受賞歴のあるデザイン

セクションのパターン

• Mobin：セクションごとに構成を解説した実在のウェブサイト
• Bento Grids：カードレイアウトの参考例
• CTA Gallery：CTAのパターン

タイポグラフィ

• Google Fonts：無料で、AIから利用できるフォント
• Fontshare：無料の高品質フォント
• H1 Gallery：見出しの参考例

アイコンとロゴ

• Iconify：統合アイコンAPI（Solar、Heroiconsなど）
• Simple Icons：ブランドロゴ（SVG）
• Heroicons：Tailwindのアイコンセット

実装ワークフロー

フェーズ 1：発見と戦略

1. Vibe Discovery（美的方向性）とCopy Strategy（言葉とコンバージョン）を並行して実施します
2. コードに着手する前に、両方の仕様書を作成します
3. ワイヤーフレームとして、ヒーロー部分のスクリーンショットを5～10枚集めます
4. 必要なセクションのパターンを特定します
5. アイコンセットとフォントの組み合わせを選びます

フェーズ 2：ヒーローの開発

1. 最適な参考スクリーンショットを基にヒーローを生成します
2. 色、フォント、レイアウトを変更しながら反復します
3. アニメーション（ビーム、フェードインなど）を追加します
4. 装飾要素（曲線、グリッド、数字）を追加します
5. 独自性が出るまで調整します

フェーズ 3：セクションの構築

1. セクションを一度にすべてではなく、一つずつ追加します
2. セクションごとに、具体的なコンポーネントやスクリーンショットを参考にします
3. ヒーロー部分の色とフォントの一貫性を保ちます
4. セクション固有のアニメーションを追加します

フェーズ 4：仕上げ

1. レスポンシブのブレークポイント（モバイル、タブレット、デスクトップ）を調整します
2. プレースホルダー画像を実際の高品質なアセットに差し替えます
3. パフォーマンスが最適になるようアニメーションを調整します
4. すべてのインタラクティブ要素をテストします

フェーズ 5：プレゼンテーション

1. 無限キャンバスレイアウトでカバー画像を作成します
2. ヒーロー部分を目立つように表示します
3. モバイルとデスクトップの表示を含めます
4. 控えめな背景（ぼかしたグラデーション、パターン）を追加します

プロンプトのパターン

ヒーローの生成

Create a hero section for [PRODUCT TYPE].
Change text, names, and numbers to fit [BRAND].
Use Iconify Solar icons (duotone style).
Use [FONT] for headlines.
Add vertical container-size grid lines.
Add 01, 02, 03 step indicators for sophistication.
Use [COLOR] as primary, dark mode.

セクションの追加

Adapt a new [SECTION TYPE] section.
Match the hero's color scheme and typography.
Use marquee animation for logos.
Add fade-in blur-in entrance animation.
Keep the hero exactly as is.

アニメーションの強化

Add beam animation to the primary button border.
The beam should be 1px, continuously traveling around the pill shape.
Add a subtle hover-lift effect to feature cards.

ネガティブプロンプト（変更してはいけないもの）

Don't change the hero section.
Keep the navbar exactly as is.
Don't modify the existing animations.

品質チェックリスト

ビジュアルの独自性

• 汎用的な紫色のグラデーションを使っていない
• デフォルト以外のアイコンセットを使っている（Lucide ではない）
• 特徴的なフォントの組み合わせになっている
• 少なくとも1つの「印象に残る」要素がある
• CSS 変数で一貫したカラ―システムを適用している

技術的な品質

• モバイルに対応している（横スクロールがない）
• すべての画像が読み込まれる（壊れたプレースホルダーがない）
• アニメーションがスムーズに動作する（カクつかない）
• 色のコントラストがアクセシブルである
• 初回読み込みが速い

コンバージョンの最適化

• スクロールせずに見える範囲に、明確な価値提案がある
• 見出しがリトマステストに合格する（見出しだけで何を販売しているか分かるか？）
• 主要なCTAが1つだけ表示され、「Get Started」ではなく、ストーリーの続きを促す表現になっている
• 主な懸念事項の上位3つに、ページ内のどこか（見出し、機能、またはCTA）で対処している
• ソーシャルプルーフがある（意図的に省略する場合を除き、決して捏造しない）
• 情報の階層が論理的である
• 主要なアクションを妨げるものがない
• 機能の説明がヒーロー部分の価値提案と結び付いている（無関係な機能の羅列ではない）

ユーザーテストのフレームワーク（構築後）

リリース前に、2種類のレビュアーからフィードバックを得ます。

タイプ A — 市場に詳しくない人（理解度をテスト）：

• 5秒後に、何を販売しているか説明できますか？
• まだ答えられていない疑問は何ですか？

タイプ B — 市場に詳しい人（差別化をテスト）：

• 知っている競合製品と比べて、どう違いますか？
• 乗り換えるとしたら、どんな理由がありますか？

次の6つの質問をします：

1. コンバージョン：今すぐ登録しますか？何が妨げになっていますか？
2. 関心度：1～10で評価してください。どこを書き換えますか？
3. 明確さ：分かりにくい点は何ですか？まだどんな疑問がありますか？
4. 詳細：もっと詳しい説明が必要なのはどの部分ですか？
5. 簡潔さ：50％削るとしたら、何を削りますか？
6. 不信感：何が疑念を抱かせましたか？