どうすれば新規の定着率は伸びるのか。
サービスの良さがより伝わるのか。

全ユーザーに影響を与えるオンボーディング。自分なりに UI をまとめたのでアップします。

また、今回は UI パターンの前に「オンボーディングとは」の定義からはじめました。概念があいまいに感じたので。ちょっと長いですが、お付き合いいただけると嬉しいです。

オンボーディングとは

アプリにおける オンボーディング は 新規ユーザーをアプリに定着させるためのフロー。では、具体的に何ができればオンボーディングは成功と言えるのか。

期待を超える体験

「XXX ができそうなのでやってみたら、想像以上によかった！」と思ってもらえること。オンボーディングにはこれが必要。では、どうすれば 期待 ＜ 体験 の状態を作れるのか。

オンボーディングを成功させる考え方

以下、三つの視点で考える。

1. 最高体験の定義
ユーザーがアプリに定着するには「すごい！」と思う瞬間が必要。
オンボーディングは、その「すごい！」への道のりを最短にすること。まずは最高体験を定義する。

2. 期待の明確化
オンボーディングの成功には「期待 ＜ 体験」が不可欠。
期待以上の体験を作るには、まず「これぐらいできそう」というユーザーの期待が前提となる。ここで問題となるのは、期待が不明瞭なままオンボーディングに入ってしまうこと。

3. 体験に必要なステップの最短化
最高体験に至るには、退屈な操作が必要になることが多い。
たとえば、誰かをフォローする、プロフィールを埋める、会員登録をする、など。それらの多くは、ビジネスやサービス設計上の制約・都合でしかない。こういった手間は極力排除する方針で考える。具体的には、後述のパターンを参考に考える。

【ポイント】
成功へ導く三つの視点
1. 最高な体験の定義
2. 期待の明確化
3. 体験に必要なステップの最短化

オンボーディングに影響する要因

どんなサービスで、誰を対象にオンボーディングをデザインするのか。デザイン環境の理解は、オンボーディングの成否に大きく影響する。そこで、「期待」と「ステップ」というふたつの視点で考える。

期待のパターン

ユーザーがアプリに対して感じる期待のパターン。
期待の強さによって三つに分類する。

1. 明確な期待
「XXXができるアプリがほしい！」のように明確な期待をもっているパターン。ユーザーが従来のサービスにストレスを自覚している場合が多いので、解消できる機能を示せばミスマッチは起きにくい。

2. 漠然とした期待
なんとなく楽しそう、便利そう程度の期待をもっているパターン。大きなストレスはないが、新しい習慣や発見を探している。機能をみせてもピンとこないので、メリットや体験中心の訴求で、期待のすり合わせを試みる。

3. 期待の不在
そもそも期待していないパターン。そのサービスを使わないといけない環境におかれているなど。たとえば、業務利用が決まっているもの、友人らと共有利用するので選択の余地がないものなど。期待が芽生えるような伝え方が必要。インパクト。

【ポイント】
ユーザーの期待値を理解する
デザイン対象のサービスはどんな性質のものか、をしっかり整理する。全ユーザーが同じ期待値になることはないが、傾向を理解することは大切。何を伝えるべきか、の重みづけに影響する。

ステップのパターン

最高体験に至るまでに必要なステップはいくつかに分類できる。以下を省略できるようデザインする。

1. アカウントの登録
アカウント登録しないと使えないパターン。メールや SNS でアカウント登録する、というフローが発生する。アカウント登録が必須出ない場合、体験のあとに、アカウント登録を促すほうがよい（e.g.　ニュース系アプリなどに多い手法）。

2. 志向性の選択
自分の好みや志向性を登録しないと体験が始まらないパターン。たとえば、Twitter のフォローなど。登録する理由やメリットが十分に伝わっていないと、この操作で離脱しがち。

