この記事の要点(UIXHERO視点) UIXHEROでは、オンボーディングを「機能の説明ではなく、ユーザーの成功体験への最短ルート」と捉える。 本記事では、説明的なチュートリアルを排除し、操作を通じて自然に習熟させる「体験型学習」と、レベルに応じて情報を小出しにする「段階的開示」の設計を整理する。
1. プロアクティブ型 vs リアクティブ型
新しいゲームを買った時のことを思い出してください。 分厚い説明書を最初に全部読んでからプレイしますか?それとも、とりあえず「ニューゲーム」を選びますか? ほとんどの人が後者でしょう。
アプリやWebサービスも同じです。 初回起動時に「10枚のスライドショー」を見せられても、ユーザーは「スキップ」ボタンを探すだけです。 情報を一度に詰め込んでも定着しません。必要なのは、 「必要な時に、必要な分だけ」 教えることです。
オンボーディングには大きく分けて2つのアプローチがあります。
プロアクティブ型(先回り型)
ユーザーが操作する前に、システム側から積極的に情報を提示するスタイルです。
- ツアーガイド: 画面の主要機能を順にハイライトして説明する。
- ウェルカムスクリーン: アプリの価値提案(バリュープロポジション)を伝えるスライド。
使い所: アプリ全体の概念を理解しないと何もできない場合や、全く新しいUI概念を導入した場合に有効です。しかし、乱用すると「お節介」になり、離脱の原因になります。
リアクティブ型(反応型)
ユーザーが特定の操作を行ったり、特定の画面に到達したタイミングで、コンテキストに合わせて情報を提示するスタイルです。
- ツールチップ: 未使用の機能にマウスオーバーした時にヒントを出す。
- エンプティステート: コンテンツが空の画面で、「まずはここから投稿してみましょう」と誘導する。
使い所: 現代のUXトレンドはこちらが主流です。ユーザーは自分のペースで探索でき、躓いた時だけ助け舟が出るため、ストレスが少なくなります。 ※UIXHEROが推奨する「体験型学習」は、主にこのリアクティブ型のアプローチによって実現されます。
2. 分散学習(Distributed Learning)
教育心理学において、一度にまとめて学習する(集中学習)よりも、時間を空けて少しずつ学習する(分散学習)方が、長期的な記憶の定着率が高いことが知られています。
UXにもこれを適用しましょう。 初回起動時に機能を100個説明するのではなく、 レベル1のユーザーにはレベル1の機能だけ を教えます。ユーザーが使い慣れてきた頃(例えば起動10回目や、基本機能を使いこなした後)に、「こんな便利な機能もありますよ」とレベル2の機能を紹介するのです。
これを 「プログレッシブ・ディスクロージャー(段階的開示)」 と呼びます。 一度に全てを見せないことで、ビギナーを圧倒することなく、エキスパートには深みのある体験を提供できます。
3. ツールチップ vs コーチマーク
似たようなUI要素ですが、役割が異なります。
-
ツールチップ(Tooltips):
- 役割: 機能の「名前」や「詳細」を説明する。
- タイミング: ユーザーがホバーやタップした時(受動的)。
- 内容: 名詞的。「設定」「アカウント情報」など。
-
コーチマーク(Coach Marks):
- 役割: 機能の「価値」や「使い方」を提案する。
- タイミング: ユーザーに気づいてほしい時(能動的)。
- 内容: 動詞的。「ここから友達を招待できます」「このボタンで保存しましょう」。
コーチマークは強力ですが、画面を覆い隠してしまうため、 「一度に1つ」 という原則を守りましょう。画面中が吹き出しだらけになると、ユーザーはパニックになります。
まとめ:ユーザーをヒーローにする
オンボーディングの目的は、「機能の説明」ではありません。 「ユーザーがそのアプリを使って、何かを達成できるようになること」 です。
任天堂のスーパーマリオブラザーズの最初のステージ(1-1)は、世界で最も優れたオンボーディング教材と言われています。 テキストによる説明は一切ありません。しかし、「クリボーに当たると死ぬ」「キノコを取ると大きくなる」「穴に落ちると死ぬ」というルールを、プレイを通じて自然に学習できるように設計されています。
あなたのアプリも、「説明する」のではなく、「体験させる」ことを目指してください。 ユーザーが自分の力で発見し、学び、成長したと感じられる時、彼らはそのプロダクトのファンになってくれるはずです。