スマホアプリを
ビジネスに活かすブログ

まとめ アプリUI スマホアプリ制作 スマホアプリ開発
2016年08月28日
  • このエントリーをはてなブックマークに追加

アプリ企画者必見!ユーザ離脱を防ぐチュートリアル制作に役立つアプリ20選

アプリ企画者必見!ユーザ離脱を防ぐチュートリアル制作に役立つ20選

スマホアプリをインストールすると初回起動時にアプリの簡単な概要や機能説明、使い方説明などが表示されることがあります。
よく「チュートリアル」と呼んだりしますが、正確には左右に画面をスライドして表示する手法のことを「ウォークスルー」と言います。

1回しか出ないのでなかなか強く記憶には残らないかもしれないですが、アプリのファーストインプレッションに大きく影響するので、伝える内容はもちろんですが、それが与える視覚的、感覚的印象も同じくらい重要となります。

「ユーザにアプリの使い方を学習させるためのUI」にはいくつか種類があって、他にも「コーチマーク」など通常画面上にオーバレイしてボタンや操作を順にポップアップなどを使って説明していく手法などもあるのですが、今回はウォークスルーを採用しているアプリの方が最近は多いと感じるのでそちらのタイプをメインに紹介していきます。

※ウォークスルーがあまり一般的でない点、様々な意味を含む点を考慮し、今回はチュートリアルと表現します。

一歩間違えると、早く使いたいのに邪魔に思われてアプリから離脱されかねないチュートリアル、導入した方がいい、導入するならどんなものがいいかは一概には言えず、アプリタイプ、ユーザタイプによって検討する必要があります。
アプリタイプ別に有名どころのアプリを例に紹介していきましょう。(iOS版のみ)
いろんなタイプを目にしておくだけでもアプリ制作時のヒントになるかもしれません。

ニュース系アプリ

ニュース系アプリは基本的に閲覧メインですので、使い方を説明するまでもないものが多く、有名アプリでもチュートリアルがあるものは少ない印象です。
アプリ内容が単純な場合は、無理にチュートリアルはつける必要はないでしょう。
逆に面倒と思われ、離脱されるリスクが高まってしまいます。

SmartNews

説明は最初の1枚のみで、続いてプッシュ通知の説明、アプリ内ではページのめくり方をレクチャーするタブが初回のみ表示されます。
要はこれだけでプッシュ通知を設定してもらって、SmatNews風とも言われる特徴的なページのめくり方を理解してもらえさえすればOKということなのでしょう。
アプリに慣れていない人用にはチャンネルの追加方法などもっと説明したいところかもしれませんが、慣れている人にとってはこの3枚だけでも鬱陶しく感じさせてしまうかもしれません。
バランスがとても難しいところですが、基本的にはなるべくそぎ落としてシンプルにすべきです。

smartnews_1 smartnews_2 smartnews_3
出典:SmartNewsアプリ


Ameba、NewsPicks

こちらもプッシュ通知設定をちゃんとしてもらえるように最初にでるのはその説明のみです。
アプリコンテンツ上にオーバーレイ表示されていることでユーザにすぐにコンテンツにたどり着けるというイメージが与えられています。

ameba_1ameba_2
出典:Amebaアプリ

newspicksnewspicks_1
出典:NewsPicksアプリ


グノシー

こちらもプッシュ通知と、GPSをONにするように促すダイアログが2枚表示されるのみで、すぐにアプリコンテンツへたどりつくことができます。

グノシー1 グノシー2
出典:グノシーアプリ


Yahoo、LINE NEWS、antenna

Yahoo、LINE NEWS,antennaアプリではチュートリアルのようなものは何も表示されず、すぐにプッシュ通知の許可ダイアログが表示され、アプリコンテンツへたどりつける構成となっていて、チュートリアル無しパターンのアプリです。
ニュースアプリのほとんどはプッシュ通知を設定してもらえれば、あとは日々更新されるコンテンツを、ユーザが閲覧したりブックマークしたり共有するというのが一般的であるため、チュートリアルは必要ないということでしょう。

仕事効率化アプリ

仕事効率化アプリの多くは多機能でさまざまな操作を必要とし、触っただけでは理解しきれないユーザもいる可能性があるためチュートリアルは必須でしょう。
表示内容としては細かいヘルプというよりはどんなアプリなのか、何ができるのか、それによってどう便利なのかをできるだけ端的に直感的に伝えたいところです。
そのため文字でというよりはイラストや写真+ポイント的な説明文(キーワード)で伝えるのがベストでしょう。

Evernote

チュートリアルといったらこんな感じをイメージする、オーソドックスなタイプです。
3枚のユーザ行動をイメージさせるイラストと端的な文章でアプリの特徴を伝えていて、その流れでアカウント作成(ログイン)画面を表示させています。

evernote1 evernote2 evernote3 evernote4
出典:Evernoteアプリ


Wunderlist

機能を実際のアプリ画面をチュートリアルに表示していると共に、同一画面でアカウント登録またはログインも行えるようにしています。

wunderlist1 wunderlist2
出典:Wunderlistアプリ


Dropbox

こちらは動的なイラスト表示によって、よくあるページめくりの操作をせずにチュートリアルを見ることができる点が特徴的です。
どこにいてもアクセスできるという”売り”を3種類の乗り物を使って表現すると共に、バックアップ、ファイル送信、共同作業という機能に関しても同時に伝えています。


