# 【Reserch Note】Onboarding
###### tags: `Product`

### 初回起動時のUIを考えるにあたって重要となる項目,視点

　- **KPIに適した手法を取る(?)**
　 - ユーザー数(その中でもDAU,WAU,MAU),売上(課金コンテンツを利用してくれる可能性が高いユーザー向け)なのか、をまず決める。
- 一つのKPIのみに執着するというよりかは、優先度高い指標をメインに、他の指標にも刺さるような、総合的に見て優れたUIを作るべき？なの？か？
というより、全ての状況において、ユーザーを振り落とすことで得られるメリットは無い。ため、KPIに関わるユーザーを優先するがあまり、他ユーザーを大量に振り落とすようなことはあってはならない。

>Dropboxのオンボーディングでは、新規ユーザーにDropbox同期ソフトウェアをインストールするように誘導しています。Dropboxにとっては、ユーザーにアカウントを作ってもらうことよりも、同期ソフトウェアをインストールしてもらうことの方が優先度が高いのです。Dropboxはウェブアプリからも使うことができますが、最も便利なのはパソコンとクラウド間でファイルの同期が自動的に行われるところです。Dropboxはインストールが完了し、新しくアカウントが作成されるまでプロダクトのツアーのことは気にしません。新規ユーザーの中でソフトウェアのインストールに失敗する人は、Dropboxの便利さを最大限味わうことができないからです。インストールしなければ、アップロードするファイル数と使用する容量は少なくなり、容量を追加するための課金をする可能性は低くなります。Dropboxはユーザーを動かし収益成長に繋げるため、インストールに重点を置いているのです。https://goodpatch.com/blog/onboarding-trends/
>

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

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

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

- **なぜ、何のため、どのように？**

- **アプリで何ができるかを伝える**

- **何故そのアプリに気を留めるべきかを伝える**

- **個性を出す**
使うのが楽しくなるような、感情に訴えられるようにすること。

- **有益性を説明する**
ユーザーに何故このアプリを使うべきなのかを伝えることは非常に重要なこと

---
---

## 主な種類

- **スプラッシュ(画面,スクリーン)/Splash Screen**
　ホームからアプリのアイコンをタップしたときに出る画面で、データローディングの時間稼ぎ、またはそのアプリをブランドとしてユーザーに認知させる目的で使われる。


ただし、あくまでも時間稼ぎやブランドの認知目的にすぎないので、ツール系のアプリとは相性がよくありません。

ツールを使うユーザーは「すばやく・くりかえし使いたい」と思っているのに、スプラッシュ画面がいちいち出てきたらうざったいだけですよね！

「簡単につくれるからとりあえずつくる」のではなく、ユースケースやユーザーの体験を考えた上で、そのアプリにスプラッシュを採用すべきか否かを考えましょう。特にメモ系、カメラ系のアプリにはつけない方がいいです。

スプラッシュの中にも

* コンテンツ背景型
* ロゴ（背景ベタ塗り）型
* ロゴ（背景グラフィック）型
* ラベル型
* アニメーション型

　等、様々な種類がある。

