Codex 用モバイルアプリのホーム画面のデザインプロンプト

最も重要な要素を 1 つ指定し、それを中心に、タブバーと実際の統計を備えた、戻ってきたユーザー向けのホーム画面をデザインします。

連続記録 [12] 日目の、戻ってきたユーザー向けのホーム画面をデザインしてください。最も重要な要素は [1 日の目標に対する今日の進捗] で、最初に目に入るようにしてください。その下に [ページの進捗付きの、今読んでいる本]、[読書セッションを始める] ためのプライマリボタン、[今週の統計] を置いてください。[今日、ライブラリ、統計、プロフィール] の下部タブバーも入れてください。

対応モデル

Codex, ChatGPT

収録セット

モバイルアプリ

このプロンプトについて

Codex は、戻ってきたユーザーが目にするホーム画面をデザインします。例では読書の連続記録 12 日目です。プロンプトは要素を 1 つ、つまり目標に対する今日の進捗を指定し、それが最初に目に入るようにと求めたうえで、残りをその下に順番に置きます。今読んでいる本、メインのアクション、今週の統計、そして下部の 4 つのタブのタブバーです。

各角かっこを、自分のアプリに当たるものに置き換えてください。戻ってきたユーザーを決める日数や状態、最も重要な要素、その下の内容、プライマリアクション、タブの名前です。最も重要な要素を 1 つ指定するという指示は残しましょう。これがないと、ホーム画面は同じ重みのカードを並べたグリッドになりがちです。

プライマリボタンは、画面の下半分の親指が届く位置に置き、タブバーが窮屈にならないか確認してください。この画面は、続くリスト、設定、各状態の画面の型になるので、次に進む前に 1、2 回は磨く価値があります。

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

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