Codex 用ヒーローセクションの 3 方向デザインプロンプト

エディトリアル、ダーク、ソフトの 3 つのヒーローを 1440×900 で Codex に依頼します。コピーは同一なので、見た目の違いだけを比べられます。

ヒーローセクションを 3 つの方向性でデザインしてください。それぞれ 1440×900、CSS はインライン、フォントはシステムフォントの、自己完結した HTML ファイルにしてください。
A — 温かくエディトリアル、見出しは明朝体（セリフ体）
B — 大胆でダーク、明るいアクセントカラー 1 色と大きな数字
C — やわらかく親しみやすい、角丸のカードと淡いグラデーション
見出し、サブ見出し、CTA は 3 案とも同じにしてください。プロダクトのビジュアルは HTML と CSS で描き、外部画像は使わないでください。

対応モデル

Codex, ChatGPT

収録セット

ランディングページ

このプロンプトについて

Codex は方向性ごとに自己完結した HTML ファイルを 3 つ書きます。A は明朝体（セリフ体）の見出しで温かくエディトリアル、B は明るいアクセント 1 色と大きな数字のダーク、C は丸みのあるカードと淡いグラデーションのソフトな雰囲気です。見出し、サブ見出し、ボタンは 3 つとも同じなので、変わるのはビジュアルのアプローチだけ。この段階で決めたいのはまさにそこです。

書き換えるのは 3 行のスタイル指定です。ブランドの性格上ダークなページが合わない場合は、明るいバリエーションをもう 1 つ作るのではなく、情報量の多いデータ重視のレイアウトなど、本当に違うものに B を差し替えてください。1440×900 というサイズと外部画像を使わないというルールは残しましょう。HTML と CSS で描いたプロダクトのビジュアルは編集しやすく、ファイルを移動しても壊れません。

方向性は、ブラウザのタブを 1 つずつ開くのではなく、まとめて見比べて判断します。Codex Design のキャンバスでは、3 つのファイルがライブ HTML として並ぶため、情報の階層や密度の違いが一目でわかります。選んだ記号、または組み合わせたい部分をメモしておきましょう。次のページ全体のプロンプトは、方向性を記号で指定するからです。

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

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