ランディングページの機能セクションを具体的に書き直すプロンプト

ランディングページの機能セクションを、具体的な見出しと数字、アイコンではなく小さな HTML ビジュアルを備えた内容に書き直します。

機能セクションを書き直してください。各機能には、ユーザーが何を得られるかを伝える具体的な見出し、具体的な情報か数字を含む 1 文、そしてその機能が使われている様子を HTML で描いた小さな UI のビジュアルが必要です。色付きの丸の中のアイコンや、ひと言だけの見出しは使わないでください。

対応モデル

Codex, ChatGPT

収録セット

ランディングページ

このプロンプトについて

Codex がすでに作ったページに対する修正用プロンプトで、書き直すのは機能セクションだけです。各機能には、ユーザーが何を得られるかを述べた見出し、具体的な情報か数字を含む 1 文、その機能が使われている様子を示す HTML の小さなインターフェースの図が付きます。末尾の 2 つの禁止事項、色付きの丸の中のアイコンと 1 語だけの見出しは、AI が作ったページをどれも似て見せてしまうパターンを封じるものです。

このプロンプトには角かっこがありません。具体的な内容はブリーフから引き継がれます。Codex が「素早い入金」のような見出しを書いたら、実際の数字で押し返しましょう。「入金が平均 9 日早くなる」といった具合です。ビジュアルは、抽象的なグラフよりも、督促メール、入力済みの請求書の行、ステータスバッジのほうが向いています。訪問者がプロダクトの中でその機能がどう見えるかをすぐに理解できるからです。

それでもありきたりに見えるときは、機能を 1 つずつ依頼し、実際の数字や実画面のスクリーンショットを Codex に渡します。修正のたびに「ほかはすべてそのまま」と添えると、このセクションを作業している間にヒーローや料金がずれません。

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

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