CursorやLovableで30分もあればLPが出来上がる時代です。しかし「作れること」と「成果が出ること」は全く別の問題です。

実際、CursorのHead of DesignであるRyo Luが8社のYCスタートアップLPを生レビューしたところ、「5秒で何のサービスかわかる」と評価されたのはわずか2社。残りの6社は、訪問者が「これは何？」と首をかしげた時点で離脱していました。

なお、そのCursor自身はARR $1.2B（約1,800億円）に達した急成長企業です。そのHead of Designが語るデザイン基準は、実績に裏付けられた言葉だといえます。

本記事では、Notion・Stripe・Cursorという一流プロダクトのデザインを手がけてきたRyo Luの「辛口レビュー」から、LPの本質的な改善ポイントを抽出します。Ryo LuはNotionではファウンディングデザイナーとして、現在のNotionのデザインシステム（カラーパレット・タイポグラフィ・コンポーネントライブラリ）の基礎を構築した人物です。Stripeではペイメントフロー周りのUX改善を担当し、その後CursorのHead of Designとして参画しています。

この記事でわかること

1. 訪問者の3つの自問: 全LPに共通する「What / Is it for me? / Does it work?」の法則
2. バイブコーディングLPの失敗パターン: 7つの典型例と具体的な改善策
3. 高評価LPの構造: 唯一「かなり良い」と評されたFreyaから学ぶ設計術

基本情報

訪問者が必ず自問する3つの質問の概念図

訪問者が必ず自問する「3つの質問」

レビューに入る前に、Ryoが全8社を貫く評価軸として提示したのがこの原則です。

“

"A lot of times when people hit a site, they're asking themselves a question."

「サイトに訪れたとき、人は必ず心の中で問いかけます。」

— Ryo Lu, Head of Design at Cursor

その3つの問いとは：

1. What is this?（これは何？）——ヒーローセクションの見出し・サブヘッドラインで即答できるか
2. Is it for me?（自分向け？）——ターゲットを名指しで呼んでいるか
3. Does it work? / Is it credible?（機能する？信頼できる？）——デモ・導入事例・数値で証明しているか

レビューされた8社のうち、この3問に5秒以内で答えられたのは2社だけでした。残りは「これは何？」の時点で訪問者を離脱させてしまっていました。

あなたのLPで試す方法は簡単です。サービスを全く知らない人にヒーローセクションを5秒だけ見せて、「何のサービス？」「誰向け？」「信頼できる？」と聞く。3問すべてに答えられなければ、改善の余地があります。

8社レビューハイライト：失敗から学ぶ

ここからは8社のレビューを見ていきます。各社の指摘事項を「3つの質問」のどこに問題があったのかという視点で整理しました。

Crunch（Excel向けAIアナリスト）

概要: Excelネイティブなのに動くAIアナリスト。財務モデル（DCF等）を自動生成。

3つの質問との対照:

核心的アドバイス: ターゲットを明確に呼びかけるサブヘッドラインを追加する。「投資銀行やコンサルの財務アナリスト向け」と直接書くこと。さらに、アニメーションのタイミングが早すぎてスクロールしていないのに動く問題も指摘されました。

Velvet（AIブランド動画）

概要: AIでブランドビデオを生成するサービス。

3つの質問との対照:

“

"What is this? Do a better job of explaining what it is. Why is it different? Who is it for?"

「これは何か？もっとちゃんと説明して。他と何が違う？誰向け？」

— Ryo Lu

さらに致命的なのが、Book a Demoボタンがフォールド（スクロールしないと見えない位置）以下にあり、逆にYCロゴが自社ロゴより目立っていたことです。

Clavis AI / Strata（MCP サーバー）

概要: AIエージェントが複数のMCPツールを安定して使えるインフラ。

3つの質問との対照:

ジャーゴンについてRyoはこう断言しました。

“

"The thing I hate is companies talk in their own words, with their own concepts that nobody else understands."

「私が嫌いなのは、誰も理解できない自社独自の概念と言葉で話す企業です。」

— Ryo Lu

具体的に、こう書き換えるべきです：

CTA（行動喚起ボタン）も問題です。Discord入会、GitHub、バックバイYC、プロダクトオブザデイが同時に並んでおり、訪問者は何をすればいいかわかりません。

