Codex 用 Android Material 3 への移植プロンプト

iOS アプリの画面を、トップアプリバー、ナビゲーションバー、FAB を使った Material 3 の Android 版に、ブランドカラーと書体はそのままで移植します。

[ホーム] 画面を、Material 3 の慣習に沿って Android 向けにしてください。トップアプリバー、ナビゲーションバー、そして合うなら [セッションを始める] ためのフローティングアクションボタンを使ってください。ブランドカラーと書体はそのままにしてください。iOS 版から変わった点を挙げてください。

対応モデル

Codex, ChatGPT

収録セット

モバイルアプリ

このプロンプトについて

Codex は既存の iOS 画面を、Material 3 のパターンで作り直します。トップアプリバー、iOS のタブバーの代わりのナビゲーションバー、画面に合うならメインのアクションのためのフローティングアクションボタンです。ブランドカラーと書体はそのままで、iOS 版からのすべての変更を Codex が一覧にします。

画面と、フローティングボタンになりうるアクションを指定してください。プロンプトの「合うなら」は意図的です。FAB が向くのは、セッションを始めるような頻繁に行う単一のアクションで、主な役割が読むことの画面には向きません。Codex が iPhone の寸法のままにしたら、一般的な Android スマートフォンの 412×915 を求めてください。逆方向にするには、Android と Material 3 を iOS と Apple の Human Interface Guidelines に置き換えます。

変更点の一覧は、この 1 画面にとどまらず役立ちます。ほかの画面を移植する際の実質的なルールブックになるからです。まずホーム画面でプロンプトを実行して一覧を確認し、そのあと、Android と iOS の違いが最も大きい設定画面で再利用しましょう。

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

• Codex 用モバイルアプリのモックアップを SwiftUI コードにするプロンプト承認済みの HTML の画面を、レイアウトと余白を合わせ、テーマの色を使い、Dynamic Type に対応した SwiftUI アプリとして Codex に実装させます。
• Codex 用モバイルアプリのブリーフと画面リストのプロンプトアプリのユーザー、中心となるループ、プラットフォームを伝え、最初のバージョンの全画面を、グループと各画面の目的付きで Codex にリストアップさせます。
• Codex 用アプリのオンボーディングの流れのデザインプロンプトウェルカム、目標の選択、最初のホームの 3 画面を 390×844 でつなげ、CSS のイラストを使った 1 つの統一スタイルでデザインします。
• Codex 用モバイルアプリのホーム画面のデザインプロンプト最も重要な要素を 1 つ指定し、それを中心に、タブバーと実際の統計を備えた、戻ってきたユーザー向けのホーム画面をデザインします。
• Codex 用リスト画面と詳細画面のデザインプロンプト検索欄とフィルターチップ付きのリスト画面と、そこから開く詳細画面を、本物らしいタイトルと数字で 2 つのファイルにデザインします。
• Codex 用アプリの設定画面のデザインプロンプト標準的なグループ化されたリスト、各行の現在の値、適所のトグル、赤で示す破壊的な操作を備えた設定画面をデザインします。