yc-web-design-strategy

Webデザイン戦略

Webサイトが適切なメッセージを、適切なオーディエンスに、適切な順序で伝えられるようにする、戦略的デザインコンサルタントのスキルです。見た目の美しさを考える前に、伝えるべきことを明確にします。

このスキルは、新しいサイトの構築、既存サイトのレビュー、ランディングページのコピー作成、よくある問題を見つけるためのページ監査に活用できます。詳細な監査や複数セクションで構成されるページの構築を行う際は、全チェックリストが記載された references/detailed-guidelines.md をご覧ください。

基本原則

デザイン戦略は、ビジュアルの実装よりも先に行います。間違ったメッセージを、間違ったオーディエンスに、間違った順序で伝える美しいサイトは、メッセージが明確な質素なサイトに必ず負けます。まず戦略を固め、その後に美しさを重ねます（構築時のビジュアル実装には frontend-design スキルを使用します）。

---

1. 段階に応じたデザイン

コピーやコードを一行でも書く前に、企業がライフサイクルのどの段階にあるかを特定します。これによって、レイアウトの複雑さ、スクリーンショットの忠実度、CTA の戦略、ページの深さなど、すべてが決まります。

段階	デザインアプローチ	主な指標
ローンチ前／初期	期待感を高めます。色あせたスクリーンショットやスタイライズされたスクリーンショットを使用します。ウェイトリストやメールアドレスを収集します。1日で構築できる単一ページにします。シンプルで、焦点を絞ったメッセージを伝えます。	公開中のプロダクトがない、小規模なチーム、収益化前
成長期	ブランド認知を高めます。特徴的なアクセントカラー、詳細な機能の説明、高解像度のプロダクトスクリーンショット、複数の CTA を使用します。	プロダクトが稼働中、アクティブユーザーがいる、PMF に向けて改善を続けている
成熟期	情報を充実させます。プロダクトのサブセクション、ロードマップ、セキュリティ／コンプライアンスのページ、エンタープライズ向けプランを用意します。抑制の効いた、信頼感のある配色にします。	市場での確固たる地位、エンタープライズとの取引

ローンチ前の段階で成熟企業の洗練された見た目を模倣すると、信頼の欠如につながります。実現できない完成度を約束することになるためです。逆に、成熟したプロダクトのサイトがウェイトリストだけの単一ページだと、放置されている印象を与えます。

---

2. 5秒のフィルター

すべてのランディングページは、訪問から5秒以内に次の4つの質問に答えなければなりません。

1. 何ですか？ — 平易で具体的な言葉を使います。「シナジープラットフォーム」ではなく、「チャットアプリ」と表現します。
2. 誰のためのものですか？ — 対象となるオーディエンスを明示します。「チーム向け」より「技術系プロジェクトマネージャー向け」のほうが効果的です。
3. どんな目的を果たしますか？ — すぐに得られるメリットや成果を示します。
4. なぜ気にかけるべきですか？ — 現状より優れている点を説明します。

スタートアップに曖昧なスローガンを掲げる余裕はありません。価値の高いフィルターとして、具体的な専門用語を使いましょう。「Issue Tracking」はエンジニアを引きつけ、対象に合わない人をふるい分けます。「仕事が生まれる場所」のような表現を使う権利を得られるのは、非常に大規模で確立されたプラットフォームだけです。

明瞭さのピラミッド

緊急度が高い順に、ホームページのコンテンツを構成します。

1. 頂点 — 専門用語を適切に使った、鋭い価値提案（ヒーローセクション）
2. 広がる文脈 — ユーザーがスクロールするにつれて、ビジュアルによる根拠を伴う機能の説明を提示します
3. 機能の詳細 — 技術ドキュメント、二次的なユースケース、価格、セキュリティ（成熟したプロダクトでは別ページにします）

---

3. 「AI スロップ」パターンを避ける

独自性は、製品の品質を推し量る指標です。サイトがありきたりな LLM の出力のように見えると、ユーザーは製品も同じだと思います。次のようなパターンを見つけて排除してください。

見た目に関するスロップの兆候：

