Codex 用ランディングページのモバイル確認プロンプト

CTA がファーストビューに収まり、タップ領域が 44px 以上の幅 390px 版を Codex に作らせ、削った要素の一覧も出してもらいます。

このページの幅 390px 版を、別のファイルとして作ってください。セクションは自然な順番で縦に並べ、最初の画面ではスクロールせずに CTA が見えるようにし、タップできる要素はすべて高さ 44px 以上にしてください。デスクトップ版から削った要素や簡略化した要素と、その理由も教えてください。

対応モデル

Codex, ChatGPT

収録セット

ランディングページ

このプロンプトについて

Codex がページの幅 390px 版を別ファイルで作り、スマートフォン向けにセクションを縦に組み直します。最初の画面ではスクロールせずに CTA が見え、タップできる要素はすべて高さ 44px 以上になります。デスクトップ版から削った要素や簡略化した要素を理由付きで挙げた一覧も出てきて、読む価値がいちばん高いのはこの一覧です。

一覧には設計上の判断が隠れています。3 列の機能グリッドが長いスクロールになった、ロゴの帯が 4 つに減った、料金の切り替えが収まらなくなった、などです。ファイルをそのまま受け取らず、項目ごとに採用、却下、手直しを決めてください。訪問者の多くが Android なら、390px を一般的な Android の幅である 412px に変えます。

デスクトップのレイアウトを仕上げる前に実行しましょう。後ではなく先にです。スマートフォンで成り立たないデスクトップの要素は、早く見つけるほうが得です。モバイル版は別ファイルなので、どの変更を持ち帰るか決めるまでデスクトップのページには手が入りません。

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

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