ウェブデザイン戦略
戦略的デザインコンサルタントスキル。ウェブサイトが、見た目の美しさを気にする前に、正しいメッセージを正しい対象に、正しい順序で伝えることを保証します。
このスキルは、新しいサイトの構築、既存サイトのレビュー、ランディングページのコピー作成、よくある失敗の監査に適用できます。詳細な監査や複数セクションにわたるページ構築を行う場合は、references/detailed-guidelines.md にある完全なチェックリストを参照してください。
核となる原則
デザイン戦略はビジュアルの実行に先行します。間違ったメッセージを間違った対象に間違った順序で伝える美しいサイトは、メッセージが明確な質素なサイトに常に敗北します。戦略を先導し、その後で美学を重ねます（ビジュアル実行には frontend-design スキルを使用）。
1. 段階認識型デザイン
コピーやコードを一行も書く前に、企業がライフサイクルのどの段階にいるかを特定します。これによって、レイアウトの複雑さ、スクリーンショットの忠実度、CTA戦略、ページの深さなど、すべてが決まります。
| 段階 | デザインアプローチ | 主要なシグナル |
|---|---|---|
| プレローンチ / 初期 | ミステリーを構築。フェードまたはスタイライズされたスクリーンショット。ウェイトリスト/メールキャプチャ。シングルページ、1日で構築可能。シンプルで焦点を絞ったメッセージ。 | 公開製品なし、少人数チーム、プレレベニュー |
| 成長 | ブランド認知。特徴的なアクセントカラー、詳細な機能説明、高解像度の製品スクリーンショット、複数のCTA。 | 製品稼働中、アクティブユーザー、PMFに向けて反復中 |
| 成熟 | 情報の深さ。製品サブセクション、ロードマップ、セキュリティ/コンプライアンスページ、エンタープライズ層。抑制された権威あるパレット。 | 確立された市場プレゼンス、エンタープライズ案件 |
プレローンチ段階で成熟企業の洗練を模倣すると、提供できない完全性を約束することになり、信頼の不足を生みます。逆に、成熟製品がシングルページのウェイトリストサイトを持つことは、放置を示します。
2. 5秒フィルター
すべてのランディングページは、到着後5秒以内にこれら4つの質問に答えなければなりません。
- それは何か？ — 平易で具体的な言葉を使う。「シナジープラットフォーム」ではなく「チャットアプリ」。
- 誰のためのものか？ — 対象を明示する。「チーム向け」ではなく「テクニカルプロジェクトマネージャー向け」。
- 何のために？ — 即時の利益や成果を述べる。
- なぜ気にするべきか？ — 現状より何が優れているのか？
スタートアップは曖昧なスローガンを許容できません。具体的な専門用語を高価値フィルターとして使用します — 「Issue Tracking」はエンジニアを引き寄せ、非適合者をふるい落とします。大規模で確立されたプラットフォームだけが、「ここで仕事が行われる」のようなことを言う権利を得ます。
明確さのピラミッド
ホームページのコンテンツを緊急性の高い順に構造化します。
- 頂点 — 鋭く、専門用語に沿った価値提案（ヒーローセクション）
- コンテキストの拡大 — ユーザーがスクロールするにつれて視覚的証拠を伴う機能ストーリー
- 機能の深さ — テクニカルドキュメント、セカンダリユースケース、価格、セキュリティ（成熟製品では別ページ）
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. このスキルの適用
新しいページを構築する場合:
- 企業のライフサイクル段階を尋ねる（または判断する）
- 5秒フィルターを通過するコピーをドラフトする
- 明確さのピラミッドを使用して情報アーキテクチャを計画する
- ページを構築する（ビジュアル実行には
frontend-designを使用） references/detailed-guidelines.mdのスロップチェックリストとフィット＆フィニッシュ項目に対して結果を監査する
既存ページをレビュー/批評する場合:
- 完全な監査チェックリストのために
references/detailed-guidelines.mdを読む - まず段階適合性を評価する
- 5秒フィルターを実行する
- AIスロップパターンをチェックする
- インタラクションデザインとコンバージョンフローを監査する
- 重大度ごとに整理された、具体的で実行可能なフィードバックを提供する
ヒーローコピーやCTAを書く場合:
- ターゲットオーディエンスとその言語を特定する
- 5秒フィルターをライティングの制約として使用する
- 広範なスローガンよりも具体的な専門用語を優先する
- すべての主張を視覚的証拠（スクリーンショット、デモ、メトリクス）で裏付ける