【2019年版】UI/UXはユーザーファーストに!アプリデザインのトレンドはこう変わる!

 

チラシやDMといった既存のアナログ集客方法に代わり、現代ではポータルサイトやSNSなど、デジタルの集客方法が脚光を浴びています。乱立するデジタル集客方法の中でも最近注目されているのが自店舗のアプリを制作して集客に利用する方法。自店舗アプリを利用するとプッシュ通知やクーポンなど、集客に効果のある情報をリアルタイムで、お客様に気付いてもらいやすいように配信ができます。

このようにメリットの多い自店舗アプリですが、重要なのがアプリのデザイン。いわゆる「UI/UX」を考えないでアプリを制作すると、せっかくのアプリを使ってくれるお客様の増加を見込めません。

今回は自店舗アプリを制作するうえで重要なアプリデザインのトレンドをUI/UXの観点から詳しく解説。UI/UXをユーザーファーストにする重要性もよく分かる内容になっています。

「自店舗アプリを制作する前にデザインのトレンドを知っておきたい」というオーナーの方はぜひ読んでください。

 

 

1

1.UI/UXとは

 

まずはUIとUXについて説明します。

・UI(ユーザーインターフェース)
UIとは「ユーザーとデバイス(本記事ではスマホアプリ)の接点」のこと。スマホアプリの場合アプリ全体のデザインをはじめとして、フォントサイズやボタン、アニメーションなど、アプリ画面で見られるものは全てUIになります。

IT業界では何かと何かをつなぎ合わせる接点(窓口)になるものをインターフェースと呼称します。UIと同じようにインターフェースという言葉が利用されている例として、API(アプリケーションプログラミングインターフェース)が挙げられます。

APIは自社が制作したソフトと他社が外部サーバーにインストールしているソフト同士を連携させ、他社のソフトの機能を呼び出して利用するための接点となる技術。このように、何かと何かをつなぎあわせる技術や概念を説明する単語には、インターフェースという言葉が入っていることが多いです。

 

・UX(ユーザーエクスペリエンス)
UXとは「ユーザーが商品やサービス(本記事ではスマホアプリ)を利用することで得られる体験」のこと。

スマホアプリの場合、UXはUIによって大きく変わってきます。例えばフォントが美しい、ボタンデザインなどが分かりやすいなど、UIにデザイン性があり、それでいて使いやすいものであればあるほど、UXでのユーザーの満足度が高まります

このようにUIなどによってUXが決まるので、UIとUXには密接な関係があります。UXはUIだけでは決まりませんが、UIがUXを決める重要な指標の一つであるのは間違いない事実です

2

2.アプリデザインのトレンド(誕生〜現在)

 

ソフトウェア全体のインターフェースデザインには次々と変化が起き、

・CLI(コマンドラインインターフェース)・・・文字ベースの操作画面
・GUI(グラフィカルユーザーインターフェース)・・・画像やイラストベースの分かりやすい操作画面
・NUI(ナチュラルユーザーインターフェース)・・・GUIから発展したさらに直感的に操作できる画面

 

と移り変わっています。

スマホアプリにおいては

・スキューモーフィズム

・フラットデザイン

・フラットデザイン2.0

・マテリアルデザイン

 

へとアプリデザインのトレンドが変化してきました。

 

出典:株式会社ベーシック

・スキューモーフィズム
「スキューモーフィズム」とは「現実世界にある動物や風景などをアプリデザインに落とし込もう」という考えで、「リッチデザイン」とも呼称されることがあります。スキューモーフィズムという言葉自体は遡ること19世紀末当りから使われはじめ、2013年、「iOS7」登場まではスキューモーフィズムに沿ったアプリデザインが一般的でした。

スキューモーフィズムが使われていたころの社会はまだiPhoneや「Android」が登場して間もないときで、スマホの黎明期。アプリという概念自体にもユーザーがいまいちなじめていなかったため、開発者側でもユーザーのアプリ機能への理解を促進できるように工夫する必要がありました。

そこで利用されたのがスキューモーフィズム。アプリアイコンであれば鳥や花の実画像に似せる、ボタンは光が当たっているようにデザインし実在感を出すなど、実際に現実にあるものをモチーフにしてアプリデザインが制作されました。

しかしスキューモーフィズムに基づいたデザインのアプリはごちゃごちゃした印象で使いにくいものが多く、UIとして最適なものでは決してありませんでした。またモチーフにした現実世界のモチーフを色濃く反映するため、機能が現実世界のものに合わせて制限されるなど、ユーザーがより使いやすくなるようなアプリデザインのカスタマイズが行いにくい弱点もありました。

 

・フラットデザイン
2013年に「iOS7」が登場し「フラットデザイン」が採用されたことなどを皮切りに、フラットデザインの考え方がアプリデザインにどんどん取り入れられるようになりました。

