Codex 用ランディングページ全体のデザインプロンプト

選んだヒーローの方向性を、8 つのセクションを決まった順番で名指しして、ページ全体に広げます。Codex に余計な部分を足させません。

方向性 [B] を、幅 1440px の HTML ファイル 1 つで、ランディングページ全体に広げてください。セクションは順番に、ヒーロー、ロゴの帯、それぞれに小さなプロダクトのビジュアルを添えた 3 つの主な機能、3 ステップの使い方、名前と役職付きの顧客の声 2 件、料金、5 つの質問の FAQ、締めくくりの CTA です。ヒーローは今のまま変えないでください。

対応モデル

Codex, ChatGPT

収録セット

ランディングページ

このプロンプトについて

Codex は選んだヒーローをそのままに、残りのページを幅 1440px の HTML ファイル 1 つにまとめます。ロゴの帯、小さなプロダクトのビジュアルを添えた 3 つの機能、3 ステップの使い方、名前と役職付きの顧客の声 2 件、料金、5 つの質問の FAQ、締めくくりの行動喚起です。ヒーローは手を加えずに使う前提なので、承認済みのデザインからページが育ち、一からデザインし直すことにはなりません。

[B] を、選んだ方向性の記号に変えてください。そのうえでセクションの一覧を、ブリーフに対して Codex が返したアウトラインに合わせて編集します。アウトラインに比較表や連携のセクションがあれば、同じ位置でここにも書きましょう。全セクションを名指しすることが、エージェントが曖昧なアイコンを 3 つ並べた「選ばれる理由」ブロックを勝手に作るのを防ぎます。

最初の出力では、ページの中ほどが粗いのは想定内です。このセットの次のプロンプトで、まず機能、次に料金と、セクションごとに作り込んでいきます。長い修正依頼で一度にすべてを直す必要はありません。

同じセットのほかのプロンプト

• ランディングページの機能セクションを具体的に書き直すプロンプトランディングページの機能セクションを、具体的な見出しと数字、アイコンではなく小さな HTML ビジュアルを備えた内容に書き直します。
• Codex 用料金セクションのデザインプロンプトプランの一覧、目立つおすすめプラン、月払い／年払いの切り替え、最大の懸念への 1 行の回答を備えた料金セクションをデザインします。
• Codex 用ランディングページのモバイル確認プロンプトCTA がファーストビューに収まり、タップ領域が 44px 以上の幅 390px 版を Codex に作らせ、削った要素の一覧も出してもらいます。
• AI 製ランディングページのありきたりさを減らすプロンプト何でも中央揃えやあいまいなコピーなど、AI 生成っぽく見える要素を Codex に洗い出させ、目立つ 5 つの問題を直させるレビュー用プロンプトです。
• Codex 用 HTML のランディングページを本番コードにするプロンプト承認済みの HTML ランディングページを、Next.js と Tailwind など実際のスタックで、自社のコンポーネントを使い、コピーはそのまま作り直します。
• Codex 用ランディングページのブリーフプロンプトプロダクト、訪問者、ゴール、実績を Codex に伝え、デザインを始める前にページのセクションを順番に挙げてもらうブリーフ用プロンプトです。