いけてるアプリはデザインから！最新のトレンドや事例も紹介！

スマートフォンとスマホアプリ。このセットは、今や現代人の生活には欠かせない「主要ツール」となりました。スマートフォンの普及とともに拡大し続けるスマホアプリ市場。競合が加速するこの市場において、成功を左右する大きなカギとなるのはその「デザイン」です。

「アプリのデザイン」とは何を意味するのでしょうか。また、それはどれほど重要で、どのようにすれば成果へとつなげることができるのでしょうか。

この記事では、成功するアプリのデザインやそのデザイン方法について、最新のトレンドをふまえながら解説していきます。

アプリの「デザイン」が重要な理由

モバイルアプリの市場規模

アプリのデザインが重要とされる理由に触れる前に、まずは、スマホアプリそのものがマーケットにおいてどのような存在なのかについて把握しましょう。総務省の調査によれば、2017年の日本国内のスマートフォン普及率は、ついにパソコンの普及率を上回り、75％以上に達していることが分かったそうです。この「スマホ時代」の到来に伴い、その付随関係にあるモバイルアプリが、ユーザーとディベロッパーの両者から多大な関心を集めていることは、誰もが感じている事実でしょう。では、現在モバイルアプリ市場は実際どれほどの規模となっているのでしょうか。

アプリの市場データについて調査をしているAPP Annie（アップアニー）によると、世界におけるスマホアプリとそれを介する商取引、これらすべての売上総額は約130兆円にまで達しているそうです。また、日本人一人当たりのアプリの所持数が、平均で100本以上（世界最多）である事も同社によって公表されています。モバイルアプリを使ったビジネスは、今最も勢いのある有望株として、世界中のビジネスシーンで多くの注目を集めています。

「デザイン」はアプリの成功を支える

アプリビジネスは既に大きな市場を築いていること、そしてそれはさらなる伸び代が期待されている有望株であること、この2点についてご説明しました。

しかし、いくらアプリビジネスが活気づいてるからといって、ただアプリを作るだけでその波に乗れるわけではありません。アプリの中で、しっかりとマーケティングが成立している必要があるからです。アプリで利益を上げるには、以下の3つの項目における向上が主な目標として挙げられます。

• アクティブユーザー率（ユーザーがアプリを使っている頻度）
• アプリ評価（新規ユーザー獲得に繋がる）
• リファラルダウンロード率（口コミ戦略によるダウンロードの確率）

先ほどのデータの通り、現代人は非常に多くのアプリをスマホに常備しています。そして同時に、このまま「キープするか」、それとも「削除するか」をジャッジしています。言うまでもなく、ユーザーがいてこそ、アプリに価値が見出されます。

アプリの価値を示す、とも言えるこの3つの条件において、そのベースにあるのは「ユーザーがアプリを通しての体験に満足しているか」ということです。そして、そのユーザーサティスファクションを支える大きな柱の一つが、アプリの「デザイン」なのです。

「デザイン」というと、商品の見栄えなどといった表面的なものが連想されがちですが、アプリ開発におけるそのワードは、もう少し広義な捉え方で利用されます。そしてその中に、「デザインが重要」とされるゆえんがあります。

アプリの「デザイン」とは何を指す？

アプリ開発における「デザイン」には、2つの種類があります。1つはユーザー・インターフェース（User Interface）で略して「UI」、そしてもう1つが、ユーザー・エクスペリエンス（User Experience）で略して「UX」です。このUIデザインとUXデザインは、アプリ開発における重要な軸となります。

UIデザインとは

UIの語源であるUser Interfaceとは、直訳すると「ユーザーとの接点」です。ここで言う接点とは、アプリが表示されている画面上のすべてのものを指します。UIデザインとは、主に以下の点を最適化するためにアイデアを練ることです。

• アプリ自体の見た目のデザイン
• 操作をしやすくするためのデザイン（例：スワイプ、タップなど）
• 入力をしやすくするためのデザイン（例：キーボード表示）

UIデザインにおける最適化とは、ユーザーがやりたいことをすぐにでき、探しているものをすぐに見つけることができる状態。つまり、アプリを使いやすく、分かりやすくデザインすることが目標とされています。

これは、先ほどのアプリのユーザーサティスファクションと強くリンクしています。

UXデザインとは

UX、つまりUser Experienceの直訳は「ユーザーの体験」です。もう少しかみ砕くと、ユーザーがアプリを使っている時に「どのように感じているか」ということ。

例えば、「使いやすかった」や「楽しくて夢中になった」という感想は「良いUX」、逆に「他のアプリの方が便利だな」や「期待はずれだった」という感想は「悪いUX」ということになります。

前者のようにUXが良ければ、アプリはスマホにキープされますし、後者のような悪いUXを招いてしまえば、アプリが削除される可能性は高まります。

