Codex 用料金セクションのデザインプロンプト

プランの一覧、目立つおすすめプラン、月払い／年払いの切り替え、最大の懸念への 1 行の回答を備えた料金セクションをデザインします。

[Free、月額 $12 の Pro、月額 $29 の Studio] で料金セクションをデザインしてください。[Pro] をおすすめプランとして目立たせてください。各プランの機能は最大 5 つまでとし、プラン間で違う点から先に書いてください。年払いの割引額がわかる月払い／年払いの切り替えを付け、カードの下に、最もよくある不安への答えを 1 行添えてください：[いつでも解約できますか？]。

対応モデル

Codex, ChatGPT

収録セット

ランディングページ

このプロンプトについて

Codex がページの料金ブロックをデザインします。プランごとに 1 枚のカードで機能は最大 5 つまで、おすすめプランは視覚的に目立たせ、年払いでどれだけ得になるかを示す月払い／年払いの切り替えを付け、カードの下には購入者がいちばんよく尋ねる質問への答えを 1 行で添えます。

1 つ目の角かっこには実際のプラン名と価格を、2 つ目には多くの人に選んでほしいプランを入れます。最後の懸念には、実際に出る疑問を使ってください。サブスクリプションなら「いつでも解約できますか？」が定番ですが、B2B ツールなら「契約期間の縛りはありますか？」や「席数ごとの課金ですか？」が合うかもしれません。各プランの一覧で違う点を先に書くよう指示しておくと、Codex がすべてのカードに「請求書無制限」を繰り返さず、プランの違いが見分けやすくなります。

次に進む前に、切り替えの計算を確認しましょう。年払いで 2 か月分無料になるなら、Codex が表示する割引額もそれに合っているはずです。もっともらしい価格を入れると、3 桁の価格が折り返す、プラン名がカードに収まらないといったレイアウトの問題も早い段階で見つかります。

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

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