最初の5秒で離脱させないために——Google Stitch でログイン・オンボーディング画面を設計するとき考えていること

2026.04.12

ユーザーがサービスに初めて触れる瞬間は、ログイン画面かサインアップ画面だ。その数秒間の印象が、そのサービスをこれからも使い続けるかどうかの判断に影響する。デザイナーなら誰でも知っていることだが、実際にその画面を丁寧に設計できているかどうかは別の話だ。

Google Stitch を使ってログイン・オンボーディング画面を設計してみたとき、「この画面は試してみると意外と奥が深い」と感じた。シンプルに見えて、実は多くの判断が詰まっている。

この記事では、Stitch でログイン・オンボーディング画面を設計した経験をもとに、考えていることと実践の手順を書く。

結論から言うと

一言で言えば、Google Stitch はログイン・サインアップ・オンボーディング画面の「たたき台」を素早く作るのに最適だが、「フリクションの最小化」と「信頼感の設計」には人間の判断が必須だ。見た目のデザインはStitchが短時間で揃えてくれるが、「このサービスは安心して使える」「この次のステップは何をすればいいか」という体験の設計は、プロンプトの言語化を通じた設計者の意図が反映されなければならない。

ログイン画面設計の基本と Stitch への落とし込み

ログイン画面は「単純な画面」と思われがちだが、設計上の判断が多い。メールアドレスとパスワードのフォームを置くだけで済む場合もあれば、ソーシャルログイン（Google・Apple等）の統合・多要素認証（MFA）・パスワードリセットフロー・ゲストアクセスオプションなど、複数の経路を整理する必要がある場合もある。

ログイン画面のプロンプト設計

Stitch でログイン画面を生成するときの効果的なプロンプト構造を示す。

まずサービスのコンテキストを定義する：「[サービス名]のログイン画面。[ターゲットユーザー]向け。信頼感と安心感を最優先にしたデザイン。」

次に含む要素を明示する：「メールアドレス入力フィールド・パスワード入力フィールド（表示/非表示トグル付き）・ログインボタン（プライマリ）・パスワードを忘れた場合リンク・Googleでログインボタン・新規登録リンク。」

最後に視覚的方向性を指定する：「左半分にブランドビジュアル（サービスのメリットを3点で表示）、右半分にログインフォーム。背景は白。フォームの枠線は薄いグレー。ボタンは[ブランドカラー]。フォント：可読性優先。」

このプロンプト構造で生成すると、「入力項目の過不足」と「視覚的なバランス」が整ったログイン画面のたたき台が出てくる。実際に使ってみて分かったのは、ログイン画面のプロンプトで最も重要なのは「含む要素の列挙」だということだ。フォームの種類によって必要な要素が大きく変わるため、省略せず明示することが精度を上げる鍵だ。

信頼感を設計するための要素

ログイン画面で「信頼感」を伝えるためのビジュアル要素がある。セキュリティバッジやSSL証明表示、利用企業数や利用者数の実績表示、プライバシーポリシーへの明示的なリンク、「〇〇万人が利用中」というソーシャルプルーフだ。これらをStitchのプロンプトに含めることで、信頼感のある画面が生成されやすくなる。

オンボーディング画面の設計実践

オンボーディングとは、新規ユーザーがサービスに初めてログインした後に表示される「使い始めるための案内」のことだ。最初の数画面でサービスの価値を伝え、ユーザーを「最初の成功体験」まで導くことがオンボーディングの目的だ。

オンボーディングの3つのパターン

オンボーディングのUIパターンには主に3種類ある。

スライド型オンボーディング：3〜5枚のカード/スライドでサービスの特徴を紹介し、最後にCTA。「スキップ」オプション必須。Stitch で生成しやすく、スライドごとにビジュアルとテキストのバランスを調整できる。

プログレッシブオンボーディング：サービスを使いながら少しずつ機能を案内するタイプ。最初のログイン画面には「最初にやること」のチェックリストや空のダッシュボードに「さあ始めましょう」的なCTAを配置する。Stitch でエンプティステートと組み合わせて設計すると効果的だ。

