モバイルアプリのデザインを美しく仕上げる7つのメソッド

Repro Journal編集部
Repro Journal編集部
2021.03.05
モバイルアプリのデザインを美しく仕上げる7つのメソッド

目次

有名なモバイルアプリは、誰でも作れそうなくらいに分かりやすいデザインをしています。 もちろん、それは間違いではありません。何かを美しくデザインするには多くの作業が必要です。モバイルで美しさを創造するためにデザイナーが使用するデザイン要素には、フォーカスと拡張の2種類があります。

デザイン要素にフォーカスすることは、効率性と関連している

多くのアプリ事業者は、フォーカスして自由にデザインする要素は5つあると考えています。

1.オンボーディング

オンボーディングのデザイン要素のゴールは、ユーザーが登録をする前に、彼らにアプリの価値を提供することです。

面白くて楽しい、今後友人になるかもしれない人に出会ったときのことを想像してみてください。あなたは出会ってすぐにその人の年齢やメールアドレスなどの個人的な情報を聞きましたか?そんなことはないと思います。

モバイルでも同じです。人はモバイル製品を使用する前に、その製品に価値があるかどうかを考えます。その製品の何が、どのように役に立つのかを知りたいのです。個人情報を入力してもらう前にアプリストアの説明、広告、スクリーンショット、ビデオチュートリアルを最適化することは重要です。

オンボーディングのデザイン要素によって、そのモバイル製品が役に立つとわかった時に、その人はユーザーになります。そこから彼らの期待値を満たす、もしくは期待を超えるようなサービスを我々は提供する必要があるのです。ここで、シングルタスクのデザイン要素が重要になってきます。

2.シングルタスク

シングルタスクのデザイン要素は、ユーザーがやりたいことにフォーカスできるように彼らをコントロールします。

他人とのやりとりを想像してみてください。注意を向けていることを示すために、あなたは何をするでしょうか?相手がこちらに注意を向けていないのはどんな時?その時あなたはどんな気持ちになりますか?

モバイル製品も私たちのこのような行動を模倣しているのです。あまりにも多くの選択肢や、無関係のオプションを相手に提供すると、躊躇と混乱を招き最終的には利用されなくなってしまいます。ユーザーがタスクを完了するのが簡単になればなるほど、戻ってくる可能性は高くなるのです。そうすることで、アプリに親しみやすくなり、役立つようになります。一度そうなってしまえば、それを彼らの生活に欠かせないものになるのです。

一方で、優れたモバイル製品は、ユーザーがあるタスクから次のタスクに簡単にナビゲートできるようにする必要があります。それが、次にご説明するナビゲーションのデザイン要素が果たす役割です。

3.ナビゲーション

ナビゲーションのデザイン要素は、しばしば隠されていたり、シングルタスクのデザイン要素を重視するために見えない場所に配置されています。

ほとんどの場合、ナビゲーションに関してはレス・イズ・モアの概念を適用しますが、まれに複数レベルのナビゲーションが必要になることもあります。利用者の経験は提供者の経験と大きく異なるという点で、Airbnbはその良い例です。

アプリ設計者は、ユーザーが製品をどれだけ効率的に使用するかを判断するために、ナビゲーション要素を改良することに多くの時間を費やします。使いづらいという一般的なレビューは、デザインがうまくいっていないことが原因です。

使いづらいというレビューよりも最悪なのが、クラッシュやその他の誤動作についての不満のレビューです。効率性のデザイン要素は決して無視できません。

4.効率性

人はうまく動かない製品に時間を費やすと、時間を浪費したと感じ、不満を撒き散らし、やがてその製品を使うのをやめてしまいます。

初めてモバイルアプリのデザインを行うチームは、アプリもWebページのように働くと勘違いするため、効率性のデザイン要素の重要性を過小評価することがあります。Webでは不具合が発生した場合は、いわゆるパッチで数時間以内に修復できますが、モバイルではそうではありません。アプリストアの承認などエコシステムの制約があるため、修正するには数週間かかることがあります。

会社への製品コストは、数週間に渡るネガティブなレビュー、ユーザーの離脱、売上の喪失などによって被害を受けるでしょう。

5.ジェスチャー

まれに、革新的なジェスチャーが大流行することがあります。Instagramでは、画像をダブルタップすると自動的に「いいね」することができ、マッチングアプリのTinderでは写真を右にスワイプすると「興味あり」になり、左にスワイプすると「興味なし」です。

