InstagramやAirbnbなどのUIデザインに見る新しいトレンド

Michael Horton

MichaelはNYCのデジタルエージェンシーSWARMのUX/UIデザイナー。 www.themikehorton.com

この記事はSWARMからの翻訳転載です。配信元または著者の許可を得て配信しています。

Complexion Reduction: A New Trend in Design (2016-06-24)

ミニマルなデザインがトレンドになってからしばらく経ちますが、次のトレンドはなんでしょう?

ここ数か月、デザインの最先端を行くアプリやサービスの中で、「ミニマルデザイン」を次の段階へと押し進めるものが出てきました。FacebookやAirbnb、Appleは、それぞれのプロダクトをよりシンプルに見せることに対して同様の方向を見据えており、それは、モバイルのデザインにおける「コンプレクション・リダクション」という新しいトレンドを反映したものです。

「コンプレクション・リダクション」とは

「コンプレクション・リダクション」なんて聞いたことがありませんか? 聴いたことがないのも無理ありません、何しろ私が勝手に名付けたものですから。最近私はフラットデザインやミニマルデザインとは違う方向性を持つものが出てきたことに気付きました。

編注:Complexionは「顔色」「血色」という意味で、Reductionは「削減」、つまり「色彩要素の削減」といった意味合いになります。

これはただ単にミニマルデザインの延長線上にあるものだという人もいるかもしれませんが、私は分けて考えるべきものだと考えており、僭越ながら名前を付けさせていただきました。

シリコンバレーを席巻する、このトレンドの特徴は、以下の通りです。

1. より大きく、太い見出し
2. よりシンプルで、汎用的なアイコン
3. 使用色の減少

これらを採用した結果はどうなるのでしょうか? 私たちのよく使うアプリの操作画面が、一つのブランド名のもと統一されたかのように見えるようになったのです。

Instagramの例

このトレンドに私が最初に気づいたのは5月の初めで、Instagramが画面を一新したときでした。

1-36N2-AkO-a6WLwh-5W0EmQ

この変更では、青色と濃いグレイ色の大半が排除されており、その代わりに見出しが強調され、下部のメニューとアイコンが簡略化されています。白黒のUIと主張の強い見出しによって、文章や写真を際立たせ、機能を明確化することとなりました。

より整然としたこのUIは、かねてより私がファンであったMediumのUIに似ています。Mediumは2012年の開始当初から白黒の色遣いを採用しており、以降のデザイン刷新のたびによりシンプルな方向に洗練されていきました。Mediumは当初から自然にコンプレクション・リダクション(以下CR)を採用し、先駆者となっていたということです。

Airbnbの例

FacebookがInstagramの新しい外観を公開した後、私はある時Airbnbのアプリを開き、その見慣れたUIに衝撃を受けました。Airbnbが4月にデザインを刷新して以来、私がこのアプリに触るのは初めてのはずなのに、ずっとこの画面に慣れ親しんできたような感覚を覚えました。

1-gGaeeFFmkDSRZ8NipWWRMA

AirbnbのUIの刷新はその一ヶ月後に発表されたInstagramほどはメディアに取り上げられなかったですが(派手なアイコン変更などがなかったからかもしれません)、こちらもCRの作法に則っている部分は多くあります。

モバイルデザインの刷新では、見出しを大きく目立つようにし、不要な画像や色彩を減らし、アイコンをシンプルにすることでより多くの場面で視認性の向上をもたらしました。モノトーンに統一されたUIが文章や画像をより引き立て、機能性も明確になったのです。

Apple Musicの例

コンプレクション・リダクションのトレンドに魅了され、採用した中で一番最近の例がAppleです。6月の初めにAppleはWWDCにおいて、「過去最大のiOS」と称しiOS 10を発表しました(iOS 8の際も「過去最大の」と言及されていましたから、少なくともそれ以降という話ですね)。

1-SrA5FVya2uVIgIbp5stq3w

特に私の目を引いたのはApple Musicのデザインリニューアルです。リニューアルにおける重要な部分はUXの向上と追加機能であったのですが、私が最初に気づいたのは「抑制」されたUIです。

Macworldの記者であるCaitlin McGarry氏もこの新しくなった外観について、「全体としてまったく新しい外観で、画像がより大きくなり、大きく目立つフォントと白く清廉な背景によってアルバムジャケットがより引き立つデザイン」と表現していました。

もうお分かりですね? InstagramやAirbnbで採用された方向性とは少々異なりますが(アイコンが塗りつぶされているのはどういうことなのでしょうか?)、キーとなる要素は一緒です。大きく主張する見出しと、白黒の操作画面です。

これらは何を意味するのか?

先に述べたように、私たちのよく使うアプリの外見がどんどん似通ってきています。何故かというと、技術とは模倣合戦だからです。これらのデザインリニューアルはどれも概ね好意的な反応ですから、新しいアプリも古いアプリも、CRのトレンドに参加すると予想します。

白黒の操作画面を「個性の欠如」と批判する人もいますが、直に落ち着くでしょう。アプリは機能を使うためにあって、個性のためにあるのではないのです。

これはつまりあなたの持つiPhoneのホーム画面が、あなたを快適な旅へと誘う、色とりどりのモザイクの扉に過ぎなくなるということです。

image-57755fefe91a52e6507de3a5

あなたがこのモノクロのスタイルを好もうが好むまいが、これは確かな進化の流れなのです。

プロダクトのデザインプロセスは、古くからの不必要な要素を盛り込みがちだったデザインから、よりユーザーにフォーカスした、全体に関わるデザインへと進化を遂げているのです。古いデザインプロセスではUIデザイナーはUXデザイナーあるいは企画担当からワイヤーフレームを渡されて「かっこよくしてくれ」とだけ指示されている場合が多くありました。そのデザイナーは何時間も、あるいは何日もの間、色を足したり引いたり、変更したりしたことでしょう。ワイヤーフレームという最良の解決策が目の前にずっとあったにも関わらずです!

近年のより発達したデザインプロセスにおいては、UXデザイナーとUIデザイナーの間の線引きは曖昧になっていて、デザイナーは個別に負う責任(例えば「かっこよくする」のような)が減っており、ユーザーのために最高のプロダクトを作る、という究極の目標に注力することができるのです。

ガイドライン

コンプレクション・リダクションの魅力は十分伝わりましたでしょうか? 採用したい場合は以下のガイドラインを参考にして下さい。

1. 色彩をなくす

色を取り除きましょう。差し色として1色くらいは残してもいいですが、多用はしないようにしてください。他は白黒に統一しましょう。できるだけコンテンツの色が映えるようにしましょう。

2. 見出しは大胆に

見出しをより大きく、より太く、より黒くしましょう。手始めに今ある見出しのフォントサイズを数10ピクセル引き上げて、重量感を持たせましょう。

3. アイコンはシンプルに

アイコンをよりシンプルで、より細く、万国共通ですぐわかるようなものにしましょう。アイコンにおいても、色の使用は禁物です。もし並び順で迷ったら、次の順番で左から順に並べましょう:ホーム、検索、メインの動作、次点の操作、プロフィール

4. ホワイトスペースをたっぷりと

白い領域を2倍、いえ3倍にしましょう。4倍でもいいかもしれません。これに関しては多くても間違いはないです。

5. アプリアイコンは派手に

アプリアイコンをより明るい色にしましょう。色を使ったカラフルなものをデザインできなくてウズウズしている場合はアイコンにその情熱を注ぎ込みましょう。ここにこそ、あなたの個性を注ぎ込みブランドを確立するのです。華々しく目立たせましょう!