Code Crafters（開発者学習プラットフォーム）

概要: チュートリアルではなく実際のプロジェクトで腕を磨く開発者向け学習サービス。

指摘事項

• パープルグラデーション（AIスロップの典型と指摘）
• サイト内を回遊すると全く異なるデザインのページが出てくる
• About ページがYCのLaunchページに飛ばされる
• 人物写真のスタイルが全員バラバラ

バイブコーディングLPの典型的失敗パターン

この事例に対して、Ryoは「バイブコードっぽく見えないための具体策」を提示しました。

“

"To avoid looking vibe coded: use system fonts, think about your design tokens. Avoid massive shadows, purple gradients, bad typography."

「バイブコードっぽく見えないために: システムフォントを使い、デザイントークンを考える。巨大シャドウ、パープルグラデーション、悪いタイポグラフィを避ける。」

— Ryo Lu

ポイントは、AIに任せると「デフォルトで選ぶもの」を意識的に避けることです。AIが最初に提案するデザインは、他の何千ものサイトでも同じものが使われています。そこに差別化はありません。

Slashy（AIメールツール）

概要: ChatGPTの機能をメールクライアントに組み込んだツール。

指摘事項

• UIの細部が粗い（マークダウン出力がそのまま表示されている箇所）
• 画像スタイルが不統一（影あり・なし、ボーダーあり・なし・二重）
• 他社製品名でしか自社を説明していない（「Cursorのメール版」「ChatGPT内蔵」）

“

"The details are what matters."

「細部こそが重要です。」

— Ryo Lu

「Cursorのメール版」という説明は、一見わかりやすく見えます。しかし2つの問題があります。まず、Cursorを知らない人には全く伝わりません。そして、自社のアイデンティティを他社に依存させてしまいます。Cursorの評判が変われば、自社の説明も意味を失います。

Finta（会計・税務自動化）

概要: 米国のC-corps/LLC向けの会計・確定申告自動化サービス。

良かった点

• セットアップ10分後の時刻をリアルタイムで表示する小技が秀逸
• 各コンポーネントは丁寧に作られている
• 詳細なスクリーンショットの切り抜きが効果的

指摘事項

• ターゲット（US-based C corps等）がヒーロー部分に明記されていない
• セクション間のビジュアル遷移（白→グレー→カード）が混乱を招く

Fintaはデザインの完成度は高かったものの、「Is it for me?」の回答が遅いという共通課題を抱えていました。

Vibe Flow（ビジュアルプロンプトツール）

概要: プロンプトをビジュアルで組み立てるAI開発ツール。

指摘事項

• 実行するとエラーが多発
• 最初にサインアップウォールが来る（試す前に登録を求める）
• スピナーが2つ表示される
• ローディング中に何が起きているか不明

AIプロダクトでは「待ち時間」のUXが特に重要です。Ryoはこう指摘しました。

“

"You want to almost like show every single state that's happening. If it does tool calls, just show them."

「起きていること全てを見せるようにしたい。ツールコールをしているなら、そのまま表示すればいい。」

— Ryo Lu

これはLP設計だけでなく、AIプロダクト全般に当てはまる原則です。AIが何をしているか可視化するだけで、ユーザーの体感待ち時間は大幅に短くなります。

Freyaはなぜ唯一の高評価を得たのか

7社の失敗事例を見てきました。しかし、8社中1社だけ、Ryoから「This is the best one we've seen today」（今日一番良い）と評されたLPがあります。Freya（エンタープライズ向け音声AIエージェント）です。Freyaはすでに$3.5Mの資金調達を完了しており、LP品質の高さが事業成長にも結びついているといえます。

Freyaが他の7社と何が違ったのか。「3つの質問」で整理します。

最高評価LPの構造（Freya参考）

Freyaが高評価を得た構造:

1. ヒーロー: 「何をするもの」が5秒で伝わる
2. デモ: 今すぐ試せる（サインアップ不要）
3. ユースケース: 具体的な業務シナリオ
4. 社会的証明: 数値・導入事例
5. 明確なCTA: 1つだけ（Book a Demo）

注目すべきは、Freyaも完璧ではなかったことです。スクロールジャック（マイナス5点と指摘）があり、CTAが「Meet the Team」という弱い表現になっていました。「Book a Demo」にすべきだとRyoは指摘しています。