ユーザーにとっての快適で楽しいアプリ体験とは何か、またそれを提供するためにはどうするのが良いか、これらについて考えるのがUXデザインです。

いけてるアプリのデザインとは

「いけてる」とされるアプリは、どのようなUI / UXデザインが設計されているのでしょうか。

ターゲットが好むデザイン

ユーザーに快適なユーザー・エクスペリエンスを提供するために、まずはそのユーザーについて知ることから始めましょう。
例えば、女子高生とビジネスマンでは、好みや生活スタイル、関心の対象にも大きなギャプがあることが予測されます。UI / UXデザインの方向性を明確に定めるためにも、「誰に対するものなのか」をクリアにし、そのターゲットについて研究しましょう。

年齢、性別、趣味の他にも、アプリを使用するシチュエーションについてなど、多角的に検討するとアイデアが広がります。

シンプルなデザイン

アプリが表示される画面は、手のひらに収まるサイズです。ユーザーに対する思いの強さは、時に多くのアイデアを生みますが、スマホの画面でできることには限りがあります。

鉄則とされているのは「1ページにつき1操作」。ユーザーが感覚で操作できるよう、文字に頼らない、人間行動学などを踏まえた設計で、シンプルなデザインを目指しましょう。

時代にマッチしたデザイン

スマホ関連の市場は、注目を浴びている分その変化も著しいもの。技術の発展やトレンド、新しい価値観などを踏まえることも覚えておきたいポイントです。

新鮮なデザイン

新しいアプリが続々と開発される中、UI / UXデザインにおける斬新さや新鮮味というものは、ユーザーの心を引く良いアクセントとなります。ただし、あまりにも突飛なものは、使いにくさと変わることも…。新しい機能の導入には配慮が必要です。

アプリをデザインするポイント

実際にアプリをデザインする際に押さえるべきポイントをリストアップしました。デザイン作業の最後にチェックリストとして用いても便利でしょう。

ボタン

• ボタンとボタンの間には十分な余白を設け、押し間違いを防ぐ
• 色などを用いて「押す」ことを分かりやすく伝える
• 「戻る」ボタンは左上に置く（ユーザーが予測しやすい）
• よく使うボタンは操作しやすい位置にレイアウト
• メインを邪魔しないボタンのデザイン（追尾・常備時）

レイアウト

• 要素の端はそろえて並べてすっきりとさせる
• 1つのアプリ内は同じレイアウトパターンで統一する
• スペースには余裕を持たせる
• スクロール可能であることを察知しやすくする
• タップによるメニュー表示は近くに設定する

配色

• カラーパレットを作成し使用色を絞る
• 同じ要素は同じ色でパターン化して使う
• 文字は背景の色と差をつけて読みやすくする
• 読解すべきコンテンツは文字を黒、背景を白にして読みやすくする
• 鮮やかな色、淡い色など、色のタイプは統一して使う

タイポグラフィー

• フォントは基本的に日本語、英語でそれぞれ1種類ずつ＋太さ調節
• iOS端末、Android端末での表示のギャップに注意する
• 行は詰めすぎず、読みやすくする

ストレスフリー

• よく使う操作は2回までのタップとする
• 動画の自動再生は避ける
• 開いた瞬間に音が出ないよう設計する
• ページ移動の必要性を最小限に抑える
• 「UNDO」などを設置し、戻す作業を容易にする
• ユーザーに進行度を%などで示す
• アイコンはわかりやすいものを採用
• アニメーションは簡潔に
• 学習コストがかからない操作をデザインする
• ユーザーがアプリ内のどの位置にいるのかを明確にする表示
• アイコンや視覚的な表現を多く活用し、他言語対応時の手間を軽減
• 画像＞箇条書き＞文章の割合で感覚的な使用感を目指す
• メニューの項目は数を抑える

アプリデザインの最新のトレンド

それではここからは、アプリデザインのヒントになる最新のトレンドを紹介します。

3Dグラフィック

3Dグラフィックにはたくさんの魅力があります。より美しく、よりリアルなビジュアルはユーザーの感度を高め、言葉の簡略化や言葉だけでは伝えられない情報の伝達を可能にします。

最近は、スマホにも強力なチップが搭載されたことにより、スマホ画面でも3Dグラフィックが完璧に機能するようになりました。3Dグラフィックには専門的な技術や高いレベルでの芸術センス、また手間や作業時間が必要とされますが、ユーザーに高いレベルのインパクトを与えることができます。

キャラクターにストーリーを持たせる

ユーザーが共感できるようなストーリーを設定し、そのストーリーに合わせてキャラクターをデザインするという方法もトレンドの1つです。オリジナルのキャラクターを中心に、メッセージ性のあるビジョンを作り上げていくことが目標です。キャラクターの存在は、ユーザーに安心感と親近感を与える良い雰囲気を作り出すでしょう。

ボタンを省くUI