しかしながら、私たちはモバイル端末で行うジェスチャーには決まった法則があることを期待するようになりました。ワンタップはボタンを押す、二本指でズーム、右スワイプはアイテムの削除、下へ引っ張ると更新、といったものです。

新しい旅行アプリで、利用する飛行機を探しているのを想像してください。欲しい航空チケットを見つけたので、それをタップします。何が起こると思いますか?もしそれが起きなければ?他のことが起こったらどうしますか?

デザイン要素を拡張することは、コンテキストに関係している

オンボーディング、シングルタスク、ナビゲーション、効率性、ジェスチャー、いずれのデザイン要素の場合でも、効率性をもたらします。これらの要素は単純で予測可能な操作ルールを確立し、ユーザーの信頼を獲得するのです。するとユーザーはより多くの期待を持ち始めます。デザイン要素の拡張が個人情報にアクセスする上で必要になるのです。デザイン要素の拡張には2つのタイプがあります。

1.プル(引き出し)

プルのデザイン要素は、連絡先、写真、位置情報などユーザーの個人情報にアクセスするための許可を求めます。個人情報を利用する上で、デザイナーがなぜその情報を必要とするかについて、ユーザーに対して明確にする必要があります。そのためにはコンテキストが鍵です。

Instagramの例を見てみましょう。このサービスは、写真を撮ったり保存する機能がなければ意味がありません。なので、ユーザーの写真にアクセスすることは、すべてのユーザーにとって最初のステップの1つです。一方、友人と写真やビデオをシェアすることは、Instagramを使用している誰もが使いたい機能ではありません。したがって、ユーザーの連絡先にアクセスする権限は、ユーザーがシェアしようとしている場合にのみ要求されます。

ユーザーの個人情報へのアクセス権を取得することは大きなステップです。そして、いわゆるプッシュ通知の送信の許可はさらにハードルの高いステップになります。

2.プッシュ

プッシュ通知を正しく使うと、アプリのデザインをシンプルに保つことができ、ユーザーがアプリを直接利用する必要がなくなります。

Facebookの例を見てみましょう。友だちの誕生日を知らせるプッシュ通知は、誕生日のお祝いを思い出させます。 さらに、友だちの誕生日を知るために、フェイスブックのアプリを開く必要がなくなりました。プッシュ通知は、アプリをいつ使用すべきかを教えてくれます。

実際プッシュ通知機能は強力なので、Leanplum、Mixpanelなどの企業は、プッシュ通知の利用を最適化するためのサービスを提供しています。

さて、あなたはどうすべきか

もし、あなたがモバイルアプリをデザインしているのであれば、するべきことは次の通りです。

  • 製品を一般ユーザーに説明します。
  • ユーザーが達成したい最も重要なタスクが何かを見直します。その過程で何かが邪魔になっていませんか?
  • すべての主要機能が確認できるようにナビゲートします。何かを切り替えるとき、2回以上タップする機能にする必要がありましたか?
  • アプリにある複数の機能をできる限り素早く行き来してください。使いづらさを感じますか?それなら画面が読み込まれるまでに時間がかかったり、アプリがクラッシュしている可能性があります。もしそうでなければ、問題ありません!
  • ユーザーの体験をパーソナライズするために、ユーザーから取得すべき権限を2、3個リストアップします。
  • これらの権限を求めるのに最適な場所とタイミングはどこですか?
  • これらの権限を要求する前にユーザーが何をしているかを確認してください。オンボーディングの過程や簡単なタスクの完了など、デザイン要素との関連性を見つけられますか?

企業にこれらをどのように適用するかも含め、モバイル事業で成功するための方法の詳細については、著書であるmobilized: an insider’s guide to the business and future of connected technologyをご覧いただくか、scmoatti.comを訪れてください。

この記事は、 LinkedIn 上の記事 “ Mastering Mobile Design: Focus vs. Expand (excerpt from “mobilized”) “を著者の了解を得て日本語に抄訳し掲載するものです。Repro published the Japanese translation of this original article on   LinkedIn in English under the permission from the author.

Webとアプリの
売上最大化ツール
「Repro」

資料ダウンロード お問い合わせ

Webとアプリの
売上最大化ツール
「Repro」

資料ダウンロード お問い合わせ

PAGE TOP