フラットデザインは「シンプルな要素や図形を、明るい色を中心に組み合わせてわかりやすさなどを強調したデザイン」のこと。「Twitter」や「Google Chrome」などの有名アプリも、アプリアイコンから操作画面デザインまでイラストチックに感じませんか?こういったイラストチックで余計なものを省いてある分わかりやすいデザインであることが、フラットデザインのメリットです。

フラットデザインならばすっきりとしたアプリデザインになり、ユーザーが操作画面を見やすいです。またスキューモーフィズムより、スマホの機能を活かした機能を実装しやすくなります。

ユーザーがアプリの概念について理解し始めたのも手伝い、現在ではスキューモーフィズムは廃れ、フラットデザイン系のアプリデザイン開発が進められています。

 

・フラットデザイン2.0
最近はフラットデザインのデメリットを改良した「フラットデザイン2.0」のデザインが増えています。従来のフラットデザインでは立体感のない、平面のアプリデザインが主流でした。それが原因で直感的に操作しづらい点もあり、より直感的に操作できるようにフラットデザイン2.0の概念が提唱されました。

フラットデザイン2.0ではメニューボタンなどに影(シャドウ)を付けたりして従来のフラットデザインより立体感などを強調。「これはボタンだ」など、ユーザーがより操作しやすくなるような、使いやすいデザインを目指しています。

 

・マテリアルデザイン
マテリアルデザインはGoogleが2014年にガイドラインで発表した考え方。「現実世界の立体感などを従来のデザインより強調し、動的な仕組みを多用した」デザインです。

例えば紙上のデザインは「重ねたときに影が下の紙にできる、そして紙からは絶対に文字や絵がはみ出さない」など、現実世界の物質の「特性」をUIデザインに落とし込みます。そして現実世界のように、画面でドラッグした項目が画面上で動いて指定の場所に移動できるなど、動的な要素を多用することで「フラットデザインの分かりやすさを活かしながら、現実世界で日常動作をするように直感的なアプリデザインを実現できる」のがマテリアルデザインの特徴です。

今回紹介したデザインの中でもっとも直感的なUIデザインですが、マテリアルデザインをベースにした開発にはコストがかかります。今後マテリアルデザインの考え方が広まれば、ユーザーにとってマテリアルデザインが一般的になり、コストは自ずと下がっていくでしょう。

3

3.アプリのUI/UX、サイトとの違いとは

 

ここからはスマホアプリとWEBサイトを比較し、アプリがどういった点でウェブサイトよりUI/UXの点で優位性があるかご説明していきます。

WEBサイトに対してアプリには、UI/UXの点で次のようなメリットがあります。

・サッと使える利便性はアプリの方が上
・アプリの方が直感的に使いやすいデザイン
・プッシュ通知などでUI/UXの向上を狙える

 

・サッと使える利便性はアプリの方が上
WEBサイトをスマホで見る場合いちいちウェブブラウザーを立ち上げて検索を行わないといけません。アプリであればインストール後アイコンができ、そこをタップするだけでサッとアプリを起動して情報を確かめられます。サッと使えて利便性が高いということは、UI/UXでWEBサイトよりアプリの方が上だということです。

 

・アプリの方が直感的に使いやすいデザイン
WEBサイトの中にはカラム(列)が3行など、スマホの縦画面ではどうしても見にくいサイトも存在します。アプリであれば1列のすっきりとしたレイアウトで、ユーザーがスマホで操作するときも全く困りません。このようにスマホで操作する場合のデザイン的なUI/UXの点からも、WEBサイトよりアプリの方が有利。

 

・プッシュ通知などでUI/UXの向上を狙える
WEBサイトには最新情報やお得情報の配信など、ユーザーにとって有益な情報を分かりやすく知らせる機能がありません。アプリであればプッシュ通知などで、注意喚起力の高いユーザーへの情報提供が可能に。結果有益な情報をユーザーが見逃さず、UI/UXの向上も狙えます

このように、アプリにはWEBサイトに対してUI/UXの点で有利な点がたくさんあります。

 

4.UI/UXで、アプリのダウンロード率や利用率を大きく左右する

 

ここからは実際にユーザーの使いやすさを考慮しUI/UXを変えることで、アプリのダウンロード率や利用率が向上した事例を挙げていきます。

・Spotify
・Lyft
・Instagram

 

・Spotify

Spotify出典:App Store

「Spotify」は世界的に有名な音楽ストリーミングサービス。日本では2016年にサービスが開始され、世界中に1億9100万人のアクティブユーザーがいるなど注目のサービスです。

そのSpotifyは、当初緑を基調にしたロゴおよびアプリデザインでしたが、リデザインにより黒をベースカラーとして追加。アプリでも背景画面が黒になることで可視性が増し、UI/UXの観点からもよりユーザーが使いやすいアプリになりました

毎月のように利用者の増えているSpotify。こういった最新のデザインを取り入れて使いやすいアプリデザインになっていることも人気の秘訣といえそうです。

 

・Lyft

Lyft

出典:App Store

「Uber」と並ぶアメリカ初のライドシェアサービスに「Lyft」があります。このLyftもアプリデザインをユーザー視点で作りかえることにより、ダウンロード率や利用率の向上を図っています。

