人気のモバイルアプリに共通する11の画面 | アドビUX道場 #UXDojo

連載

エクスペリエンスデザインの基礎知識

成功しているモバイルアプリには共通点があります。まず、独自性を持ちつつ、馴染みやすさも兼ね備えています。そして、ユーザーが生活の中で求めたり必要としている何らかの価値を提供し、数分の間、彼らをアプリに引き込みます。でも、それだけではありません。

時には、人気アプリの類似性ははるかに具体的なものです。たとえば、同じような画面を使って、特定の機能やコンテンツを提供しています。今回は、11個のそうした画面を取り上げ、順番に分析してみましょう。

1. 「はじめに」表示される画面

ほとんどの場合、アプリを最初に起動した時「はじめに」表示される画面は1つの画面ではなく、ユーザーがスワイプして進む一連の画面で構成されています。下の画像はTallyというアプリの例です。

初めて使うユーザーを手助けする上で大切なのは、まずアプリとその目的を紹介し、そしてアプリのごく基本的な機能だけ紹介することです。いっぺんに全機能を紹介しようとするなら、ユーザーの気持ちを盛り上げるより、しらけさせかねません。

さらに、ジェスチャーなど新規ユーザーには明確ではない可能性のある操作方法がアプリに採用されている場合は、紹介する順序がよく整理されていることがさらに重要となります。

2.「ニュースフィード」画面

「ニュースフィード」は、Instagram、Facebook、CNNなどのアプリのホーム画面に見られます。その目的は、アプリ内に最近のアクティビティを表示することによって、ユーザー自身をそのアクティビティに参加させようとすることです。「何ができるのか」を提示するのです。

特にこれをうまくやっているのがInstagramです。Instagramのストーリーという機能は、ユーザーの対話を促すことにピンポイントで焦点を合せています。Instagramのストーリーでは、ユーザー自身のプロフィール画像が最近公開されたストーリーの横に表示されます（上の画像参照）。これにより、ユーザーに独自のストーリーを追加するようさりげなく促しています。

3.「目的を達成する」画面

今日のアプリデザインのトレンドは、コンテンツ中心の考え方です。つまり、それが何であれ、アプリが提供する主要機能にユーザーが簡単にアクセスできることが重要なのです。

中には、このルールを極端に捕らえて、起動後にホーム画面を飛ばして、直接「目的を達成する」画面に進むアプリもあります。

ScannableやWallyといったアプリがその例です。どちらのアプリも、直接「主要機能」画面が起動する仕組みです。Scannableの場合、起動直後にドキュメントをスキャンできるようになっており、デバイスのカメラを通してスキャン可能なドキュメントを探し始めます。Wallyの場合は、支出を直ぐに記録しはじめられるようになっています。

ユーザーがアプリ利用時間の99パーセントを何に費やしているのか考えてみしょう。もし当てはまるものがあれば、それを「主要機能」画面にするのです。

4.「新機能」画面

「新機能」画面は、アプリを最初に起動したとき「はじめに」表示される画面と似ていますが、最新の更新でアプリに追加された機能、つまりアプリの進化のみに焦点を当てたものです。これは、更新された新機能をユーザーに教え込み、その利点を得られるようにするために非常に役立ちます。

画面への表示方法は、「はじめに」表示される画面と同じようにできます。おそらく同じであるべきでしょう。

これは、Adobe Spark Postの例です。

5.「ユーザーの進捗」画面

「ユーザーの進捗」（または「ユーザーの経過」）画面は、ユーザー個人のこれまでの経過と目標の達成度に関する画面です。目標の達成が、ユーザーの総合的なアプリ体験において重要な場合に使われます。

語学学習アプリDuolingoを例として見てみましょう。以下はアプリのメイン画面です。学習プロセスの個々のステップに沿って語学学習課程を修了できるよう、ユーザーを導いています。

他の例には、人気の瞑想アプリHeadspaceがあります。このアプリでもほぼ同じやり方で「ユーザーの進捗」画面を使用しています。それぞれの瞑想セッションが、次のセッションに進む前にユーザーが完了しなければならないステップになっています。

6.「テンプレート」画面

ユーザーが何かを達成するアプリには、学習期間が存在します。完了までの複雑さに応じて、学習の難易度は、公園の散策のような容易なものもあれば、急坂を登るような厳しいものもあります。