インタラクティブオンボーディング：実際の操作をガイドしながら進むチュートリアル型。Stitch で静的な画面設計はできるが、ステップごとのハイライト・ツールチップの動的な挙動は実装フェーズでの対応が必要だ。

オンボーディングの設計で意識していること

Stitch でオンボーディング画面を設計するとき、いくつかのことを意識している。

まず、ユーザーが最初に感じる「不安」を取り除く要素を入れること。「いつでもキャンセルできます」「30日間の無料トライアル」「クレジットカード不要」といった安心ワードをビジュアルの中に配置するようプロンプトで指定する。

次に、「スキップ」を必ず入れること。オンボーディングを強制することはユーザーの離脱を招く。どの画面にもスキップリンクを入れるようプロンプトで明示する。

最後に、進捗を見せること。「3ステップ中2番目」というような進捗インジケーターがあると、ユーザーは「あとどれくらいか」が分かって離脱しにくくなる。

Google Stitch 自身のオンボーディングから学ぶ

Google Stitch 自体のオンボーディング体験は、注目に値する設計をしている。stitch.withgoogle.com にアクセスしてGoogleアカウントでログインするだけで、ウェイティングリストなし・クレジットカード不要・インストール不要で即キャンバスに入れる。

この「ゼロフリクションオンボーディング」は、Google が意図的に設計した体験だ（Google Labs 公式発表、2026年）。新しいユーザーに「まず使ってみてほしい」というメッセージが、余計なステップを排除することで体現されている。自分のサービスのオンボーディングを設計するとき、Stitch 自身の体験を参考にすることは多い。

よくある質問（FAQ）

Q1. Stitch でソーシャルログイン（Google・Apple）を含む画面を作れますか？

作れます。「Googleでログインボタン（Googleのブランドガイドラインに準じた白背景・Googleロゴ入り）・Appleでログインボタン（黒背景・Appleロゴ入り）」とプロンプトに明示すると、それらしいボタンが生成されます。ただしロゴの正確な再現には制限があるため、実装時にGoogleおよびAppleの公式ブランドアセットを使用することを推奨します。

Q2. 多要素認証（MFA/2FA）の画面はStitchで設計できますか？

できます。「多要素認証コード入力画面：6桁の数字入力フィールド×6つ（オートフォーカス付き）、60秒のタイムアウトカウントダウン、コードを再送信するリンク、説明テキスト「SMSに送信された6桁のコードを入力してください」」というプロンプトで、MFA画面のたたき台が生成できます。

Q3. オンボーディングのA/Bテスト用に複数バリアントを作れますか？

作れます。Stitch 2.0のマルチスクリーンキャンバス（最大5画面）を使い、「同じ内容のオンボーディングをスライド型・チェックリスト型・シングルCTA型の3バリアントで生成してください」と指定することで、複数のオンボーディングパターンを並べて比較検討できます。A/Bテストの候補を事前に視覚化することで、どのバリアントを試す価値があるかの議論が早まります。

Q4. パスワードリセットフローも含めてStitchで設計すべきですか？

ぜひ設計することを推奨します。ログイン・サインアップ・オンボーディングと同じセッションでパスワードリセットフロー（メールアドレス入力→確認メール送信→新パスワード設定→完了）も作成しておくことで、ユーザーフロー全体の一貫性が担保されます。ログインとは別の画面になるため、Stitch 2.0のマルチスクリーンでフロー全体を俯瞰しながら設計するのが効果的です。

Q5. モバイルアプリのオンボーディングとWebのオンボーディング、設計で何が違いますか？

モバイルでは画面が縦長で情報量が限られるため、1画面に入れる情報を少なくする必要があります。また、スワイプ操作を前提としたスライド型オンボーディングはモバイルで特に有効です。Webは画面が広く情報を並列表示できるため、チェックリスト型や左右分割型のオンボーディングが使いやすい傾向があります。プロンプトで「モバイル用」「Web用」を明示してそれぞれ生成し、比較することをおすすめします。