Lyftでは開発者でユーザーが使いやすいアプリデザインを模索しながら、ABテスト(複数のデザインをユーザーに提示して、使い勝手を比較してもらう方法)なども行い、ユーザーにもリデザインに対する意見を募りました。その結果開発者が思ってもみなかった改善点も判明し、リデザインにフィードバックすることに成功。

ユーザーが本当に分かりやすいデザインに変更されたLyftのアプリ。Uberを尻目に経営規模を拡大していますが、アプリのリデザインもその躍進に一役買っているようです。

 

・Instagram

Instagram

出典:App Store

「Instagram」は、若者を中心に絶大な人気を誇るSNSアプリ。このInstagramもアプリアイコンをアップデートしました。以前はインスタントカメラをそのままイラスト化したようなデザインでしたが、線画のイラストチックなデザインへ変更。ピンクを基調とした柔らかいデザインになっています。

このデザインの変更には賛否両論ありますが、従来のスキューモーフィズムからフラットデザインへのアップデートは必然だったとも言えます。実際2018年6月には利用者数が10億人を突破し、各施策はじめアプリのリデザインも成功していることが伺えます。

 

5

5.最新アプリデザイン2019年トレンド

 

ここからは2019年時点での最新アプリデザインのトレンドを、キャプチャとともに解説していきます。

・CokeOn
・PayPay
・TikTok

 

・CokeOn

CokeOn

出典:App Store

ご存知「コカ・コーラ」が提供する自販機用アプリ。ユーザーは「Bluetooth」を用いた無線接続を行い自販機での飲料購入が可能。スタンプを貯めて飲料と交換なども可能で、エンターテイメント性の高いアプリです。

CokeOnではアプリのデザインも洗練されていて、ホーム画面ではスタンプが表示され起動の度にスタンプの数を把握可能。下部にはスライド(カルーセル広告)の動きでユーザーを最新情報にひきつけるように工夫がされています。

「News」「Tickets」など、主要機能もタップ一つでサッと切り替えができ、スムーズなアプリ利用が可能。情報量が多いのにもかかわらずごちゃごちゃとした印象にならないのは、赤と白を基調にしたフラットデザインとアプリの絶妙なレイアウトがなせる業です。

 

・PayPay

paypay

出典:App Store

「PayPay株式会社」が2018年11月から提供する「PayPay」。スマホ決済アプリとしてさまざまなキャンペーンを行っており、最近から提供され始めたばかりにもかかわらず、「LINE Pay」など既存の有力スマホ決済サービスとシェアを競い合うほどに成長しています。

PayPayでは「無駄を一切廃したシンプルな作り」が特徴。

ホーム画面にいきなりバーコードが表示されるありそうでなかった大胆な仕組みで、起動したらすぐ支払いができる利便性を実現。広告は下部にカルーセル広告があるくらいで、後は残高や支払い履歴など、ユーザーが実際にPayPayを使うときに必要な情報が見やすいレイアウトになっています。

スマホ決済で求められる「サッと使える利便性の追求」がPayPayアプリからは感じられます。

 

・TikTok

TikTok

出典:App Store

「TikTok」は中国初の単発動画配信アプリ。「Youtube」などの既存の動画とは違い、「15秒間の短い動画をサッと視聴して楽しめる」のが特徴です。

特徴は何といっても「動的な要素がたくさん利用されている」点。例えばホーム画面ではいきなり注目の動画が全画面表示で流れ、他のタブでも動画のサムネイルに動きがついて表示されます。ユーザーが動画に興味を持ってくれるように、Tiktokではユーザーの興味を引きやすい動きを多用したアプリ作りをしているのです。

さらにTIkTokで自分が動画投稿する際も下部のタブからタップしてサッと可能など、「動画投稿に求められる機能をすぐ利用できる分かりやすいデザイン」もメリットです。メインコンテンツである動画が目立つように、あえて他の項目説明部分は特にデザインを施さない簡素な作りなのも面白いところです。

 

6

6.まとめ

 

いかがだったでしょうか?今回は2019年最新のアプリデザインのトレンドについて、UI/UXを絡めながらお伝えしてきました。

ユーザーがアプリになれた影響などもあり、今ではフラットデザイン系のアプリデザインが主流になっています。ただし今後は「VR(仮想現実)」も普及し始めたことですし、例えばアプリメニューや画面が宙に表示されたり、ユーザーが3Dでお店の内観を確認できたりと、新しいデザインや機能が登場するかもしれません。アプリデザインの変遷に常に気を配り、トレンドに合わせたアプリ制作ができるように準備を怠らないことが重要です。

弊社自店舗アプリ制作サービス「店舗アプリ」では、アプリのカスタマイズなど、トレンドに合わせたアプリデザインの実装が簡単にできます。コストも安く抑えられるので、気になる方はぜひ下記からお問い合わせをお願い致します。

アプリUI/UX

 

店舗アプリお問い合わせURL:http://tenpoapp.com/inquiry-apps/