スマホアプリのヘルプ画面。ご利用は計画的に。 | 株式会社NONAME Produce(n2p)

n2p blog

キャンペーンやSNSの
“ためになる”情報を
執筆しています。

更新日:2022.01.10 (公開日:2013/11/01)

スマホアプリの起動時に出てくるヘルプ画面。
僕なんかは、ふんふんとスルーしてしまうのですが、制作目線で見なおしてみました。

なんのためにヘルプ画面があるか

これからのアプリ操作をワクワクさせる
気付きにくい機能や競合アプリとの違いを見せる
インストール後にもう１アクション（会員登録）が必要なので、後押しする
の３つの場合が多いです。
すでにアプリをインストールしているので、なんのアプリなのかや基本的な説明は不要!
インストール時点で差別化ができている（本当はこっちが望ましい）場合もいらなくて
ヘルプ画面を入れるか入れないか悩むなら、入れなくて良いと思います。

ヘルプ画面の様式美に沿う

よくあるパターンにはめ込んだほうが、迷わずにユーザーが使えます。
カルーセル（スライダー）で複数枚の画像を表示
画像は１枚で１トピックスを解説するフォーマット。

アプリによっては、画面下部のボタンが「ログイン（スタート）」だったり「次へ」だったりで異なります。
ヘルプ要素が強いなら「次へ」、イントロ要素（ワクワク演出）ならスキップしやすいほうが良いかな。

事例でみるいい感じのヘルプ画面

Sumally

物欲SNSのSumally
実際のアプリ画面とアプリで出来ることを紐付けて説明しています。
各スライドごとに、使用するボタンを強調しているので、操作説明も兼ねています。
新規で制作する画像も少なく、まさに王道です。
王道故に、真似するときは、アプリの操作感とアプリで出来る事（フロー）が練りこまれてないと散らかるなー。
Any.do

タスク管理アプリのAny.do
まず、シンプルな起動画面が出て、その後視点が引きになりアニメーションが始まります。
利用シーンに合わせて、背景の風景が変わっていき、アプリがON/OFF問わず生活のあらゆるシーンで使えることを表現します。
タスク管理アプリなので、シンプルなUIが好まれます。
その一方で使ってる楽しさ、ワクワク感が伝わりにくいのでその点を補助する効果的な演出です。
今後、ユーティリティに限らず、フラットデザインよりのものが増えていくにつれ
ワクワク感は減っていくので、要チェックポイントです。
OneNote

最近デザイン面では、Apple様に勝ってる気がするマイクロソフト様のメモアプリです。
背景をベタ塗り（フラット）一色にして、スライドごとの区切りがない。
使っているイラストも、アイコンと同じテイストにして全体をコントロールしてるなどで非常にラージ感がでています。
緻密な設計とマイクロソフトのブランド感で成立してるデザインですが、安心感があって良いです。
iQon

これまでの説明と矛盾していますが、「どんなアプリなのか」を丁寧に説明しています。
これは、iQonがSNS経由でのインストール＝どんなアプリなのか分からないけど、友達が使ってるからインストールしてみたなどのケースが多いからなのではと推測しました。例外ですね。
インストールの経路とか気になる。
各スライドの背景が連動してるとか小ワザがかわいい。
nohana

アプリの差別化ポイント（自動編集）をかわいいイラストで説明しています。
イラスト下の隙間が気になるけど、これはAndroidやIphone4S辺りを意識してるのかな
Miil

料理紹介アプリのMiil
ヘルプ画面ではないのだけど、かわいかったので紹介。
アイコンのスマイル君を、サイトのナビゲーターに活用しています。
突然キャラクターが出てくると、オフィスのイルカかよ！ってなるけど
アイコンは既に見てるので、違和感なく溶け込んでいます。うまい！