iPhoneの登場から10年が経ちました。
スマートフォンの普及率は凄まじいもので、現在ではパソコンよりもスマートフォンでインターネットを見る時間のほうが圧倒的に多くなった、という方も少なくないはずです。

その意味では、2017年はモバイル画面のデザインもさらに前進しそうな予感がします。
モバイルサイトやモバイルアプリは、パソコンと比べて画面が格段に小さい分、デスクトップサイト・デスクトップアプリとは異なるデザインの進化を遂げてきました。
そしてその進化は、ますます広がっていくでしょう。

そこで今回は、2017年のモバイルアプリ・サイト制作に関する予測を立ててみました。
すでにモバイルデザインに取り入れられているトレンドもありますが、今後ますます広がっていく可能性のあるものをピックアップしてみました。
それでは、確認していきましょう。
  

2017年のモバイルアプリ・サイト制作に関する5つの予測

1. ミニマリズムの極み

2017年のモバイルデザインは、ますますシンプルな方向に進むはずです。

すでにフラットデザインが登場した頃から、デスクトップ・モバイル両方でミニマルを志向するデザインが好まれる傾向がありました。

最近では*「コンプレクション・リダクション」と呼ばれる、シンプルなだけでなく複雑なデザインや動作を取り除こうとする考え方が広まり、ユーザーインターフェイスよりも情報そのもののビジュアル化*に重きを置いたデザインが流行しています。

5922-01.jpg
▲例えばInstagramのフィードなどはメインコンテンツが大きく表示されていて情報そのものがビジュアル化されているといえます。
  

2. リストよりもカード

リストで縦に並べてメニューやリンクを表示するという方法は、スマートフォン用サイトが登場した初期の頃からあるデザインです。

一方で、小さい画面で画像や文字を含めて列挙していこうと思うと、リストよりもカードのほうが何かと都合がいいものです。

そういうわけで、カード型のデザインを今後ますます目にすることになるでしょう。

5922-02.png
▲ferretのデザインも1記事ずつカード型のリンクで表現しています。
  

3. どこもかしこもマイクロインタラクション

2016年はマイクロインタラクションについてたくさん議論された年でしたが、このトレンドは2017年も続きそうです。

マイクロインタラクションとは、ユーザーとのコミュニケーションを取るために取り入れられた微細な動きをするアニメーションのことです。
こうしたアニメーションを取り入れると、単にアニメーションなしで変化するよりもユーザーのエンゲージメントが高くなる傾向にあります。
特にモバイル画面においては、こうした動きがあらゆるところに取り入れられています(ホームボタンを押してiPhoneのアプリ画面を離れるときにもマイクロインタラクションが使われていますね)。

5644-img.jpg
▲SNSで「いいね!」を押す瞬間のハートや絵文字が飛び出すような演出がイメージしやすい「マイクロインタラクション」かと思われます。

参考:
サイトの離脱率が下がる!UXにマイクロインタラクションを取り入れる際の5つのポイント|ferret
  

4. 会話型インターフェイスの流行

AIやチャットボットの登場によって、会話型インターフェイスを目にする機会がますます増えそうです。

このようなインターフェイスは、単にほかのユーザーとの会話を楽しむだけではなく、例えばピザを頼んだり天気予報を確認したりする時にも利用されています。

また、現在はアプリに実装されているケースが多いですが、これからはモバイルサイト上でも、カスタマーサポートをはじめ、あらゆる部分で見ることになるでしょう。

Google HomeやSiri、AmazonのAlexaなどは声を使って調べ物をしたり指示を出しますが、こうしたインターフェイスでは指を使っているというだけの違いです。

shutterstock_1043198902.jpg

参考:
人工知能(AI)と人工無脳(チャットボット)、どう使い分ければいい?|ferret
  

5. モバイル・プロトタイピングは当たり前に

モバイル画面を開発するデザイナーは、単なるレイアウトのデザインだけではなく、画面遷移やマイクロインタラクションも含めてデザインすることになります。
その意味では、ますますUIデザイナーとUXデザイナーの垣根はなくなってしまいます。

AdobeのExperience DesignやFacebookのOrigamiのように、モバイルデザインに関する道具を一式揃えたプロトタイピングツールを使うことは、もはやモバイルデザインの定番になりつつあります。デザイナーはレイアウトに加えてインタラクションに重点をおくようになるでしょう。

origami-studio.png