02. Stitchの画面案からユーザー導線を作る

単体の画面案（ワイヤーフレーム）ができたら、次はそれぞれの画面を繋いで「ユーザーがアプリ内をどう移動するか（ユーザー導線・画面遷移）」を設計します。

モバイルアプリでは、画面遷移のロジックが破綻していると「戻るボタンを押したのに元の画面に戻らない」「操作が途中で行き止まりになり、アプリを再起動せざるを得ない」といった重大なUX低下を招きます。

本サイトが使用するExpo開発環境では、Expo Router というファイルシステムベースのルーティングが採用されています。Google Stitch上で導線設計を整理しておくことは、そのままExpo Routerのフォルダ構成（設計図）を作ることに直結します。

この記事のサブコンテンツ

この記事では、Stitchの画面案からスムーズなユーザー導線を作る手順を以下の項目で解説します。

ユーザー導線（画面遷移）設計の重要性
Expo Routerへのマッピングを意識したフォルダ設計
Stitchにおける画面接続とアクション定義（プロトタイプとモーション機能含む）
ナビゲーションタイプ（タブ・スタック・モーダル）の使い分け
導線不整合を防ぐためのセルフチェック
まとめと次のステップ

1. ユーザー導線（画面遷移）設計の重要性

ユーザー導線（ユーザーフロー）とは、ユーザーが目的を達成するためにアプリ内でたどる経路を視覚化したものです。

Stitchでは、作成した複数の画面（ダッシュボード、詳細、編集など）を矢印やイベントで結びつけ、アプリ全体の流れを作成します。これにより、以下のような開発上のメリットが得られます。

画面間の状態の受け渡しが明確になる：詳細画面を開くためには「どの習慣のIDを渡す必要があるか」といったデータ連携の設計が整理されます。
戻る挙動の最適化：「編集画面でキャンセルを押したときは詳細画面に戻り、保存したときはダッシュボードに戻る」といった、細かい遷移ルールを事前に確定できます。
実装時の迷いの解消：開発AI（GitHub Spec Kit）に「このボタンを押したら、このファイルをどのナビゲーションタイプで開いて」と正確に指示できるようになります。

2. Expo Routerへのマッピングを意識したフォルダ設計

Stitchで導線を作る際は、Expoのルーティングシステムである「Expo Router」の構造を念頭に置くと、のちのコーディングフェーズが非常にスムーズになります。

主要なディレクトリ構成案

Stitchで設計した画面と導線は、以下のようにExpo Router（app ディレクトリ）の構造へ直接マッピングされます。

(tabs)/（タブナビゲーション）：アプリの主要な基点となる画面
- (tabs)/index.tsx（ダッシュボード）
- (tabs)/analytics.tsx（分析・統計）
- (tabs)/settings.tsx（設定）
habit/（スタックナビゲーション）：特定の要素を深掘りする画面
- habit/[id].tsx（習慣詳細画面・動的ルーティング）
- habit/edit.tsx（習慣編集画面）
create/（モーダル表示）：一時的な作業を挟み込む画面
- create/index.tsx（新規習慣作成フォーム）

Stitch上で画面遷移の矢印を引く段階で、「この矢印は habit/[id] への動的ルートになる」といった対応関係をAIと対話して定義しておきましょう。

3. Stitchにおける画面接続とアクションの定義

Stitchのキャンバス上で、AIに対して「遷移のトリガー（引き金）とアクション」を定義させます。

トリガーとアクションの指定プロンプト例

例1：リストから詳細画面への遷移

「ダッシュボード（index）にある習慣リストの各項目を『タップ』した際、その習慣のIDをパラメータとして保持したまま、習慣詳細画面（habit/[id]）へ『右から左のスライド遷移（スタックプッシュ）』で移動する導線を追加してください。」

例2：フローティングボタンから新規作成画面へのモーダル遷移

「ダッシュボード右下のFAB（新規追加ボタン）を『タップ』した際、新規作成画面（create/index）が『画面下部からスライドアップする（モーダル表示）』導線を追加してください。また、モーダル内には『閉じる』ボタンを左上に配置してください。」

例3：認証フロー（条件分岐）の追加

