BLOG



スマホアプリ立ち上げ時の機能・操作説明のチュートリアル画面まとめ

こんにちは、シナップの小茅です。
夏ド真ん中、蒸し蒸しした暑い日が続いていますね。
外でアクティブに行動するもよし、家で涼しみながらのんびるするもよし。
どちらにせよ夏は特に様々なシーンでスマホアプリにお世話になる機会が多いのではないでしょうか。

アプリを初めて立ち上げた際、アプリの機能紹介や操作説明などのチュートリアル画面をよく見かけますが、その方法は様々です。
ちょっとしたアプリ紹介とあわせて、ポイントとなる機能や操作説明を押さえたもの、美しいデザインのものなど、いくつかのチュートリアル画面をピックアップしてみました!

Moneytree

Moneytree - 賢いお金のアシスタント

iTunes - Apple
screen

お金を扱うアプリだから信頼と安心がないと使えません。
Moneytreeのチュートリアルではその2つをうまくクリアしているなと思いました。
説明が多くなってしまいそうな商材ですが、機能のポイントをうまく抽出して横スライドで見せています。

Flipboard

Flipboard: あなたのソーシャルニュースマガジン

iTunes - Apple
screen

雑誌をめくるような操作感が気持ちいいFlipboard。
初めて立ち上げた時に、読みたい記事のカデコリを選択するのですが、そこからの「めくり」がこの先のワクワクを増大させます。
横スライドの操作説明が完了しても、記事を読みながら「ここをタップすると○○します」といった要所の説明も入るのでとてもわかりやすいです。

Clipchat
screen

デザインが美しいのでピックアップしました。友達と5秒の動画や画像を共有できるアプリです。
セキュリティを意味する写真のモザイクが、いい具合に雰囲気があってキレイです。
チュートリアル画面では、長い説明はなくシンプルな操作説明のみで試したくなります。

Vyclone
screen

複数のデバイスで撮影したビデオを自動合成、また共有してくれるアプリです。
例えばこの夏、ビーチバレーなんかした時に複数人がとったビデオを自動編集、来られなかった友達に楽しさを共有する、なんて時にも活躍しそうです。
個人的にはロゴといいUIといいドンピシャでした。そして何より立ち上げ時のアプリ紹介が素晴らしいと思いました。
珍しく縦スライドで、アプリのUIから少しかけ離れているような手書きイラストなのですが、アプリを使う前のドキドキするような気持ち、面白いシーンを共有する楽しさを導入にもってくることで、アプリの期待感が増すように設計されているのだなと感心しました。
※ちなみに、このアプリをリリースしたのはスティングの息子さんだそうです。バンド経験からうまれたアプリです。

Beehive Weather

Beehive Weather

iTunes - Apple
screen

操作感が楽しい六角形をモチーフにしたお天気アプリです。
余計な説明は一切なしのタップ、スワイプなどのイラストが引き立つチュートリアル画面。
とてもシンプルで感覚的にお天気情報を得ることができます。

City Guides by National Geographic

City Guides by National Geographic

iTunes - Apple
screen

ナショナル・ジオグラフィックによるシティガイド(ロンドン、パリ、ローマ、ニューヨーク)です。
こちらもデザイン、写真が美しかったのでピックアップです。
簡単な機能紹介のスライドですが、図を作り込むことでアプリの世界観と美しさ、そしてその機能がよく伝わります。

Groceries - Smart Shopping List

Groceries - Smart Shopping List

iTunes - Apple
screen

購入品目リストを管理するアプリです。忘れっぽい人の時間とお金を節約するために最適ですね。
iOS7を意識したフラットでシンプルなデザインになっています。
機能が単純明快なものなので、チュートリアルも実際の画面上にわかりやすい図示のみで、何も考えずすぐにリスト管理ができて良いですね。

Field Trip

Field Trip

iTunes - Apple
screen

グーグルの地域ガイドアプリ『Field Trip』。iOS版も使えるようになりました。
自分のいる場所から、ショップやレストラン、史跡など興味深い場所に近づくと通知を送ってくれます。
チュートリアルでは実際にバイブ機能が働き通知を実感することができました。単純なことですが、「まさにこうやって通知が届くのか!」と感心してしまいました。

Grid Lens

Grid Lens

iTunes - Apple
screen

フレーム数が選べてリアルタイムに撮影することのでききるアプリです。
「なんかとても楽しい...」その楽しさを増大させているのは間違いなく優れたデザインだと思います。
チュートリアル画面でも操作説明を楽しく図示化、すぐにオリジナルな写真が作れます。また保存する時や何かのアクション時に吹き出しコメントが出てくるので、助かりつつデザインの遊び心を感じられ良いです。
※例えば、保存したい時、ボタン上に「tap to Finish!」、保存されたら、変なキャラクターらしきものが「yummy!」とつぶやいたり..

PicCollage 写真コラージュ

PicCollage 写真コラージュ

iTunes - Apple
screen

写真の編集や加工を楽しく簡単にコラージュできるアプリです。
機能をひとつづつアニメーションで紹介してくれます。編集時をイメージさせるのですぐにコラージュができそうです。
こういった編集アプリは文字の説明よりアニメの方がすぐに覚えて良いなと思いました。

さて、いかがでしたでしょうか?
この他にもたくさんのチュートリアル画面がありますが、アプリを使う前に、堅苦しい説明があるととっきずらく、かといって何もないと使いこなせなかったりとなかなか奥が深いですね。
どのアプリも「どのように見せたらユーザーがわかりやすいか?」を大前提として、アプリの世界観を含めて非常に工夫をしているなと感じました。
一番最後に取りかかるデザインになりがちですが、はじめての"とっつき"がユーザーのみなさんとの素晴らしい出会いとなるよう制作していきたいと改めて思いました。