マーケティングに活用するためにアプリを作ろうとしている企業は多いですが、開発時に欠かせないのがアプリのデザインについての考え方。お客様にとって必要な機能をどれだけ実装したとしても、デザインがいまひとつだとユーザーに使い続けてもらうのは難しいでしょう。ここでは、マーケターなど非デザイナーのポジションの方も理解しておきたい、アプリを作る際に意識したいデザインのポイントを、まず押さえるべき基本事項からより具体的な3つの項目まで、網羅的にご紹介します。
目次
アプリデザインとは？
アプリデザインとはユーザーインターフェース（UI）とユーザーエクスペリエンス（UX）を最適化し、ユーザーにとって利便性の高いアプリを作ることです。
まずはこのUIとUXについて解説していきます。
UIとは
UIとはユーザーインターフェース（User Interface）を略したもので、直訳すると「使用者の接点」や「使用者の接触点」という意味。もう少し噛み砕いて言うと、「消費者がプロダクトやサービスに接触する部分」です。例えばAppleのMacであれば、電源を入れて出てくるメニュー画面もUIであり、そこで使われているアイコンやフォントもまたUI。さらに言えば、Macが入っていた外箱もUIと言えます。つまり、ユーザーがプロダクトやサービスを使用する過程で、目に触れたり実際に触った部分全てがUI。アプリデザインでは、スマホのメニュー画面でのアイコンや、アイコンをタップしてからユーザーが触れる全ての要素になります。そして、一つひとつのUIを使いやすくしたり、見た目を洗練させることはユーザー体験の向上に直結するので、UIを作り込むことはアプリデザインではとても重要です。
UIについてはこちらの記事もぜひ参考にしてください。
UXとは
UXはユーザーエクスペリエンス（User Experience）を略したもので、直訳すると「使用者の体験」。UIも広く捉えられる概念でしたがUXはさらに広く、「ユーザーがプロダクトやサービスを通じて体験すること全て」となります。例えば、アプリの機能やUIは満足いくものに作り上げたとしても、作りっぱなしでユーザーの要望を踏まえたアップデートがほとんどされなかったら優れたUXとは言えません。一方で、もしアプリに何らかの不都合が生じた際に迅速に修正すれば、ユーザーは「何かあってもすぐに対応してくれる誠実な存在」とポジティブに捉え、結果としてUXが向上することもあるでしょう。デザインと聞くとUIのことだけをイメージする方もいらっしゃるかもしれませんが、ユーザーの体験をどう快適にするかを考えることもまた、優れたアプリデザインには必要なことです。
アプリの基本構造
UI/UXの重要性を理解した次は、アプリデザインのファーストステップとして理解しておきたいアプリの基本構造について紹介します。
一般的なアプリの画面構成は「ヘッダー」「メイン」「フッター」の3つで成り立っています。3つそれぞれのスペースに対して何をどう配置するかを決めることでアプリの輪郭がはっきりとしていきます。
ヘッダー
ヘッダーとはheader、つまりアプリの上部にあたるスペースのことを言います。このスペースにはアプリの名前や企業のロゴなどを掲載することが一般的。また、画面右側などによく三本線のアイコン（「≡」）がありますが、これはハンバーガーメニューと言ってタップするとアプリのメニュー一覧が表示されます。アプリの使用中にユーザーがいつでもTOPに戻ったり他のメニューに飛んだりできるように、ハンバーガーメニューはヘッダーに固定させることが多いです。他にも、例えばユーザーがお会計時にすぐポイントカード画面を出せるように、カード画面への移行アイコンを常にヘッダーに置いておくケースなども。これらの例のように、アプリによってヘッダーに配置するべきものは変わってくるので、一概に正解と言ったものはありません。
メイン
ヘッダーと後述するフッターに挟まれているアプリの中央部分のことで、その名の通りここがアプリのメインとなるので、ユーザーに主に使ってもらいたい機能を配置することになります。
メインの構成方法は自由ではありますが、大きく7つの種類に分けられます。
例えば、言葉よりもビジュアルでコミュニケーションした方がわかりやすい場合は、リスト型よりもカード型にした方が良いでしょう。無印良品やユニクロのアプリではカード型を採用しています。他の例を挙げると、支払い決済アプリのPayPayではアプリを立ち上げてすぐお会計ができるように、支払い用のバーコードをタスク型で大きく配置しています。また、銀行のアプリでも立ち上げてすぐ口座の残高を確認できるようにタスク型を採用しています。これらの例のように、どの種類でメインを構成するかはユーザーの使用目的やアプリを作る企業の特性によって様々。また、7種類のうちどれか一つだけを選ばないといけないわけではなく、複数種類をミックスさせることもあり得るなど、メインの構成はヘッダーやフッター以上に自由度が高いです。どの種類にすればいいかわからないという方には、普段使っているアプリや自社の競合企業のアプリはどのようなメインになっているのかをチェックするのがおすすめ。紹介した7種類のどれに該当するかを見ていくと一層整理しやすくなります。
フッター
英語でfooterとなり、アプリ下部のスペースのことを言います。近年はスマートフォンのサイズが大きくなってきていることもあり、片手の操作だけでアプリ内を移動できるようにフッターにメニューを固定させることが一般的。ここに載せられるメニュー数には限界があるので、特に使って欲しい機能を配置することになります。よく配置される機能としては、ホーム画面に戻れる「HOME」や更新情報をまとめた「NEWS」、実店舗を持っている企業であれば各店舗情報をまとめた「SHOP」など。ただ、ここもヘッダー同様決まった正解はないので、ユーザーにとって必要なものを吟味して置くようにしましょう。
3つの項目でアプリデザインを考えていこう
ここからはいよいよ、アプリデザインについて紹介していきます。デザインをするにあたって押さえておきたいポイントは大きく「ビジュアルデザイン」「コンテンツ」「ユーザビリティ」の3つ。1つ1つご説明します。
ビジュアルデザイン
ビジュアルデザインとは、その名の通りビジュアルに関するデザインのこと。具体的には、アプリ内で使う画像や図、アイコンやボタンなどのデザインとなります。ビジュアルデザインも基本設計同様、ユーザー視点に立って作っていくことが重要ですが、その良し悪しをどのように判断すれば良いのかわからない方も多いはず。下記にビジュアルデザインを詰めていく時にチェックしたい項目例を挙げましたので参考にしてみてください。
＜イメージ＞
情報に応じた適切な配色になっているかや、全体的に色を多く使い過ぎていないかを確認します。
＜可読性＞
アプリ内のテキストは読み続けていても疲れにくいサイズや配置になっているかを確認します。
＜視認性＞
画面をパッと見た瞬間に、テキストなどを正しく認識しやすいサイズやレイアウトになっているかを確認します。なお、可読性は継続して読みやすいかに注目しており、視認性は一瞬での認知のしやすさに注目しています。
＜ビジュアル＞
アイコンやボタンを使い過ぎていないかや、メリハリのあるデザインになっているかを確認します。
＜ブランディング＞
デザインのトーン&マナーが統一されており、かつブランドの魅力を引き立てるものになっているかを確認します。
コンテンツ
「アプリデザイン」と聞くと、先に挙げたビジュアルデザインのことだけをイメージする方もいるかもしれませんが、アプリを通じてのユーザー体験価値を上げることがアプリデザインの目的なので、ビジュアルを洗練させるだけでは不十分。下記に挙げる「コンテンツ」はアプリによって得られる情報の部分で、ここの内容がユーザーの体験価値に直結します。アプリの核となる要素なので、コンテンツのデザインもしっかりと作り込んでいきましょう。
＜魅力＞
ユーザーを惹きつけ、継続的にアプリを使おうと思えるコンテンツを提供できているかを確認します。
＜有用性＞
ユーザーが満足する機能やサービスをアプリ上で提供できているかを確認します。
＜集客＞
TwitterやInstagramなどのSNSと連携する仕組みができているかを確認します。
＜登録方法＞
アプリ上で会員情報などをスムーズに登録できるかを確認します。
＜信頼感＞
アプリの提供会社や運営会社がきちんと明記されているかを確認します。
ユーザビリティ
当たり前ですがアプリはユーザーが実際に使うものなので、使い心地、すなわち「ユーザビリティ」のデザインは欠かせません。この部分に関しては、実装時に多くのプロジェクトメンバーなどにアプリを使ってもらい、そのフィードバックを得ながらブラッシュアップしていくと良いでしょう。チェックすべき項目は多く、細かくてつい見落としてしまいがちですが、ユーザーのUXにつながるのでどれも大切です。
＜アイコン＞
大きさや操作感が統一されているか、アイコンの機能がひと目で分かるかを確認します。また、実装時にはアイコンをタップした際に動作するかも要確認です。
＜アニメーション＞
画面遷移時にアニメーションが設定され、遷移していることが分かりやすくなっているかを確認します。
＜お気に入り機能＞
お気に入りコンテンツを登録できる機能があり、かつ登録はスムーズにできるかを確認します。
＜検索機能＞
コンテンツ量が多い場合はユーザーが欲しいコンテンツを検索できる機能があり、検索機能はすぐにわかるところにあるか、ストレスなく検索できるかを確認します。
＜設定＞
アプリ内の設定や保存などを完了させる時、その操作感は統一されているかを確認します。
＜フォーム＞
ユーザー情報などを記載するフォーム画面にて、文字のサイズが適切で入力しやすいものになっているかを確認します。
＜ホーム画面＞
情報を詰め込みすぎていないか、目的のコンテンツをすぐに探せるか、今いる画面がすぐに分かるかを確認します。
＜ボタン＞
サイズは適切か、ボタンと似た紛らわしいビジュアル要素はないか、ボタンのオン/オフは分かりやすいかを確認します。
＜リンク＞
ひと目でリンクと分かるかを確認します。
アプリデザインで重要な視点
イメージするときはユーザーの視点に立つことが大切
ここまでで何度かお伝えしてきたように、基本設計はアプリを使うユーザーの視点に立って考えることがとても重要。これは後述するデザインに関しても同様で、アプリ開発者やデザイン担当者の単なる好みで作るのはNGです。しかし、特に初めてアプリの設計をする方にとっては、ユーザー視点の重要性はわかっているはずなのに、考えていくとつい視野が狭まって独りよがりなものにまとめてしまいがち。そうならないためには、同じアプリ開発のプロジェクトメンバーや、プロジェクトメンバー以外のスタッフなどに率直な意見を求めるのがいいでしょう。ソフトを使っていきなり綺麗で整然とした基本設計を作り込もうとせず、まずは紙にボールペンで描いていくので十分。とりあえずラフなものを一旦作り、他のメンバーの客観的な視点を混ぜてブラッシュアップすることで、ユーザーが求めている設計に仕上げていきましょう。
もし検討中につまずく場合は
どうしてもアプリの設計が上手くいかない場合は、「そもそも」の部分に立ち返るのがおすすめ。「何のためにアプリを作るんだっけ？」「どんなユーザーに使って欲しいんだっけ？」と考え直すことでつまずきが解消されやすくなります。特に考え直すといいのはユーザーについて。ユーザー視点が大切なのにそのユーザーへの理解が足りていないと上手くいかないのは想像に難くありません。ユーザー理解をする代表的な手法として、「ペルソナ設計」が挙げられます。ペルソナ設計とは、アプリを使って欲しいユーザーを「30〜40代の子供がいる女性」などとせず、より詳しい属性や生活パターンなどを設計すること。例えば下記のような項目を詰めていくのが一般的です。
- 名前
- 年齢
- 性別
- 居住地
- 家族構成
- 職業
- 収入
- 趣味
- 休日の過ごし方
- 課題（悩み）
これらを設計する時は、自分の想像だけで作らずなるべくユーザーやユーザー像に近しい社内メンバーなどにアンケートやインタビューをしながら進めていきましょう。アンケートやインタビューがどうしても困難な場合は、例えばユーザーが普段訪れている場所に行ってみるのもいいでしょう。元々「30〜40代の子供がいる女性」と設定していた場合なら、この女性たちに人気のショップやカフェ、レストランなどをWebやSNSなどで調べます。そしてその場所に行き、カフェやレストランなら実際に注文をして、彼女たちと同じ時間を過ごしてみる。また、こっそり耳をそばだてて彼女たちの話を聞いてみる。そうすることで上記の項目を埋められやすくなるのでぜひ試してみてください。
参考になるアプリデザイン事例
アプリデザインをする際は世の中にある様々なアプリを参考にするのがおすすめ。色々なアプリを実際に触ってみるのはもちろん、ここで紹介するようなギャラリーサイトを見るのも良いでしょう。普段使わないようなアプリのデザインを多く見れるので、デザインに行き詰まった時などに眺めていると発想の幅が広がります。
Pttrns
歴史のあるギャラリーサイトで、海外のアプリのUIが豊富にラインナップされています。ただ綺麗なビジュアルデザイン例が集められているのではなく、例えばアプリのログイン画面だけを検索するなど、特定の使用シーンのUIに絞って見ることも可能。
Mobbin
こちらも海外のアプリを多く紹介しており、特定の使用シーンのUIに絞って検索もできるギャラリーサイト。サイトがとても丁寧にまとめられているので、アプリデザインの初心者でも分かりやすくチェックすることができます。
Dribbble
サイトの既存ユーザーから招待をされないと投稿ができない、クリエイター向けのSNSサービス。招待がなくても投稿されているものを見ることはできるのでご安心を。投稿しているクリエイターに制作依頼ができる仕組みがあるため、投稿内容はどれもハイクオリティなのが特徴です。
Android Niceties
AndroidアプリのUIに特化した珍しいギャラリーサイト。Androidアプリのデザインで困った時はまずここをチェックすると良いでしょう。
Uplabs
トップページでは日替わりでトレンドのUIデザインが紹介されており、毎日訪れるだけで発想の幅が広がるサイト。アプリ以外にもWebサイトのデザインも豊富に揃っています。
アプリはもちろん、様々なデザインを探すことのできるSNSサービス。これまで紹介してきたサイトはどれも主に海外向けに作られていますが、こちらは日本の事例も多くて使いやすいので初心者におすすめです。
まとめ
この記事では、マーケティングのためにアプリを作ろうと検討している方に向けて、アプリのデザインで押さえておくべきことを紹介しました。本メディアを運営する株式会社ヤプリは、プログラミングがわからなくてもノーコードでスマートフォンアプリを作れるアプリプラットフォーム「Yappli」を提供しています。直感的に操作できて、作ったアプリをプレビューですぐ見ることができるので、様々なデザインをスピーディーに作ることができます。この記事をご覧になって、もしアプリの開発やデザインをしようと思った方は、ぜひ「Yappli」も候補の1つとしてご検討ください。資料請求はこちらからどうぞ。