「アプリ起動時、ユーザーがログイン（認証）状態でない場合は、自動的にログイン画面（auth/login）へ強制遷移する条件付きの導線を作成してください。ログインが成功した後は、ダッシュボード画面へリダイレクトします。」

インスタント・プロトタイプ（Instant Prototype）での動作検証

Stitchで画面間の接続（導線）を定義したら、最新機能である**「インスタント・プロトタイプ（Instant Prototype）」**を使って、即座に動的なプロトタイププレビューを実行します。

ワンクリックでのプロトタイプ生成：接続した複数の画面を選択して「Instant Prototype」を実行するだけで、AIがタップ領域（ホットスポット）と遷移ロジックを自動マッピングし、実際に動くプロトタイプを即座に作成します。
ブラウザでの対話的なシミュレーション：デザイン画面から切り離されたエミュレータ画面で、ボタンのホバー、カードのタップ、ポップアップの表示といったミクロな挙動まで含めて、実際の操作感を検証可能です。
QRコード/共有リンクによる実機テスト：Stitchが生成するQRコードをスマホでスキャンするだけで、コーディングを始める前に手元のスマートフォンで画面遷移や操作のしやすさ（片手での操作性など）を実機テストできます。

HTMLキャンバス上でのモーション定義

Stitchのプロトタイプは、単なる静的な画面切り替えではありません。HTMLネイティブなキャンバス上で動作するため、Web標準の豊かなアニメーションをその場でデザインし、動作させることができます。

シームレスなマイクロモーション：リスト項目のスワイプ削除、チェックボタンをタップした際のバウンス効果、進行状況バーのローディングアニメーションなど、アプリの質感（プレミアム感）を高めるミクロなインタラクションをAIに指示して、キャンバス上でプレビューできます。
画面遷移アニメーションの最適化：画面から画面へ遷移する際のスライドスピード、フェード、イージング（加減速）などを言葉でチューニングし、ユーザーが感じる「軽快さ」や「心地よさ」をコード実装前に極限まで磨き上げることができます。

4. ナビゲーションタイプ（タブ・スタック・モーダル）の使い分け

モバイルアプリの遷移にはいくつかの標準パターンがあり、それぞれ適切なUXの役割を持っています。Stitchでの導線設計時にもこれらを明確に区別します。

ナビゲーションタイプ	役割・特徴	Expo Routerでの実装表現
タブ（Tabs）	アプリの最も主要な機能を切り替える。常に画面下部に表示され、状態が維持される。	`app/(tabs)/_layout.tsx` (Expo Routerの `Tabs` コンポーネント)
スタック（Stack）	「一覧 → 詳細 → 編集」のように階層を深く進む。iOSでは右から、Androidでは下から重なる。	`app/_layout.tsx` 内の `Stack` または `Stack.Screen`
モーダル（Modal）	「作成フォーム」や「フィルター設定」など、一時的に作業を割り込ませ、完了したら閉じる。	`presentation: 'modal'` オプションを設定したスタック要素

5. 導線不整合を防ぐためのセルフチェック

Stitchでの導線設計が完了したら、以下のポイントが考慮されているか確認します。

逆方向の遷移（戻る挙動）：すべてのスタック/モーダル画面に、元の画面に戻るための「戻る（Back）」「キャンセル（Close）」ボタンが定義されているか？
ディープリンクの考慮：プッシュ通知や外部URLから特定の習慣詳細画面（habit/123）へ直接遷移した際、戻るボタンを押したときにダッシュボード画面に適切に着地できるか？
入力途中での離脱防止：作成/編集フォームの入力途中で「戻る」を押した場合に、「入力内容が破棄されますがよろしいですか？」という確認ダイアログ（インタラクション）を挟む導線があるか？

6. まとめと次のステップ

この記事では、Google Stitchの画面案を繋ぎ、Expo Routerを意識した論理的で破綻のないユーザー導線（画面遷移図）を作成する方法を解説しました。

画面の構造と遷移の流れが確定したら、次はアプリの「カラーシステム」「フォントサイズ」「共通UI部品のルール」といった、視覚的・触覚的なクオリティを高めるデザインシステム作りに進みます。

次の記事では、アプリ全体に統一感を持たせる「03. Stitchで配色とUI部品を決める」に進みましょう。