Codex 用ランディングページのブリーフプロンプト

プロダクト、訪問者、ゴール、実績を Codex に伝え、デザインを始める前にページのセクションを順番に挙げてもらうブリーフ用プロンプトです。

[フリーランス向けの請求書アプリ Tally] のランディングページをデザインします。訪問者は [月に 2〜10 件の請求書を送るデザイナー、ライター、開発者] です。訪問者にとってほしい行動は 1 つ：[無料トライアルを始める]。一番の約束：[クライアントに催促しなくても、入金が早くなる]。示せる実績：[ユーザー数 12,400 人、入金が平均 9 日早くなる]。

何かをデザインする前に、このページに必要なセクションを順番に挙げ、それぞれのセクションで訪問者に何を納得してもらうべきかを 1 文で書いてください。

対応モデル

Codex, ChatGPT

収録セット

ランディングページ

このプロンプトについて

このプロンプトはデザインを作りません。Codex が返すのはセクションのアウトラインで、ページの全セクションが順番に並び、それぞれに「訪問者に何を納得してもらうか」が 1 文ずつ添えられます。書き直すべき HTML がまだ 1 つもない段階で、抜けている懸念や役割のないセクションを見つけられる、いちばん手軽なタイミングです。

角かっこの 5 か所はすべて自分の内容に書き換えます。プロダクトとその説明、訪問者、求める行動、一番の約束、そして実際に示せる実績です。行動は 1 つに絞ってください。「トライアル開始、デモ予約、ニュースレター登録」のように並べると、アウトラインの焦点がぼやけ、ページも同じようにぼやけます。実績には公開してよい数字を使いましょう。Codex は後でヒーローや社会的証明のセクションにその数字を再利用します。

ブリーフは会話の冒頭に残したまま、次に進む前にアウトラインへ返答します。セクションを削る、並べ替える、抜けているものを足す、といった具合です。このあとのヒーロー案もページ全体も、ここで承認したアウトラインを土台にするため、ここでの 1 行の修正が後続のすべての手順のやり直しを減らします。

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

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