• 紫色のグラデーションとデフォルトのドロップシャドウ（「AI が作った」と思わせる最大の要因）
• ありきたりなベントーボックスのグリッド（3×2 の配置にシンプルなアイコンを並べただけで、製品との関連がない）
• 原色（赤／黄／緑／青）の吹き出しが付いた、Google 風の偽ダッシュボード
• 製品の実態を示すものがない、浮遊するキューブ、抽象的な 3D 図形、ありきたりなヒーロー画像

細部の不備（「仕上がり」の層）：

• 余白の不統一、見出し内の二重スペース、不要な句点
• スクリーンショットに表示されている、ハードコードされたタイムスタンプや仮のデータ
• 「スタイルのごった煮」— 5 種類以上のフォント表現を混在させ、視覚的な階層を壊す
• コントラストの低いテキスト（明るい背景に明るい文字、白地に黄色の文字）
• 小さすぎるロゴや、不自然なサイズのロゴ

コピーに関するスロップの兆候：

• お客様の声のすべての単語を大文字で始める（「AI が生成した」と一目でわかります）
• 「素晴らしいツール！」のような曖昧な社会的証明。「手作業の QA を 500 時間削減」のように具体的にしてください
• 定義されていない社内用語（ユーザーが「Deep Eval」や「MCP」の意味を知っているとは限りません）

---

4. インタラクションデザインのルール

アニメーションやインタラクションはナビゲーションを助けるものであり、価値提案の妨げになってはいけません。

推奨事項：

• 動きを使って主要な CTA に注目を集める
• クリック可能であることを示す、控えめなホバー時の色の変化や発光
• 自然に感じられる、スクロールに応じて表示される要素

避けること：

• スクロールジャック（時間制御されたアニメーションで、ブラウザー標準のスクロールを乗っ取ること）
• 背景アニメーションをループさせること（流星、ちらつくカード、絶え間ない動き）
• 情報をホバー時の表示に隠すこと（モバイルでは機能せず、デスクトップでは情報を「探し回る」必要が生じます）
• ヒーローに「リンクの寄せ集め」を作ること — Discord、GitHub、Twitter、Docs へのリンクを同時に並べること

---

5. コンバージョンの最適化

あらゆる障壁が離脱のきっかけになります。訪問から「なるほど」と感じる瞬間までの摩擦を最小限に抑えてください。

• デモのパラドックス：「デモを予約」ボタンは、20 分の時間を確保するよう求めます。まずは気軽に試せるものを提供しましょう — ブラウザー内で試せるプロンプト、インタラクティブなサンドボックス、短い製品動画などです。
• CTA の徹底：スクロール区間ごとに、明確な目標を 1 つ設定します。競合する CTA を重ねないでください。
• 社会的証明の基準：実名、実際の役職、実在する企業のロゴ（見やすさのため白黒）。一般的な称賛より、具体的な成果を示してください。

---

6. このスキルの適用

新しいページを作成する場合：

1. 会社のライフサイクル段階を確認する（または判断する）
2. 5 秒フィルターを通過するコピーを作成する
3. 明確さのピラミッドを使って情報アーキテクチャを設計する
4. ページを作成する（ビジュアル面の実装には frontend-design を使用する）
5. スロップチェックリストと references/detailed-guidelines.md の仕上がりに関する項目に照らして、成果物を監査する

既存のページをレビュー／批評する場合：

1. references/detailed-guidelines.md を読み、監査チェックリスト全体を確認する
2. まず、ライフサイクル段階に適しているかを評価する
3. 5 秒フィルターを実施する
4. AI スロップのパターンを確認する
5. インタラクションデザインとコンバージョンの流れを監査する
6. 深刻度ごとに整理し、具体的で実行可能なフィードバックを提供する

ヒーローコピーや CTA を作成する場合：

1. ターゲットオーディエンスと、その人たちが使う言葉を特定する
2. 5 秒フィルターを執筆上の制約として使う
3. 広範なスローガンより、具体的な専門用語を優先する
4. あらゆる主張を視覚的な証拠（スクリーンショット、デモ、指標）で裏付ける