claude-landing-composer

Claude Landing Composer

AI が作成したランディングページは、ひと目でそれとわかるものがほとんどです。中央揃えのヒーロー、3 つの機能カード、グラデーション、ありきたりなコピー。人が書いたように見えるページを作るために、エディトリアルなレイアウト、実際のデザイントークン、意図を持たせたモーション、そして人の言葉らしいコピーを用います。

claude-design-system-architect によるデザインシステムがある場合は、それを基盤にしてください。公開前に、完成したページを claude-design-critic でレビューしてください。

ステップ 1 — ページを計画する

• 目標と 1 つのアクション — ページを通じて訪問者に何をしてもらうのかを決めます。
• 対象者 — icp-deep-scanner が利用できる場合は、そこから購入者ペルソナを取得し、実際の読者に語りかけるコピーにします。
• セクション — 目標達成に必要な最小限の構成を選びます（ヒーロー → 実績 → 方法／理由 → 懸念への対応 → 料金 → CTA）。訪問者の次の行動につながらないものは削除します。
• トークン — デザインシステムを読み込みます。まだない場合は、まず生成してください（claude-design-system-architect）。色やサイズを場当たり的にハードコードしないでください。

技術スタックと基本ルール

Next.js（App Router）+ React + TypeScript + Tailwind v4 + Motion（旧 Framer Motion）を標準の技術スタックとします。紫色は禁止。絵文字は禁止 — Lucide／Heroicons を使用します。暖色系／アースカラーや暗い背景色は歓迎です。モーションは必須です — タイプライター、アニメーション付きカウンター、スプリング／スタッガー表示などを、控えめに使います。

ステップ 2 — セクションごとに組み立てる

各セクションをトークンを使った実際のコンポーネントとして作成します。それぞれについて、レイアウト、コンテンツ、モーションを意図的に決めてください。

• ヒーロー — 鋭い見出し（「{Product} へようこそ」ではなく）、実際の価値を伝える補足文、主要な CTA を 1 つ。ありきたりな中央揃えの縦積みより、非対称またはエディトリアルなレイアウトを検討します。
• 実績 — ロゴ、実際の指標、または具体的な成果を示します。「何千人もの信頼を獲得」といった表現は避けます。
• 機能／理由 — 価値を具体的な状況の中で示します。本当に適している場合を除き、同じカードを 3 つ並べる定型パターンは避けます。セクションごとにリズムや配置を変えます。
• 懸念への対応／FAQ — 見込み客が実際に抱くためらいに答えます。
• 料金（必要な場合）— 明快で、自信があり、価値に見合った内容にします。
• CTA — アクションを 1 つに絞り、あらためて提示します。

モーション： スクロール時に要素を表示します。ただし、表示方法には変化をつけてください。すべてのブロックを同じフェードアップにしないでください。prefers-reduced-motion を尊重します。モーションは重要な要素に目を向けさせるためのものであり、すべてを同じように飾り立てるものではありません。

ステップ 3 — AI らしくないコピーを書く

• AI らしさが出る表現を削ります。「elevate」「unlock」「seamless」「変化の激しい現代社会において」「嬉しく思います」のような表現、ダッシュの多用、3 つ並べる表現の多用を避けます。
• 具体的な表現は、ありきたりな表現に勝ります。自信のある言い切りは、曖昧な表現に勝ります。短い表現は、冗長な表現に勝ります。
• ユーザーの声に合わせます。率直に、企業的な無駄を省きます。
• 実際に使えるマイクロコピー（ボタン、空の状態、キャプション）を書きます。どこもかしこも「詳細を見る」にしないでください。

ステップ 4 — 実際に動くものを作る

コンポーネントを記述し、トークンを適用し、レスポンシブ（モバイルファーストで、実用的なブレークポイント）かつアクセシブル（セマンティック HTML、フォーカス状態、代替テキスト、AA コントラスト）にします。動作すると伝える前に、開発サーバーを起動するかビルドを実行し、コンパイルできることを確認します。

ステップ 5 — 批評レビュー（必須）

claude-design-critic（または AI らしさを排除するフロントエンドレビュー）を使って成果物をレビューし、デザインとコピーの両方から、生成されたように見えるパターンを残らず取り除きます。その後、ファイルパスと、採用した方針についての短い説明を添えて納品します。

公開前に適用する「生成っぽさ排除」チェックリスト

• セクションごとにレイアウトを変えます。すべてのセクションを中央揃えの縦積みにしません。
• 余白はたっぷりと意図的に取ります。均一にしません。
• 自信のあるアクセントカラーを 1 色に絞ります。虹色のグラデーションは使わず、デフォルトの紫色も使いません。
• 見出しは具体的で、人間らしいものにします。中身のない価値訴求は避けます。
• モーションに変化を持たせ、控えめに使います。モーション軽減設定を尊重します。
• 絵文字ではなくアイコンを使います。実際のマイクロコピーを書き、「詳細を見る」を 5 回も使いません。

ガードレールのまとめ

実際のトークンを基盤にし、場当たり的な値は使わない · レスポンシブ + アクセシブル + AA コントラスト · 紫色禁止／絵文字禁止 · 完了と伝える前にコンパイル／実行する · 仕上げに必ず AI らしさを取り除く批評レビューを行う。