モバイルアプリの複数画面UIデザイン：390×844のビューポート、screens.htmlでの並列レビュー、ジェスチャーと状態
開発者がAIにモバイルアプリのUIを依頼すると、デスクトップWebページを狭い枠に無理に押し込んだような結果になることがよくあります。文字が小さく、ボタンは上に寄り、一つの画面に4つも5つものカード型モジュールが詰め込まれます。本当のモバイルアプリ設計は390×844（またはウェアラブル専用のサイズ）から始め、1画面を1つの主操作に絞り、複数画面ページscreens.htmlでタスク全体のつながりを一度に確認する必要があります。
重要なポイント
- 390×844のモバイルビューポートを基準に設計し、使用頻度の高い操作は片手の親指で届く範囲に置きます。デスクトップの多列カードを1列の長いページに押し込まないようにします。
- 「操作できる単一ページのindex.html＋複数画面を並べたscreens.html」の2つを成果物にし、リスト、詳細、操作完了までの3～5画面のつながりを一目で確認します。
- モバイルの肝は状態変化と触覚的なフィードバックです。潮汐タイムラインのドラッグ、カプセルトイのつまみを回す操作、走行中の配車目的地の変更などが例になります。
- ウェアラブルと車載画面では物理環境の制約を厳守します。水泳用ウォッチでは198×242の黒背景に高コントラストの大きな数字で往復数を表示し、車載画面では1920×720の大きなボタンで視線を逸らさず操作できるようにします。
npx skills add oil-oil/oil-ui/ja/inspiration/mobile-app-design/ では、30以上の複数画面モバイルアプリのデモとプロンプトを見られます。
モバイルアプリを「幅を狭めたWebページ」として扱えない理由
Webページでは、幅の広い画面でナビゲーション、サイドバー、本文カードを同時に見渡せます。しかし390×844のモバイル画面では、ユーザーの注意は現在進めている一つのステップに集中します。検索バー、カルーセルバナー、4つのカテゴリーアイコン、2列の小さなカードを1画面に同居させると、どれも窮屈で使いにくくなります。
ギャラリーのモバイルアプリが何を残し、何を省いたかを見てみましょう。サーフ予報「Tide」は「下部のタイムラインをドラッグすると、波高、風向、潮汐曲線が同期する」ことを中心にしています。配車アプリ「Pickup」は地図と下部シートの連携を軸に、乗車地点の確認、ドライバーの到着待ち、走行中の目的地変更の3画面を明確に分けています。デジタルバンク「Pact」と瞑想アプリ「Luma」も各画面の情報階層を厳しく絞り、主要な金額や呼吸タイマーを一目で読めるようにしています。
| 作品とモデル | サイズ | 第1画面（開始） | 第2画面（詳細・操作） | 第3画面（完了・フィードバック） |
|---|---|---|---|---|
| Tide サーフ予報 (GPT 6.1 Sol) | 390×844 モバイル | よく行くポイントのリストと最適な入水時間の案内 | 1つのポイントの7日間の波高、風速、潮汐曲線の詳細 | タイムラインを長押しして特定時刻までドラッグし、データをリアルタイムに連動 |
| Pickup 配車 (Claude Sonnet 5.5) | 390×844 モバイル | 地図のピンで乗車地点を確認し、車種ごとの料金を見積もる | ドライバーが向かう間の現在地と車両・ナンバープレートの照合 | 走行中にシートを開いて目的地を変更し、料金を再計算 |
| Luma 瞑想・睡眠 (GPT 6.1 Sol) | 390×844 モバイル | 入眠・ストレス軽減の目的から入る静かな夜間ホーム | 呼吸練習や睡眠用音声の再生中に表示する最小限の呼吸ガイド | 朝の起床後に睡眠時間とリズムの記録を振り返る |
| Splitwater 水泳ウォッチ (GPT 6.1 Sol) | 198×242 ウォッチ | スイム中（黒背景、1画面に非常に大きな往復数だけを表示） | プールサイドでの休息カウントダウンリングと振動による入水通知 | 濡れた手でリューズを回して水ロックを解除し、トレーニングを総括（全5画面） |
screens.htmlに複数画面を並べ、完全なタスクフローを確認する
1枚のページだけを作ると、画面間の遷移ロジックや視覚的な統一を見落としがちです。Oil UIのギャラリー規約と日々のワークフローでは、エージェントに次の2つのファイルを同時に作らせることを推奨しています。
実際にクリックして状態を切り替えられるindex.html
390×844のビューポートで完全なインタラクションを提供し、下部タブのタップ、ハーフスクリーンシートを開く操作、スライダーのドラッグ、状態切り替えを実際に試せるようにします。
3～5画面を横に並べたscreens.html
中心フローの各画面を1枚のキャンバスに横並びで展開します（例：1. リスト → 2. 詳細・操作中 → 3. 結果のフィードバック）。何度もクリックして往復せずに、各画面のヘッダーの高さ、文字サイズの階層、下部バーの位置、主色が統一されているかを一度に確認できます。
各画面をDPR=2の高解像度で撮り、ブラインドレビューする
並べた各画面を390×844で個別にキャプチャし、下部のセーフエリアの余白、ボタンのタップ可能な高さ（最低44px）、長いテキストの切り詰めを確認します。
モバイルアプリ複数画面デザインのプロンプトテンプレート
次のテンプレートをClaude CodeやCodexに送ると、操作できるメインページと複数画面プレビューを含むモバイル作品を生成できます。
Oil UIを使って、[アプリの種類（例：複数人で旅行日程を編集するアプリ／個人家計簿・予算アプリ）]をデザインして実装してください。ビューポートは390×844です。
- 中心タスクと操作感：[ユーザーが最も頻繁に行う操作を説明。例：日ごとに観光地の順序をドラッグで調整し、移動時間を自動再計算する／素早く支出を記録し、今週の残り予算の進捗が変わるのを確認する]。
- 3つの重要な画面状態：
1. 画面1：[メインビュー（旅程の概要や当月の家計簿など）]。
2. 画面2：[中心操作の状態（時間帯のドラッグ調整や割り勘シートの展開など）]。
3. 画面3：[完了状態または二次的な詳細状態]。
- 成果物：操作できるindex.htmlと3画面を横に並べたscreens.htmlの両方を作ってください。モバイルの親指操作に合わせ、デスクトップ式の多列の小さなカードを並べないでください。React Native、Flutter、SwiftUIを使っている場合も、この方法で複数画面のビジュアル案を先にそろえてから、ネイティブコンポーネントのコードに落とし込めます。
実際に動くギャラリー作品とプロンプト
1440pxまたは390pxのライブデモを開き、モデルとプロンプトが最終的なUIにどう表れたかを確認できます。
Tide
サーフィン・潮汐予報アプリ
サーファー向けのサーフ・潮汐予報アプリ（390×844）。保存したサーフスポットのリストと、各スポットの当日および翌7日間の波高、周期、風向・風速、潮汐曲線、おすすめ時間帯を表示する。 潮汐とコンディションは時間とともに変化するため、これはデータビジュアリゼーションの作品とする。タイムラインをドラッグすると、波、風、潮位が一体となって更新されるようにする。スポットリスト、単一スポットの詳細、タイムラインを特定時刻へドラッグする状態をデザインする。`index.html` と、3画面を横に並べた `screens.html` を納品する。
作品とプロンプトを見る →
Pickup
配車アプリ
配車アプリで車を呼んだ後の画面（390×844）。地図上で近づく車、ドライバーと車両の詳細、到着予定、乗車後の行程を表示する。 道路網とルートは、実際の地図のスクリーンショットではなくコードで描く。車を待つ時間は最も不安になりやすいため、車との距離をすぐに把握できるようにする。 待車中、車の到着、行程中の3状態を撮影する。`index.html` と、3画面を横に並べた `screens.html` を納品する。
作品とプロンプトを見る →
Luma
瞑想と睡眠
眠りにくい大人がリラックスして入眠できるよう助けるアプリ（390×844）。英語のインターフェースとし、就寝前のくつろぎルーティン、ガイド付き呼吸と瞑想、睡眠サウンドのミックス、翌朝に前夜の睡眠を振り返るレポートを提供する。 呼吸ガイドが中核。4秒で吸い、7秒止め、8秒で吐くなど、呼吸のリズムに合わせて画像が膨らみ、縮むようにする。夜に見ても心地よいものにする。翌朝のレポートでは、指標を積み上げず、夜の眠りがどうだったかを一目で伝える。紫の星空グラデーションに月のイラストという定型表現は避ける。 くつろぎルーティン、おすすめエクササイズ、サウンドミックスを含む Tonight、呼吸エクササイズの進行中、入眠時間、覚醒、一晩の睡眠ステージ、今週との比較を示す翌朝の睡眠レポートの3画面をデザインする。`index.html` と、3画面を横に並べた `screens.html` を納品する。
作品とプロンプトを見る →
Pact
デジタルバンキング
フリーランサーと若い専門職向けのデジタルバンキングアプリ（390×844）。英語のインターフェースとし、残高、最近の取引、今月の支出、貯蓄目標、カード管理、送金を提供する。銀行名、カードデザイン、加盟店のロゴはすべて架空とする。 送金とカード操作が中核。受取人の選択、テンキーでの金額入力、送金確認を、安心でき効率的な操作にする。ワンタップのカード凍結では、状態変化を明確に示す。 残高、最近の取引、月間支出を含む Home。カード表面、凍結操作、利用限度、非接触決済を含む Cards。金額入力から送金完了までの送金フローの3画面をデザインする。`index.html` と、3画面を横に並べた `screens.html` を納品する。
作品とプロンプトを見る →Oil UI Proでモバイルのジェスチャー、ポップアップ、ミニゲームの状態を整える
Oil UI Proには、モバイルナビゲーションとセーフエリアの規約、ボトムシートとフォームエラーからの復帰ガイドに加え、Klak（カプセルトイ）、Ding! Mint Arcade（コインプッシャー）、Gotcha!（クレーンゲーム）などのインタラクティブなミニゲーム専用のレイアウトと状態チェックリストが含まれます。
npx github:oil-oil/oil-cli install oil-ui-proよくある質問
ギャラリーのモバイルアプリ事例では、なぜ3～4画面を並べて見られるのですか？
アプリは孤立したホーム画面だけでは評価できないからです。ギャラリーではscreens.htmlを使って各画面を独立にレンダリングしてサンプリングしています。作品カードとビューアーでは、すべての重要な画面を横に比較できるほか、単一画面モードに切り替えて実際に操作できます。
React Native、Flutter、iOSネイティブのプロジェクトではOil UIをどう使えばよいですか？
主に2つの方法があります。一つは、390×844のHTML比較ページと3画面の並列稿をエージェントに作らせ、3分ほどでレイアウト、配色、文字サイズを決めてから、決定稿に沿ってネイティブコードを書く方法です。もう一つは、ネイティブリポジトリでコンポーネントを直接変更させ、シミュレーターのスクリーンショットでブラインドレビューを行う方法です。
ウォッチ、テレビ、車載画面もモバイル・マルチデバイスの対象ですか？
対象です。むしろ物理的な利用環境の制約がより重要になります。ギャラリーのテレビアプリ「Yeying」（1920×1080、3m離れた場所からリモコンのフォーカスを移動）、車載画面「Yantu」（1920×720、運転中の視線を逸らさない操作と曲がり角での動的拡大）、水泳ウォッチ「Splitwater」（198×242、水ロックとリューズによる解除）は、いずれもプロンプトの冒頭で視聴距離と入力方法を指定しています。
モバイルで最もよく見られる「AIらしい」レイアウトは何ですか？
すべてのコンテンツを影付きの角丸白カードに入れ、さらにカード内へ薄いグレーの小カードを重ねる構成です。幅390pxの画面の左右にそれぞれ30～40pxもの余白が失われ、本文の1行に数文字しか入らなくなります。多層の入れ子カードを全幅のグループと細い区切り線に置き換えると、すぐに余裕が生まれます。