デバイスタイプ

プロジェクトを始めると、Stitch は App か Web かの選択を求めます。

これは単に画面サイズの話ではなく、プライマリデザインサーフェスを定義することでもあります。デバイスタイプは、Stitch がレイアウト、ナビゲーション、階層をどう解釈するかを決めます。

レイアウトはコンテキストに依存する

App モード： 縦スクロール、下部配置のナビゲーション（サムゾーン）、積み重ね型のコンテンツに最適化。
Web モード： 横方向の広がり、上部配置のナビゲーション、マルチカラムグリッドに最適化。

App モードで設計した画面は、デスクトップで見ると大きなアプリのように見えます。逆に、Web モードのデザインをスマートフォンの画面に押し込むと、ネイティブモバイルアプリに期待される重要なディテールや UI コンポーネントが失われがちです。

モード間のデザイン

あるプラットフォームから別のプラットフォームへ移る最良の方法は、サイズ変更ではなく**翻訳（translate）**です。

Stitch

モバイルアプリのデザインがあり、Web 版が欲しい場合は、そのデバイスタイプに最適化するために何を変えるべきかを記述したプロンプトを起草します。まず、既存のデザインを新規プロジェクトの参照画像として、または新しい画面の更新として使います。現在の Stitch の仕組みでは、新しい画面の生成は難しいことがありますが、以下でスムーズにする方法をいくつか説明します。

フェーズ 1：App デザイン

この Raffinato アプリの例を見てみましょう。Raffinato はイタリア語で「洗練された」という意味です。 このプロジェクトは、モバイルでの注文フローが最も重要だったため、App モードで始めました。

PROMPT

IdeaAn ordering app for a local quality obsessed espresso focused coffee shop named Raffinato.

ThemeA light, high contrast theme with a modern and minimalistic feel.

ContentPrefer a variable sized grid layout: 1 column on one row, followed by 2 columns on the next. Break up the grid into sections with labels categorizing the types of drinks in each section. Provide a mobile ordering layout for common espresso drinks with placeholder values for prices. Focus on the typographic balance for menu items placing the visual emphasis on the item name and less emphasis on details such as size in ounces, and price.

NavigationProvide navigation to easily switch screens between main grid, details, and the cart.

これにより、スマートフォンに最適な、引き締まった縦型のインターフェースが生成されます。

フェーズ 2：Web への翻訳

Web に移行するには、Web モードに設定した新規プロジェクトを作成するか、既存のプロジェクトで更新プロンプトを出し、画面のダウンロード画像を参照として使います。

ここでの目標は、より大きな画面領域をどう活用するかを Stitch に伝えることです。ナビゲーション、ヒーローセクション、グリッド密度など、変更が必要な UI/UX の核心的な側面に焦点を当てます。

プロンプトがデバイスタイプの翻訳をどう扱うかを見てみましょう。

PROMPT

NavigationConsolidate the bottom tab bar and top menu into a single, horizontal navigation bar at the top of the screen with links for Home, Menu, Rewards, and Account.

HeroTransform ‘The Daily Focus’ card into a split-layout hero section. Place the Cortado text and button on the left, and expand the image to cover the right side.

Grid LayoutUpdate the product lists from a 2-column mobile layout to a 4-column desktop grid. Maintain the light cream card background and minimalist vibe.

ナビゲーションを上部に移動し、ヒーローコンテンツを分割するよう明確に指示することで、このプロンプトはブランドの雰囲気を保ちながら、デバイスタイプの用途に合わせてデザインを最適化することに集中しています。

同じプロジェクト内でデバイスタイプを切り替える

特定のデバイスタイプで Stitch プロジェクトを作成すると、そのデバイスタイプのサイズの画面が生成され続けます。同じプロジェクト内でプロンプトを与えて別のデバイスタイプに変換できますが、手動での調整が必要です。

App プロジェクト内で Web のプロンプトを生成すると、Stitch はアプリフレームの中に Web コンテンツを生成します。

デザインを生成します。
Preview > Device Type で表示を目的のターゲット（例：Desktop）に切り替えます。
要素が切れて見える場合は、フレームを手動でリサイズします。

プロのヒント：隠れたコンテンツ

プロジェクト内で App から Web に切り替えるときは、デザインフレームの縦の高さを大幅に増やしてみてください。Stitch はウェブサイトロジックの「残り」を生成しているものの、元の App フレームが短すぎるために隠れていることがよくあります。フレームのハンドルを下にドラッグすると、レイアウトの残りの部分が現れます。