3. 操作の理解
操作が複雑で理解に努力がいるパターン。たとえば、ゲームやツール系のアプリなど。工夫のないチュートリアルは、ただの操作手順になってしまいがち。せっかくの体験が「タスク」にならないようチュートリアルを設計する。そもそもチュートリアル不要な UI が理想。

4. コンセプトの理解
サービスの良いところが上手く伝わっていないパターン。
これができてないと、そもそも 1 ~ 3 の操作をなぜやっているのか、わからなくなり、離脱する。操作をやり抜く「期待」を感じてもらう必要がある。

UI のパターン

上記を踏まえた上で、オンボーディングでよく利用されるものをざっくり分類。

1. ウォークスルー

アプリ起動後に表示。サービスのコンセプトやメリットを訴求するのに適している。以下二つに分類できる。

A. 固定遷移型
ウォークスルーを経由しないと、次の操作に進めないパターン。一番最後のページでボタンが変化することが多い。

良いところ
ストーリーでサービスのコンセプトや強みを伝えやすい。

いまいち
操作数が多くなるので離脱しやすい。

B. 自由遷移型
ウォークスルーを経由しなくても進めるパターン。

良いところ
遷移操作の邪魔にならない。

いまいち
ウォークスルーを見ずに進むユーザーが発生する。コンセプトを伝えきれないケースが発生する。

2. チュートリアル

操作のわからない、を解決するパターン。さらに三つに分類できる。

A. ツアー型
指定操作が終わるまで、他の操作を禁止するパターン。ゲームなどでよくみるチュートリアル。

良いところ
遊び方や操作方法を丁寧に説明できる。

いまいち
チュートアリルが作業的になり離脱しやすい。

B. 一時中断型
他操作を一時的に中断して、チュートリアル表示する。すぐにチュートリアルを終了できる。

良いところ
メイン操作を必要最低限の中断で示せる。

いまいち
この程度の説明なら、そもそも説明不要の UI を設計したい。

C. 補助型
操作を停止せず、補足的に表示する。Web だと吹き出し風 UI をよくみる。EmptyState も似た役割をもつことがある。

良いところ
操作を邪魔しない。

いまいち
ユーザーが見落とす可能性がある。表示条件の制御など工数が大きくなりやすい。

3. 設定アシスト

ユーザーの志向性などを登録し、体験の質をあげるパターン。 以下のように志向選択するものが多い。他には、転職アプリでよくある「完成まであと n%」などの促進系がある。

良いところ
自分好みにカスタマイズされた状態で利用開始できる。

いまいち
設定が多いと煩わしくなりやすい。コンテンツを最短でみたい人にはストレス。

4. サインアップ

ユーザー登録などのパターン。設定アシストと異なり、ユーザーは操作のメリットを感じづらい。よければ、以下参考ください。

おわりに

まとめるとこんな感じ。

オンボーディングとは
新規ユーザーをアプリに定着させるためのフロー。期待を超える体験を最短でユーザーへ届ける工夫のこと。

成功するオンボーディングの作り方
1. 最高の体験を定義する
2. ユーザーの期待を明確にする
3. 体験までの操作数を最短にする

オンボーディングに影響する要因
・ユーザーの期待値
・省略不可な操作やステップ

UI のパターン
1. ウォークスルー
2. チュートリアル
3. 設定アシスト
4. サインアップ

スクショの保管場所

おわりのおわりに
今回はオンボーディングをまとめてみました。考えるべきことが多く、なかなか難しいです。実際には、データドリブンにコツコツ改善する必要があると思います。オンボーディングは、全ユーザーに影響する箇所なので、今後も試行錯誤したいと思います。知見ある方、ぜひご意見を！

この記事が役に立ったぞ！という方、お気軽に「いいね」「シェア」いただけますと、素直にめちゃくちゃ嬉しいです。あと、内容も主観強めなのでフィードバックがあれば、お気軽にお願いします〜。

それでは、

最後まで読んでくださってありがとうございました！

Twitter でもよろしくお願いします。
https://twitter.com/aki_design_1988