「オンボーディングなんて、ウェルカム画面と説明スライドを2〜3枚作ればいいんでしょ？」
Google Stitch を使い始める前、私はそう思っていた。
実際にオンボーディングフロー全体をStitchで設計してみるまでは。
今でも覚えているのは、最初にStitchへ投げたプロンプトだ。「家計管理アプリのオンボーディング画面を作って」。出てきたのは、きれいなウェルカム画面だった。でも、それだけだった。ウェルカム画面の「次に何をするか」が、まるで見えていなかった。
ユーザーが初めてアプリを開く瞬間から、「使えるようになった」と感じるまでの「旅」——それを設計することの難しさを、このプロジェクトを通じて改めて思い知った。
結論から言うと——Google Stitch でオンボーディングフローを設計するには、「ウェルカム画面」ではなく「ユーザーの状態遷移」を起点に考える必要がある。Stitch の5画面同時生成機能を活用して、フロー全体を一気に描き出すことが、品質の高いオンボーディング設計への近道だ。
オンボーディングフローとは何か
オンボーディングフローとは、新規ユーザーがプロダクトに初めて触れてから「このサービスを使いこなせる」と実感するまでの一連の画面・操作体験のことです。単なる「案内スライド」ではなく、ユーザーのアカウント設定・初期値の入力・プロダクトの価値体験までを包括したフローを指します。
UXデザインの世界では、オンボーディングは「プロダクトの運命を決める最初の関門」とも言われます。ユーザーがオンボーディングを完了せずに離脱する確率は高く、良質なオンボーディングがあるかどうかがそのまま長期継続率に直結します。
「最初の5分」がプロダクトの評価を決める
ユーザーリサーチの世界でよく言われる事実がある。多くのユーザーは、プロダクトを試し始めてから5分以内に「このアプリを使い続けるかどうか」の判断をしている。
この5分の間に、ユーザーは何を体験しているか。
- 「これは自分のためのものだ」と感じられるか
- 「何をすればいいか」が直感的にわかるか
- 「このアプリで何ができるか」が具体的にイメージできるか
- 初期設定が「面倒くさくない」か
これらすべてを5分以内に、かつ画面を通じてだけで伝えなければならない。それがオンボーディングフローに求められることだ。
オンボーディングを構成する主な画面タイプ
一般的なオンボーディングフローは、以下のような画面で構成されます：
- ウェルカム画面：最初の印象を作る。プロダクトの価値をひと言で伝える
- 価値訴求スライド（オプション）：2〜3枚で主要な機能・メリットを紹介する
- アカウント作成・ログイン画面：メール、SNS連携、電話番号など
- プロファイル設定画面：名前・目標・好みなどの初期入力
- ホーム画面（初回状態）：空の状態からどう見せるか。ガイダンスを含む場合も
これらを一連のフローとして設計するのが、オンボーディングデザインの仕事だ。
Stitch でオンボーディングフローを設計した体験
実際に試してみてわかったのは、Stitch でオンボーディングを設計する際、プロンプトの「粒度」が結果を大きく左右するということだ。
最初の失敗：「オンボーディング画面を作って」だけでは足りない
「家計管理アプリのオンボーディング画面を作って」というプロンプトで始めたとき、Stitchが生成したのはウェルカム画面1枚だった。
それはきれいだった。でも、ユーザーはその次にどこへ行くのか。どんな情報を入力するのか。何を「完了」したらホーム画面に進めるのか——そういった「流れ」が存在していなかった。
「1枚の画面」ではなく「フロー全体」を設計するには、Stitchへの指示もフロー単位で考える必要があることに気づいた。
5画面同時生成でフロー全体を一気に描く
2026年3月のStitch 2.0アップデートで強化された「5画面同時生成」機能が、この問題の解決策になった。
同時生成を使ったプロンプトの例：
「家計管理アプリのオンボーディングフローを5画面で作成してください。画面の構成は次の通り：①ウェルカム画面（アプリの主要メリットを3つ表示）、②月収入の入力画面、③主な支出カテゴリの選択画面（複数選択）、④目標設定画面（貯金目標額）、⑤セットアップ完了・ホームへ進む画面。モバイルサイズ、明るい配色、初心者向けのやさしい雰囲気で。」
このプロンプトで生成したフローは、前の1枚生成とはまったく別物だった。画面間の流れが自然につながっており、デザイントークンも統一されていた。
実際に使ってみてわかったのは、「フロー全体の設計図を先に言語化してからStitchに渡す」というプロセスが、結果の品質を大きく左右するということだ。
オンボーディング設計で意識すること
Stitch を使いながら、オンボーディング設計について考えたことをまとめます。
「情報を教える」より「体験させる」を優先する
オンボーディングの最大の落とし穴は、「機能説明」になってしまうことだ。
「この画面でできること」を延々と説明するスライドは、ユーザーには読まれない。読んでも、使い方は頭に入らない。人は「やってみてわかる」のであって、「説明を読んでわかる」わけではない。
良いオンボーディングは、説明よりも「体験」を優先する。最小限の入力をしてもらい、その結果として価値が見える。「ああ、こういうことか」という瞬間を、なるべく早いタイミングで提供するのがオンボーディングの目的だ。
Stitch でこれを設計するには、プロンプトに「教える」ではなく「体験させる」という視点を入れることが重要だった。
「スキップ」をどこに置くかという問題
オンボーディングフローを設計するとき、必ず直面するのが「スキップボタン」の問題だ。
スキップできると、ユーザーはスキップする。スキップされると、プロダクトが適切に設定されないまま使い始められるリスクがある。でも、スキップできないと「強制感」が生まれ、逆に離脱する人もいる。
Stitchで複数パターンを生成して比較してみた。「スキップなし」「全ステップにスキップあり」「必須ステップはスキップなし・任意ステップにスキップあり」の3パターン。
比較してみると、3パターン目が最も自然に見えた。「あなたにとって大切な情報だから入力してほしい」というものは必須にして、「好みの設定」は後回しにできる——そのバランスを視覚的に確認できたのは、Stitch の複数生成があってこそだと思った。
プロンプト設計の実践的なコツ
オンボーディングフローをStitchで設計するときに効果的だったプロンプトの書き方をまとめます。
ユーザーの「状態」を主語にする
「画面を作って」ではなく、「このユーザーが次に何をすべきか」を主語にしてプロンプトを書くと、Stitchが生成するUIの質が上がります。
例：「初めてアプリを開いたユーザーが、まだ何もデータがない状態で最初に行うべき設定ステップを案内する画面を作成してください。ユーザーは40代・会社員・家計管理に不慣れという設定で。」
ユーザーの属性・状況・目的を書くことで、コピーライティングやCTAのテキストがより適切なものになります。
プログレスインジケーターを忘れない
「今何ステップ中の何ステップ目か」を示すプログレスインジケーターは、オンボーディングの完了率に大きく影響します。
Stitch にプロンプトを書くとき、明示的に「ステップ3/5を示すプログレスバーを画面上部に配置」と書かないと、省略されることがあります。プログレスインジケーターは必ずプロンプトに含めるよう習慣化しました。
よくある失敗と対処法
- 失敗1：ウェルカム画面に情報を詰め込みすぎる——「すべての機能を紹介しなければ」という焦りから、ウェルカム画面に機能リストをぎっしり書いてしまうことがあります。Stitch でも、プロンプトが情報過多だと画面が窮屈になります。最初の画面で伝えることは「ひとつの強いメッセージ」だけにしましょう。
- 失敗2：入力ステップが多すぎる——「ちゃんと設定してもらいたい」という気持ちから、オンボーディング中に10項目以上の入力を求めてしまうケースがあります。初回は3〜5ステップを上限にし、残りは「後で設定できる」ことを伝えるUIにしましょう。
- 失敗3：エラー状態を設計していない——Stitch で生成したオンボーディング画面は、「正常系」しか描かれていないことがほとんどです。「入力値が不正な場合」「メールアドレスが重複している場合」などのエラー状態は、別途プロンプトを作って生成する必要があります。
- 失敗4：完了後のホーム画面との断絶——オンボーディングが終わったあとのホーム画面が「まっさら」では、ユーザーは「次に何をすればいいかわからない」状態に陥ります。オンボーディング完了直後のホーム画面（初期データ入り）もセットで設計しましょう。
- 失敗5：モバイルとデスクトップを混在させてしまう——Stitch でオンボーディングを生成するとき、プロンプトにデバイスを明示しないと、モバイルとデスクトップが混在した結果になることがあります。「スマートフォン向け、縦向き」などを明示します。
よくある質問（FAQ）
Q. Google Stitch でオンボーディングフロー全体を一度に生成できますか？
A. できます。2026年3月のStitch 2.0アップデートで5画面同時生成が可能になりました。プロンプトに「〇画面のオンボーディングフローを作成。画面1：〜、画面2：〜…」という形式で各画面の内容を列挙すると、デザイントークンが統一された一貫性のあるフロー画面群が生成されます。
Q. 生成した画面をインタラクティブなプロトタイプとして確認できますか？
A. できます。Stitch では生成した画面を連結してフロー確認（Play モード）ができます。ボタンクリックで次の画面に遷移する動きを確認できるので、実際のユーザー体験に近い形でレビューできます。ただし複雑なインタラクション（アニメーション・入力値の保持など）は現時点では限定的です。
Q. オンボーディングのコピー（文章）も Stitch が生成してくれますか？
A. はい。Stitch はUIレイアウトだけでなく、ボタンテキスト・見出し・説明文などのコピーも自動生成します。プロンプトにターゲットユーザーの属性（年齢・リテラシー・状況）を書くと、よりそのユーザーに合ったトーンのコピーが生成されます。ただし日本語のコピーは英語と比べて品質にばらつきがあるため、必ず確認・修正してください。
Q. オンボーディングの「スキップ」ボタンの扱いはどうするのがいいですか？
A. 必須情報の収集ステップはスキップ不可・任意情報のステップはスキップ可能にする「段階的オンボーディング」が一般的に有効とされています。Stitch でもプロンプトに「このステップはスキップ不可、このステップにはスキップボタンを表示」と明示すると、意図通りのUIが生成されます。
Q. A/Bテスト用に複数パターンのオンボーディング画面を作りたい場合、Stitch は使えますか？
A. 有効です。「同じウェルカム画面のパターンAとパターンBを作成。Aはシンプルな白背景・1行コピー、Bはビジュアル重視・アプリのスクリーンショットを背景に使用」のようなプロンプトで、比較用の複数バリアントを効率よく生成できます。
Q. オンボーディング設計に参考にすべきサービスはありますか？
A. Duolingo・Notion・Airbnb・Headspaceなどは、オンボーディングフローの設計が優れているとされる代表例です。これらのサービスのオンボーディング画面をStitchのリファレンスとして使うことも可能です。ただし著作権の観点から、デザインをそのまま模倣することは避け、「この雰囲気でオリジナルを作る」という使い方にとどめてください。
まとめ：オンボーディングは「説明」ではなく「体験設計」だ
Google Stitch でオンボーディングフローを設計してみて、改めて確認できたことがある。
オンボーディングとは、ユーザーに「機能を説明する」ことではない。ユーザーが「このプロダクトで何ができるか」を体で覚えるための「最初の体験」を設計することだ。
Stitch は、その設計を視覚化するスピードを劇的に早めてくれた。「こういう流れで見せたい」というアイデアを、10分以内に画面として確認できるようになった。
ただし、Stitch が自動生成してくれるのはあくまでも「見た目」であって、「ユーザーが最初の5分に何を感じるか」という問いに答えを出すのは、まだ人間の仕事だ。
その問いと真剣に向き合うための「考える材料」を、Stitchは恐ろしく早く提供してくれる。それが、このツールを使い続けている理由の一つだと思っている。
この記事で解説した主なポイント：
- オンボーディングフローの定義と「最初の5分」の重要性
- Stitch の5画面同時生成でフロー全体を一気に設計する方法
- 「情報を教える」より「体験させる」を優先するプロンプト設計
- スキップボタンの設計ポリシーとパターン比較
- よくある失敗5パターンと対処法
次のステップ：まずはプロンプトに「5画面のフロー構成を箇条書きで明示」する形式を試してみましょう。フロー全体を言語化するプロセスが、そのままユーザー体験設計の質向上につながります。