そのような場合、「テンプレート」画面を使用することで、ユーザーのアプリの使いはじめを容易にし、質の高い結果を得るまでの苦労を軽減できます。アプリの特性に関わらず、空のキャンバスから始めるよりテンプレートから始めるほうが常に簡単です。

これは、Adobe Spark Postの例です。テンプレートは様々なカテゴリに分けられて提供され、ユーザーはテンプレートをタップ1回すれば、そこから作成を始められます。

7.「ショートカット」画面

アプリが多数のコンテンツや機能を提供している場合、「ショートカット」画面が役に立ちます。ユーザーが独自のショートカットを追加できれば、幾つものメニューを辿らなければならない状態よりは便利になることでしょう。

これを実践している例にはEvernoteがあります。ショートカットは、アプリのメインメニューから素早くアクセスできるようになっています。

まだスペースが余っている場合や、そもそもユーザーがショートカットを追加していない場合は、最近使用した項目や頻繁に使用する項目の表示にも使えます。

8.「プレミアム勧誘」画面

「プレミアム勧誘」（または「アップグレード」や「購入」）画面は、フリーミアムモデルで制作されたアプリや、追加機能を有効にするマイクロペイメントを採用するアプリに使われるのが一般的です。

この例として、1Blockerアプリを見てみましょう。この「プレミアム勧誘」画面では、次の事項が達成されています。

9.「検索」画面

「検索」機能はほとんどの実用的なアプリではあたりまえの機能ですが、専用の「検索」画面を設けることが非常に役に立つ場合があります。

Google Driveアプリはそれを実践している良い例です。よくある検索フィールドとは別に、利用可能なファイル形式のリストや、最近変更されたファイルをフィルタする項目が用意されています。

独自の「検索」画面を作成する場合は、ユーザーがアプリで最近検索した項目や、頻繁に使用されているアプリの要素を表示することも考慮するとよいでしょう。

10.「ユーザープロファイル」画面

「ユーザープロファイル」」画面は、ユーザーアカウントを扱うアプリであれば最も欠かすことのできない画面のひとつです。ただし、優れた「ユーザープロファイル」画面は、パスワードを変更するだけの場所ではありません。次のように、考慮すべき要素はいくつもあります。

そして、もちろん、言うまでもなく、ユーザーがアカウントのすべての詳細を編集でき、プロファイル写真を追加できるようにするべきです。

11.「個別項目」の画面

これは、ユーザーがアプリが扱うアイテムを操作するときに表示される画面です。Podcastアプリで例えるなら、1エピソードを表示した画面です。電子書籍リーダーアプリなら1記事を表示した画面、タスク管理アプリであれば、ある1つのタスクを表示した画面です。

アプリの目的に応じて、「個別項目」の画面に表示されるべき要素は異なります。しかし、その画面に何を含めるかを判断するのは、問題の半分にすぎません。

「個別項目」の画面は、配置と特定の機能を強調することで、ユーザーを最も重要な機能に誘導する画面です。ユーザーにアプリの最善な操作方法を教え、そのため、全体的なUXに影響を与えます。たとえばAudibleでは、再生/一時停止と早送り/巻き戻しオプション、すなわち、おそらくオーディオブックで最も頻繁にユーザーが行うであろう操作に焦点が当てられています。

終わりに

モバイルアプリの優れたユーザー体験を設計するというのは、初めてのユーザーの期待に応えることと、アプリでユーザーが得られる興奮を維持することの間に、調度よいバランスを見つけ出すことです。

それを実現する上で、ここで紹介したそれぞれの画面は重要な役割を果たす場面があるでしょう。制作しているアプリの種類に応じて、ある画面がほかの画面より重要になることでしょう。

最終的には、これは、どの機能グループをユーザーに提供すべきかを予測するゲームです。たとえば、特定のタスクを順番に実行して欲しいのであれば、「ユーザーの進捗」画面が役立つかもしれません。もしコミュニティ主導のアプリであれば、「ニュースフィード」画面の方が良い選択かもしれません。

この記事はThe 11 Screens You’ll Find in Many of the Most Successful Mobile Apps（著者:Karol K）の抄訳です