つまり「3つの質問に答える」という基本ができていれば、細部に課題があっても圧倒的に良いLPになります。逆にいうと、基本ができていなければ、どれほど細部を磨いても意味がありません。

バイブコーディングLPの7つの典型的失敗パターン

8社のレビューから抽出したパターンです。自社LPに当てはまるものがないか確認してください。

日本企業への適用：LP品質チェックリスト

ネクサフローが支援してきた日本企業のLP改善経験から、Ryo Luの指摘に日本特有の課題を加えたチェックリストです。

基本チェック（3つの質問に基づく）

• 5秒以内に「これは何か」が伝わるか
• ターゲットが明記されているか（「〜向け」「〜の方へ」）
• 信頼性の根拠があるか（デモ・導入事例・数値）
• 1つのスクロールに1つのCTAのみか
• 自社製品名が一貫しているか（2つ名前を使っていないか）
• 説明に他社製品名を使っていないか

デザイン品質チェック

• パープルグラデーション・巨大シャドウを避けているか
• フォントは統一されているか（最大2種類まで）
• 画像スタイルが統一されているか（影・ボーダーの有無）
• ホバー状態が正しく機能するか
• 動画・アニメーションは意味があるタイミングで動くか

日本企業特有のチェック

• 代表者名・会社所在地が明記されているか
• プライバシーポリシー・特商法が整備されているか
• お問い合わせ先が明確か（メール・電話・フォーム）
• 日本語が自然か（機械翻訳のままになっていないか）

FAQ

Q. AIツールでLPを作るとき、デザインで一番重要なことは？

デザイントークン（色・フォント・間隔のルール）を最初に定義することです。Ryoが強調したように「しっかりした基礎トークンとコンポーネントがあれば、AIは構成を得意としています」。つまりAIに「作って」と言う前に、ブランドの基礎材料を整えることが先です。

Q. YC出身を強調することがなぜ逆効果になることがあるの？

YCロゴが自社ロゴより目立つと、訪問者は「YCの会社？それとも別の会社？」と混乱します。YC出身という情報は信頼性の補強にはなりますが、「何をするものか」の前に来るべきではありません。正しい順番は：What → Is it for me? → Social proof（YC）です。

Q. 動画やアニメーションはLPに使うべき？

条件付きで有効です。Ryoの指摘によると、アニメーションは「注意を奪う力がある」ため、タイミングが重要です。ページロード直後に動くアニメーションは、訪問者がまだ情報を処理する準備ができていないタイミングで動いてしまいます。一方、Freyaのようにユーザーが自分で起動するデモ動画は非常に効果的です。

Q. スマートフォンでの表示も意識すべき？

Ryoはデスクトップでレビューしていましたが、日本のBtoB SaaSでもモバイルからのLP流入は増えています。特にSNS広告からの流入はほぼモバイルです。ヒーローセクションの「5秒テスト」は必ずスマートフォンでも行ってください。

まとめ

8社のLPをRyoが辛口で評価した結果、見えてきたのは「基本の徹底」の重要性です。

派手なアニメーションも、洗練されたグラデーションも、「What is this?」に答えられなければ意味がありません。唯一の高評価を得たFreyaが証明したのは、「5秒で何かがわかる」「すぐ試せる」「1つのCTAに集中する」というシンプルな原則でした。

主要ポイント

1. 3つの自問に答える: What / Is it for me? / Does it work? を5秒以内に回答させる
2. ジャーゴンを排除: 自社用語ではなく、ユーザーが使う言葉で話す
3. CTA1つの法則: 1スクロールに1CTAのみ。優先順位を決める
4. デザイントークン先行: パープルグラデ・巨大シャドウを避け、基礎を整える
5. 細部がすべて: ホバー、アライメント、画像スタイルの統一が信頼感を作る

次のステップ

• 自社LPで上記チェックリストを実施する
• サービスを知らない友人にヒーローセクションを5秒だけ見せて「3つの質問」をテストする
• CTAを1つに絞り込んでA/Bテストを実施する

関連記事

参考リソース

• Design Review（YouTube動画）
• Cursor公式サイト

本記事はネクサフローのAI研究シリーズの一部です。