Codex 用アプリのオンボーディングの流れのデザインプロンプト

ウェルカム、目標の選択、最初のホームの 3 画面を 390×844 でつなげ、CSS のイラストを使った 1 つの統一スタイルでデザインします。

オンボーディングの流れを、ウェルカム、1 日の目標の選択、最初のホーム画面の 3 画面でデザインしてください。各画面は 390×844、CSS はインライン、フォントはシステムフォントの、自己完結した HTML ファイルにしてください。3 画面すべてで一貫したスタイルを使ってください：[温かいクリーム色の背景、アクションには深い緑、コーラルのアクセント 1 色、見出しは明朝体（セリフ体）]。目標の選択画面には進捗インジケーターを表示し、イラストは CSS で描いてください。

対応モデル

Codex, ChatGPT

収録セット

モバイルアプリ

このプロンプトについて

Codex は iPhone サイズの別々の HTML ファイルとして 3 画面をデザインします。ウェルカム画面、進捗インジケーター付きで 1 日の目標を選ぶ画面、そして新規ユーザーが最初にたどり着くホーム画面です。まとめて依頼すると、各画面が勝手に独自のスタイルを作るのではなく、色、書体、余白のセットを共有します。

角かっこのスタイルの行は、ビジュアルの方向性を 1 文にしたものです。背景、アクションの色、アクセント 1 色、見出しの書体を書きます。色は少なくして、役割で名付けましょう。「アクションにはディープグリーン」と書けば Codex は色の使いどころがわかりますが、16 進カラーコードを 5 つ並べても伝わりません。オンボーディングで目標ではなく、興味のある分野や通知の許可を尋ねる場合は、中央の画面の名前をそれに合わせて変えてください。

3 つのファイルは、新規ユーザーが出会う順番で読んでください。Codex Design のキャンバスでは左から右に並ぶため、スタイルの急な変化や、まったく進まない進捗インジケーターに気づきやすくなります。流れはここで固めましょう。次のプロンプトでは、3 画面目の、戻ってきたユーザー向けのバージョンをデザインするからです。

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

• Codex 用モバイルアプリのホーム画面のデザインプロンプト最も重要な要素を 1 つ指定し、それを中心に、タブバーと実際の統計を備えた、戻ってきたユーザー向けのホーム画面をデザインします。
• Codex 用リスト画面と詳細画面のデザインプロンプト検索欄とフィルターチップ付きのリスト画面と、そこから開く詳細画面を、本物らしいタイトルと数字で 2 つのファイルにデザインします。
• Codex 用アプリの設定画面のデザインプロンプト標準的なグループ化されたリスト、各行の現在の値、適所のトグル、赤で示す破壊的な操作を備えた設定画面をデザインします。
• Codex 用の空・読み込み中・エラー状態のデザインプロンプトアプリ画面の空、読み込み中、エラーの状態を、通常の状態と同じナビゲーションとヘッダーで、別々のファイルにデザインします。
• Codex 用アプリのダークモードのデザインプロンプト色味のある暗い背景、抑えたアクセント、WCAG AA の文字コントラストで画面のダークモード版を作り、変更した色の一覧も出します。
• Codex 用 Android Material 3 への移植プロンプトiOS アプリの画面を、トップアプリバー、ナビゲーションバー、FAB を使った Material 3 の Android 版に、ブランドカラーと書体はそのままで移植します。