ボタンはアプリにとって欠くことができない主要ツールの一つですが、「ジェスチャーのみで検索をする」といったような、新しいUIデザインも注目されています。ボタンが存在していたスペースがなくなるため、よりクリエィティブにスペースを活用することが可能になります。

音声UIもこの流れにおける有効なアイデアの1つでしょう。

UIアニメーション

UIアニメーションへの注目は年々高まっています。ビジュアルに動きが加わることにより、ユーザーは、直感に近い感覚でアクションを起こすことができるようになります。

また、アップロードなどを待っている時間は、UIアニメーションの働きかけによって、ユーザーにとっての「無駄な時間」を「有意義な時間」へと変えることが実現するでしょう。

UIアニメーションはユーザビリティーの向上にとても効果的です。

優れたデザインのアプリを紹介

優れたUIデザインとは、ユーザーに寄り添い、使い心地の良さを最優先として設計されたもの。
これからご紹介するアプリは、ユーザーエクスペリエンスを向上するために、最新のテクノロジーやアイデアが詰められた優秀アプリです。

Google lens

「調べたいものをカメラにかざすだけ」というまったく新しい検索方法を可能にしたのがGoogle lensです。このアプリは言葉ではなく、カメラに写る被写体を自動で認識し解析を行うという優れもの。結果が表示されるまでの「待っている」という感覚を軽減するためのUIデザインも参考になります。

Color Therapy Coloring Number

プロの色彩アーティストのためのカラーリングアプリです。ピクセル化の時代は終わり、HD画像の時代がやってきました。このアプリでは鮮明なHD画像の中で、2000以上の単色とグラデーションが備わったカラーパレットを用いて、カラーリングを楽しむことができます。充実したデザイン機能の他にも、リラックス効果や集中力を高めるための音楽再生機能、完成作品をシェアする機能など、ユーザーを魅了するポイントが豊富に詰まったアプリです。

ZINIO

このデジタル売店の最大の魅力は「読み上げ機能」。世界中の6000以上の新聞や雑誌を、他の動作をしながら聞くことができるという便利アプリです。

Must

MustはムービーハンターのためのSNSです。興味のある映画やTVシリーズをコレクションしたりレビューしたりするアプリです。主な画面操作をディスプレイの下半分にまとめたUI設計になっているため、画面が大きい最新スマホでも、親指だけでの円滑な操作を可能としています。

また、細かなモーションによって表示内容との関連性や優先順位などを上手く表現している点も注目です。

Trello

「Trello＝トレロ」は、ふせんを扱う感覚でタスク管理ができるツールです。それぞれのタスクを「Card（カード）」として作成し、「Boad（ボード）」にて管理します。ロングタップでカードを持ち上げ、ドラッグ＆ドロップで移動できます。持ち上げる際にカードが傾くというアニメーションがデザインされており、スムーズかつ自然な感覚で扱えるところが魅力です。

eBay

巨大オンラインマーケットeBayのアプリでは、ショッピングをフレームのない「フルスクリーン」で楽しむことができます。サムスンのGalaxy S8とiPhone Xのリリースにより、アプリのUXデザインでは「フレームレス」という視点がトレンドになっています。
スクリーンの広がりは可能性の広がりでもあります。フルスクリーンというUXデザインは、次世代のユーザー体験を実現する起爆剤ともなりえるでしょう。

アプリをデザインする時に参考になるサイト

スマホアプリのデザインの多様性や可能性は、日々広がり続けています。さまざまなアプリデザインがまとめたアプリのギャラリーサイトは、インスピレーションを得るのにとても便利です。

Pttrns

コレクション数の多さと高い更新頻度が特徴。カテゴリー検索が可能なため、そのカテゴリーの傾向を追うことができます。

Mobile Design Inspiration

UIのコンセプトなどがまとめられたTumblrのページ。GIFアニメーションもあります。

Mobbin

iOSアプリのハイクオリティーなデザインパターンが収集されています。ボリュームが多く、150種類以上のiOSアプリ、8,000パターンのUIがコレクションされています。アプリはカテゴライズされており、サインアップすれば、UIごとに検索することも可能です。ボリュームと機能性に富んだギャラリーサイトです。

Mobile Patterns

iOSアプリのさまざまなUIがまとめられたギャラリーです。コンポーネント、ナビゲーション、アクションといったような、カテゴリごとでのデザインの閲覧が可能です。UIデザインをアニメーションで確認できます。

App Animation

iOSアプリのアニメーションに特化してコレクションされています。58のアニメーションをパターンやスタイル別に並び替えたり、保存することが可能です。（要サインアップ）

Android Niceties

アンドロイド用アプリがまとめられています。

まとめ

アプリをデザインする際、常に配慮すべきものはユーザビリティーです。ユーザーにとって優しく、魅力的なアプリであることが、成功するための揺るぎない条件と言えるでしょう。

WEBでのお問い合わせはこちら