出典:Dropboxアプリ

ショッピング系アプリ

minne

5枚とちょっと多めのチュートリアルでアプリの特徴や機能説明をしているタイプですが、こちらもただの静止画表示でなく動的に表示させているのでスキップされにくいのではないでしょうか。


出典:minneアプリ


ZOZOTOWN、creema

minneとは対称的にこちらはシンプルに1画面でプッシュ通知を促すもののみが表示されるタイプです。
ニュースアプリ同様、ショッピング系もユーザ操作としては、閲覧、お気に入り登録、購入(売却)など似ているのであえて説明は必要ないということでしょう。

zozotown
出典:ZOZOTOWNアプリ

creema
出典:creemaアプリ


ラクマ

実際のアプリ画面を使ったチュートリアルと短めの文章を下部に配置するスッキリした見た目になっています。
実際の画面を使うことによりアプリの特徴に加えて、どんなUIなのかもユーザに伝えられます。

5枚のチュートリアル表示の後に別途プッシュ通知の説明とその後に、「コーチマーク」と言われる実際のアプリ内での各種ボタンに順番にフォーカスをあてて説明表示をしているため、若干利用開始までに時間がかかる印象ではあります。
ただ、しっかり説明を見ればすぐに使い方は理解でき、必要ない人はタップしていけばいいのでそれほどストレスにはならないかもしれません。

ラクマ1 ラクマ2 ラクマ3 ラクマ4 ラクマ5
ラクマ6 ラクマ7 ラクマ8
出典:ラクマアプリ


Muji Passport

オーソドックスなチュートリアルですが、他アプリと比較すると若干画像、文字共に小さめの印象です。
あまり画面いっぱいに表示してもダサくなってしまいますが、小さすぎても見えにくかったりします。ターゲット層にもよりますが最適なサイズを模索したいところです。

muji1 muji2 muji3
出典:Muji Passportアプリ


メルカリ

画像+大きめの文字による文章ですが、画像自体は抽象的なものなので基本的に文字による説明になっています。
メルカリ1 メルカリ5 メルカリ2 メルカリ3 メルカリ4
出典:メルカリアプリ


ヤフオク

最初の画面で買い方、売り方を見るか見ないかをユーザが選択できるようにしています。
チュートリアルは実際のアプリ画面+説明吹き出しとなっています。
ヤフオク1 ヤフオク2 ヤフオク3 ヤフオク4 ヤフオク5 ヤフオク6
出典:ヤフオクアプリ


フリル

性別選択後、3枚のチュートリアルで機能やプッシュ通知についての説明が表示されます。
フリル1 フリル2 フリル3 フリル4
出典:フリルアプリ

ビジネス系アプリ

Slack

4画面によるスライド式のチュートリアルという点はよく見るタイプですが、Dropboxやminneのように動的な表示になっている点がストレス軽減につながっている印象です。


出典:Slackアプリ


Wantedly

サービスカラーをメインにアイコン+文章でアプリの特徴と機能を説明しています。
背景がベタ塗りではなく、画像にオーバーレイしている点が特徴的です。

Wantedly1 Wantedly2 Wantedly3 Wantedly4 Wantedly5
出典:Wantedlyアプリ

ライフスタイルアプリ

ホットペッパービューティー

利用シーンと合わせて使い方とアプリの利便性を4枚の画像で伝えています。
ホットペッパー1 ホットペッパー2 ホットペッパー3 ホットペッパー4 ホットペッパー5
出典:ホットペッパービューティーアプリ


楽天ポイントカード

7ページと画面数的にはかなり多めのチュートリアルですが、前後のページ遷移時に動的な表示切り替えがあるので見る方のストレスを軽減している気がします。


出典:楽天ポイントカードアプリ

その他

AWA

AWAは初回のみスプラッシュスクリーンのような断片的な映像のみが「START」ボタンを押すまで繰り返し表示されます。
これはかなり独特な手法だと思いますが、音楽を聴く様々なシーンを映像で見せているのですが、アプリを見てみたい、使ってみたいと思わせる感情を刺激するのにとても有効だと思います。
ただ、アプリの特性にかなり影響しているので、どんなアプリにも効果的とはいえないでしょう。


出典:AWAアプリ

参考

チュートリアルが見れるサイト

日本版ではないですが、さまざまなアプリのチュートリアルが見れます。ざっと見るだけでも参考になりそうです。
http://apptutorial.tumblr.com/

まとめ

説明がなくても触ってもらえばわかるようなアプリはチュートリアルは作らない。
多くの説明は必要ない、プッシュ通知について表示したいくらいの場合は1〜2枚(1〜2画面)で構成されている。
機能が多く説明がないと逆に使い方がわからず、離脱されそうな場合は4〜5枚(4〜5画面)で構成されている。

ある程度スマホを使いこなしているユーザーにとって、親切すぎるチュートリアルは邪魔でしかありません。
また、ユーザのリテラシーの高さ、成熟度も一定ではないため、どこまで親切にするか、またシンプルにするかを決定するのは悩ましいところではありますが、初回起動後にアプリを使ってもらえるかに関わる重要な部分なので、チュートリアル作成の有無と、アプリにとってベストな構成、UIを検討してみてください。

TOP