Component Gallery

Screen Pattern

オンボーディング画面（Onboarding Screen）UIの作り方

オンボーディング画面は、初回利用者に価値、操作、初期設定を短く伝える導入画面です。

最終更新日: 2026-07-16 / レビュー状態: 未レビュー

30秒でわかる要点

オンボーディング画面は、初回利用者に価値、操作、初期設定を短く伝える導入画面です。

自前ワイヤーフレーム

オンボーディング画面の情報配置を確認するための簡易ワイヤーフレームです。外部サービスのスクリーンショットではなく、Component Gallery側で作成した構成図です。

主なユースケース

  • ・初回起動時に価値を伝える
  • ・権限許可の前に理由を説明する
  • ・初期設定を数ステップで進める

レイアウトの考え方

  • ・1画面1メッセージにする
  • ・スキップ導線を用意する
  • ・権限要求の前に理由を説明する

アクセシビリティ

  • ・カルーセルの現在位置を伝える
  • ・自動再生に依存しない
  • ・戻る操作を用意する

よくある失敗

  • ・説明が長すぎる
  • ・スキップできない
  • ・権限要求だけが先に出る

構成コンポーネント

ボタン（Button）ボタン（Button）は、ユーザーがアクションを実行するためのクリック可能な要素。バリアント（プライマリ・セカンダリ・ゴーストなど）やサイズのバリエーションを持つ。プログレスバー（Progress Bar）プログレスバー（Progress Bar）は、処理の進捗状況を視覚的に示すコンポーネント。確定値（0〜100%）を示す確定型と、進行中を示す不確定型がある。タブナビゲーション（Tab Navigation）タブナビゲーション（Tab Navigation）は、ページレベルのコンテンツ切り替えを担うナビゲーション型タブ。URLルーティングと連動し、現在アクティブなセクションを示す。カード（Card）カード（Card）は、関連する情報をまとめて表示するコンテナコンポーネント。画像・タイトル・説明文・アクションを組み合わせて使う。カルーセル（Carousel）カルーセル（Carousel）は、複数の画像やカードを横スクロールまたは自動再生で切り替えて表示するコンポーネント。ドット・矢印などのナビゲーターを持つ。

AI実装プロンプト

オンボーディング実装

オンボーディング画面をReact + Tailwind CSSで実装してください。3ステップ、スキップ、進捗表示、モバイル表示、アクセシビリティを含めてください。

運営・更新・参照元

最終更新日
2026-07-16
レビュー状態
未レビュー

参照元

FAQ

オンボーディング画面は何枚が適切ですか？

多くの場合は3〜5枚が扱いやすいです。枚数よりも、初回利用者が次に何をすればよいか分かることを優先します。

オンボーディング画面で最初に決めるべきことは何ですか？

この画面でユーザーが完了したい主目的を1つに絞り、button、progress-bar、tab-navigationなどの構成要素を優先度順に配置します。

オンボーディング画面でよくある失敗は何ですか？

説明が長すぎる