※ [UIとしてのスプラッシュ画面](https://www.standardinc.jp/reflection/article/splash-screen-as-the-ui/)

| Disocrod | パラレル |
|:----------------------------:|:-----------------:|
| アニメーション型スプラッシュ | ロゴ(背景ベタ塗り) |

**【個人的所感,疑問】**
● スプラッシュ型は本来、ツール系には望ましくないらしいが、上記だけでなく、skypeやzoomを始めとする、ほとんどのアプリに採用されているが何故なのか。
　技術的に不可避なロード時間がある？ブランドの認知目的?

● ほとんどのアプリに採用されている。が、基本的にロゴ型かシンプルなアニメーション型で短い。

●　VOLBOXも現状のスプラッシュを採用したい。

---

- **ウォークスルー / Walk Through**
　アプリ起動後、すぐにアプリにふれさせるのではなく、スライドでアプリの特徴や使い方などを段階的にユーザーに理解させる手法。
　ウォークスルーが示す意味を、**カルーセル**や**オンボーディング**という単語で使用される場合がある。

> - カルーセル(パネル) /Carousel Panel
> 　カルーセルパネルとは、Webデザインの一種で、画像などのコンテンツをスムーズに横にスライドさせる表示方法のことである。カルーセルパネルを利用することで、狭いエリアに複数のコンテンツを表示させることができる。
> カルーセルはオンボーディングではなく、Webやアプリのデザインの方法として使用される場合が大半であるイメージ。
>
> - オンボーディング(Onboarding)
> 　ユーザーにサービスの価値や機能を説明し、操作スキルを身につけてもらうことで、ユーザーがサービスに魅力を感じ、効果的に利用できるようサポートをする一連の導入プロセスのこと。
> 　広義ではユーザーがアプリの利用に慣れるプロセス全体のことを示すが、狭義では、初回起動時のデザインのみを示す場合やウォークスルー,カルーセルと同義で使用される場合があり、人によってかなり定義が異なる印象。


ただ、大半のユーザーにとって邪魔であり、ウォークスルーに否定的な意見やサイトが多数見受けられた。

そのことを念頭におき、それでもウォークスルーを採用することにしたならば、
**「文字は多すぎず簡潔に」
「本当に伝えたいことだけ」
「イメージ（画像）はわかりやすく」**
この３つを意識しつつ作るといいと思います。

余裕があるならば、かっこいいアニメーションや仕掛けもいれられるといいですね。

※ [アプリの導入画面「ウォークスルー」のデザインで気をつけたい５つのこと](https://uxmilk.jp/53524)

※ [カルーセルのUIは売り上げにつながるのか!? カルーセルデザインを考えるときに知っておきたい7つのこと](https://martechlab.gaprise.jp/archives/clicktale/1740/?utm_source=martechlabshare)

※ [オンボーディングをデザインするときのトレンド7つ](https://goodpatch.com/blog/onboarding-trends/)
2014年に作成された記事のため、トレンドは変化していると思われるが、オンボーディングを知るには良記事。

**【個人的所感,疑問点】**

- 現状のVOLBOXではとりあえずなしで良い気がする。というのも、アプリのメリットや使い方を複数枚のページで段階的に表示するよりは、コーチマークで実際の画面で使い方や機能を直感的に説明した方がゲーマーにとっては嬉しい気がする。（偏見かもしれないが、ゲーマーはウォークスルーをいちいち読んでくれないような気がする。）

- Discordは”？ボタン”を押すと、ウォークスルーが出るようになっていた。

---

- **コーチマーク /Coach Mark**
　コーチマークとは、実際に利用されるUIがどのような操作で使うことが出来るのか、また最初に利用者は何をすべきなのかという説明を、画面上にオーバーレイやポップアップ、バルーンアップなどを利用して、表示させる画面を指す。この画面は、アプリの操作の説明を細かくすることができるので、具体的な説明をする用途に向いている。

ただしこの手法もウォークスルーと同様に、大抵のユーザーには毛嫌いされ、結局よく読まれずに終わることが多いので注意が必要です。
　そういうときは、たとえば最初から全部のボタンを説明するのではなくて、タップされたボタンについてのみコーチマークを出すなど、一工夫が必要かもしれませんね。

※ [アプリのコーチマークの観察](https://note.com/marina1017/n/n0e0b0919cf34)

**【個人的所感、感想】**

- この機能で一番悩んでいる。オンボーディングについて全く知らなかった時には、あった方がいいと感じていたが、UIが従来VCとして使用されていたであろうアプリ(Discord,パラレル、LINE等)と比較的似ているため、必ずしも必要であるとは言えないような気がしてきた。個人的な偏見だが、ゲーマーは長いオンボーディングを顕著に嫌うような性質があると思う。話を聞かない、ではないけど。となると、

　・最初にコーチマーク(アプリの使い方ガイド)を見る/見ないを選択させる(またはSkipボタン？)
　・初回起動時に発生させるのではなく、説明が必要な部分(特に複雑な機能や画面,理解しにくい部分)に移動するボタンをタップした際に、その都度発生させる

この上記２つの方法が思い浮かんだ。

---

- **エンプティステート /Empty State**

表示する情報がない時にユーザーが見る画面。

この画面の目的は
「今はコンテンツがないという情報を伝える」
「次にすべきアクションを伝える」
の２つ。


「何のため、なぜ、どうやって」を伝える。
→このページは何のためのページなのか？
→なぜ、このページではコンテンツが表示されていないのか？
→どうしたらこのページにコンテンツが表示されるのか？

　必要となるものは、明確なメッセージ、的確なイメージ、そしてアクションボタンです。

※ [見落とされがちな「エンプティステート」のUXデザインが、実際は一番重要なのかもしれない](https://jp.techcrunch.com/2015/11/25/20151122the-most-overlooked-aspect-of-ux-design-could-be-the-most-important/)

**【個人的所感,疑問点】**

ホーム画面とチャット画面両方に必要。
記事には、そっけない文よりも、ユーモアを含めるなどして特徴のあるテキストやイメージにするのが望ましいとあるが、VOLBOX VCのコンセプトやストーリー性とかけ離れてしまっては元も子もない?

- エンプティステートテキスト案

※ [emptystat.es](https://emptystat.es/tagged/mobile)

※ [Empty State をまとめてみた #Zaim](https://blog.zaim.co.jp/n/n15d575eefb66)

---
- **通知モーダル**

ユーザーにとってプッシュ通知の必要性が理解できないままそれを問答無用で「許可」しようとはまず思いません。いきなりあのアラートが現れたら怪しんで「許可しない」を選ぶのは当然の心理ではないかと思います。

そのためにも、いきなり許可を求めるのではなく、納得感のある適切な時期を設計する必要があります。


- **望ましくない通知モーダル**

#### 1.どんな情報がPush通知で送られるのか分からない
Push通知のダイアログをDLした**起動直後**や、**ウォークスルーの前**に表示することは、「どんな情報が送られるのか」がユーザーに全く伝わらないため、基本的に避けるのがベストです。

#### 2.情報の質が低かったり、通知の頻度が高い


上記の画像のように、数分間に同じような内容が連続で通知される場合、一つ一つの情報の違いが分からず、Push通知で送られる情報に対しての質が低いと捉えられ、結果的にPush通知の許可を後で外されてしまう可能性があります。


また通知内容をタップしたら、**どこに遷移されるのかをユーザーにイメージさせる**ことも重要です。上記の通知をタップしてどの画面に遷移できるか予想ができますか？ 無理矢理DAUを上げるようなPush通知施策も、許可を外されてしまう要因になります。

- **良いPush通知例**

#### 1.Push通知で送られる情報が直感的に分かる by LIPS

LIPSはPush通知のダイアログを出す前に、モーダルでどんな情報を送るのか、Push通知を許可することでどんなメリットがあるのかを分かりやすく伝えています。

またビジュアル面において、実際にONを押す自身をイメージさせることによって、認知負担の低減と画面が切り変わったときでも、スムーズに許可ボタンを押してもらえるような導線にしています。

#### 2.Push通知の許可を促す導線 by Tinder

仮にユーザーがPush通知のダイアログで**許可をしなかった場合でも**、よく利用される機能・画面でPush通知の許可導線を配置することは重要です。

その点でTinderは良い例です。マッチングアプリにおいては、相手からのメッセージは重要なリテンション要素の一つです。そのメッセージをすぐに受け取るために、Push通知の許可がOFFになっている状態では、チャット画面の上部にPush通知の許可導線を配置しています。

また文言も、「彼女からメッセージが届いたらすぐわかるように」と書かれているように、Push通知を許可することでどんなメリットがあるのかを、強くユーザーに訴求しています。

--
#### モーダル表示タイミング例

- **新規登録完了後(有益性を工夫して伝える。LIPSみたいな。)**

- **プッシュ通知が必要な機能にユーザーが初めてアクセスしたとき**

- **何回めかのアプリ起動直後（ユーザーがアプリの概要を理解し、継続利用し始めたと思われる時期）**
これは正直微妙な感じがする。。

- **ユーザーが初めて誰かに返信を送った際**
「プッシュ通知の許可をすることで、相手からの返信を通知で受け取ることができます。」と言った説明とともに許可を求めるアラートを出してあげると、納得感を得られやすいのかなと思います。

これでいうと、
**・メッセージ送受信時
・ボイチャルームへの招待送受信時
・グループへの招待送受信時**

この上記3つの中でユーザーが一番初めにアクセスしたタイミングで通知を許可してもらうモーダルを表示すると良いかも。
（ただ、これ工数がかかりそう、、**要相談**、、)

**マイクとカメラへのアクセスを許可するモーダルを表示するタイミング**

これもマイクとカメラが必要な機能に初めてユーザーが初めてアクセスしたタイミングで表示するのが良いと思う。
つまり、VOLBOXでは

**・フレンドに通話を掛ける時
・フレンドから通話が掛かってきて、それに応答するボタンを押した時
・QRコード読み取り時**

この３つの中でユーザーが一番初めにアクセスしたタイミングで表示。
これも工数がヤバそうなので**要相談**。

---
## 競合分析

### Discord


機能数が多いDiscordでは、まずユーザーに何がしたいのかを選択させるが、結果的にはどの選択をしても、招待コードを入力させる画面に遷移。
　個人的な推測では、このページで機能や使い方を説明したかった。ただ、方法として、受動的なウォークスルーを採用しても、ただ読み飛ばされてしまう。そこで本当は意味を成さないボタンをわざわざ置くことで、
、かつ、ボタンを選択する必要があるユーザーは自然に能動的になる。すると、結果的にアプリの機能紹介ができ、かつ読み飛ばされる必要もない。

ただ、他のフレンドから招待コードをもらってDiscordをダウンロードするユーザーは果たして全体の何割いるのか疑問に感じた。それらのユーザーにとってはただUXを悪化させるページでしかない。
そのURLを打ち込む画面で”持っていない”ボタンを押すと、エンプティステートが表示される。
”Wumpus(おそらくDiscordのキャラ)が友達を待っている。考える必要はないよ！”とDiscord特有のユーモアを含めたメッセージとCTA(Call To Action:行動喚起)であるフレンド追加ボタンが表示されている。この画面は完璧だと思う。

--


ハンバーガーアイコンを開くと出現する、はてなアイコンをタップすると、ここでサーバー,チャンネル,DMの説をするウォークスルーが出た。
フレンドもサーバーもないスカスカの画面からは何もわからないため、優しい気遣いだと思う。これも、初期アプリ起動時ではなく、必要な時に教えてくれる設計、これをVOLBOX VCでも採用したい。

--


細かいが、ハンバーガーアイコンを開いた画面で、しばらく止まっていると、"サーバを追加してみよう！"の吹き出しが出た。初期起動時にコーチマークで重要な部分の使い方は表示したい、と考えていたが、こうした必要な時にさりげなくサポートするようなオンボーディングが個人的には好印に感じる。

2枚目~5枚目は確認できたエンプティステート。
ユーモアが効いたメッセージは一枚のみだが、全てのイラストがなんとも言えないユルさで、本来ユーザーにとって負の感情を持たせがちな画面の雰囲気を明るくしている。あとは、この方法がVOLBOX VCに馴染むか、かな。

--


### パラレル
---

## 参考記事

### 事例系

- [様々なアプリの初回起動まとめ|RYO|Note](https://note.com/eraser/m/m485ef1907cee)

### アンサー系
- [アプリの初回起動時の体験設計を考える|Goodpatch Blog](https://goodpatch.com/blog/app-to-start-ux/)

### オンボーディング
- [オンボーディングまとめてみた|あき|Note](https://design.zaim.co.jp/n/n48ed5915f2dd)

### 種類紹介,解説
- [UIデザイナー必見！ アプリの導入画面で使われる主な４つの手法|hajipion.com](https://hajipion.com/1358.html)

- [UserOnBoarding](https://www.useronboard.com/)
　様々なサービスのオンボが大量に紹介されている。

### 追加したいリスト
- ウォークスルー
VOLBOX VCの価値とは

・パラレル
ゲーム音が下がらない通話アプリ
スマホ用高音質ボイチャアプリ
立体音響で上下左右の音が聞き分けられる
友達の今のステータスがすぐにわかる

パラレルが優れていない部分は？

・Tic tok
世界をリードするショートムービプラットフォーム
見つけよう、次の瞬間を
Make your Day

・Bunch
Play games over video chat

・VOLBOX VC
かっこいい、イケてるナウいデザイン
クイックルーム,ボイチャルーム
スマートに

ボイスチャットアプリ
ボイチャアプリ
通話アプリ

プレイに集中できるボイチャアプリ
プレイも通話もスマートにできるボイチャアプリ
ゲーム画面から操作できるボイチャアプリ

VOLBOX-ゲーマーのためのボイチャアプリ
VOLBOX-ゲーマーのための

ゲーム特化型通話アプリ
Group Video Chat & Party Games

- エンプティステート

- 通知モーダル