デザインはもっとシンプルに！無駄な要素を削ぎ落としたUIデザイン「コンプレクション・リダクション」とは？

「あれ、いつのまにかデザインが白っぽくシンプルになってきたなぁ」

Facebook MessengerやInstagramなどのスマートフォンアプリの度重なるアップデートの末に、こんなことに気づいたひともいるのではないでしょうか。

デザインは、よりシンプルで、ストレスのかかる要素をそぎ落とす方向へとどんどんと進んでいます。
2012年頃に広まった「フラットデザイン」を皮切りに、「マテリアルデザイン」や「ミニマルデザイン」、そして「フラットデザイン2.0」や「メトロ UI 」と呼ばれるデザインなどのトレンドが次々と流行し、そうしたトレンドを踏まえたホームページや アプリ が量産されました。

そして、2017年、果たして次に来るデザイントレンドは一体何なのでしょうか。
その答えが、「白っぽいデザイン」に現れています。

今回は、「白っぽいデザイン」の正体である新しいデザイントレンド「コンプレクション・リダクション」(CR)について解説します。
なぜ、モバイル アプリ の先頭を走る企業は次々と「白っぽいデザイン」を採用しているのでしょうか。
「白っぽいデザイン」を採用することで、何が変わるのでしょうか。

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

コンプレクション・リダクション(Complexion Reduction：CR)とは、ニューヨークのデジタルクリエイティブエージェンシー「SWARM」の UX / UI デザイナーであるマイケル・ホートン氏が命名した、シリコンバレーを圧巻する新しいデザイントレンドのことです。

Complexionとは「顔色」「外観」「血色」といった意味で、Reductionとは「削減」、つまりコンプレクション・リダクションとは「色彩要素の削減」を意味します。

下記に示した、2016年春以降に UI や外観デザインを大幅に変更した代表的なスマートフォンアプリの画面をご覧ください。

Instagramや Facebook Messenger、twitter、AirbnbやApple Music、Mediumなど、シリコンバレーの先頭を走る企業が、いわゆる「白っぽいデザイン」を採用しています。

例えば、画像投稿SNSであるInstagramは、それまで紺色のブランドカラーを ヘッダー や UI のバックグラウンドに採用していましたが、今はメニューやアイコンは簡素化され、モノトーンに紫・ピンク・黄色のカラフルなグラデーションをアクセントに加えたシンプルなデザインになっています。
結果的に見出しが大きくなり、アイコンや写真が目立つようになったと言えます。

民泊 アプリ のAirbnbも従来のピンクを押し出した UI デザインを廃止し、ピンクとミントグリーンをアクセントカラーに採用しながらも全面的に白を基調として、雑誌を選ぶかのように並んでいる旅行先の画像をはっきりと際立たせています。

これらの新しいデザインスタイルに共通するのは、背景のような画面上で大きな面積を占める部分の色の数を減らし、基本的には「白とグレー」のモノトーンを採用していること、また文字を大きくしてより太くした「ゴシック書体」や「サンセリフ書体」が採用されていることです。
アイコンもできるだけシンプルな「リニアアイコン」(線を用いたアイコン)を使って、より簡素になっています。
ブランドカラーは、アクティブな(現在選択されている)タブや、時間や新着レビューなど視線を引き付けたいところに、わずかなアクセントとして部分的に使われているだけです。

コンプレクション・リダクションとは、こうした非常にシンプルなデザインのことです。
極力色彩要素を減らすことで、結果として ユーザー のアイコンや旅行先の写真などが主役として目立つようになります。
コンプレクション・リダクションを採用している アプリ は、現在も次々と増えています。

コンプレクション・リダクションをかたどる5つの特徴

これから私たちがコンプレクション・リダクションを採用するのに、注意すべき点は果たしてどんなところなのでしょうか。
マイケル・ホートン氏は、コンプレクション・リダクションを採用する上で以下のガイドラインを参考するようにアドバイスしています。

1. 採用している色彩を減らす

色彩を取り除きましょう。
差し色として１色くらいは残してもいいですが、多用しないようにするのがポイントです( Facebook なら紺色・twitterなら水色など、ブランドアイデンティティを示すカラーが好まれているようです)。
色彩は主役ではないので、できるだけ コンテンツ の色が映えるようにしましょう。

2. 見出しを大胆に表示する

見出しをより大きく、より太く、より黒くしましょう。
最初にできることは、今すでにデザインしているフォントのサイズを20〜30ピクセル大きくして、重量感を持たせます。

3. UI はシンプルにデザインする

UI アイコンは、シンプルで、より繊細に、そしてパッとみてすぐに識別できるようにしましょう。
アイコンでも色を多用してはいけません。
アイコンは順に、ホーム・検索・プライマリーアクション、セカンダリーアクション、プロフィールの順で並べます。

4. 余白をたっぷりと取る

ホワイトスペースを、現在のデザインの2倍、3倍、可能であれば4倍にしましょう。
余白に関しては、多くても多すぎることはありません。

5. アプリ アイコンは存在感を出す

アプリ のアイコンはビビッドで明るい色にしましょう。
どうしても色を使ったカラフルなものにしたいのであれば、アイコンにその情熱を注ぎ込みましょう。
アイコンにこそ、個性を醸し出し、ブランドを確立する力があるのです。

なぜ今、コンプレクション・リダクションなのか？

一見すると、このようなモノクロの操作画面は個性が欠如しているようにも見えます。
しかし、 UI デザイナーがこの淡白なスタイルを好もうが好むまいが、確実にコンプレクション・リダクションを採用する アプリ は増え続けていきます。

それではなぜ、シリコンバレーの名だたる企業は次々とコンプレクション・リダクションを採用しているのでしょうか。
ここでは、そうしたコンプレクション・リダクションを採用する必然的な理由について、考えてみましょう。

1. デザインよりも機能性やサービスによる体験を重視

UI か UX か、という議論に意味があるかは分かりませんが、コンプレクション・リダクションの考え方では、より UX ( ユーザー 体験)重視にシフトしています。
これは、「 ユーザー が アプリ を操作するのは、デザインが優れているからではなく、 アプリ によって体験できる機能やサービスが優れているからである」という考え方が根底にあるからです。

2. 個別よりも全体の最適化

次々と新しい アプリ がローンチされては存在感のある アプリ がそれらの機能を取り入れていく現在の流れの中では、個々の UI 操作を触りながら使い方を学習していくのは ユーザー にとってストレスになります。
従来の「個性的な」 アプリ では、わざわざオンボーディングページを作って ユーザー を教育していく必要があったのです。

しかし、コンプレクション・リダクショナルなデザインをした場合、結果的に一目でわかるようなユニバーサルな UI デザインとなります。
その結果、アプリケーションを切り替えても同じ操作感で利用できるようになります。
デザインによる「個性」ではなく、操作性による「全体性」を重視した結果、多くの アプリ でデザインが似通ってしまいますが、これは UX / UI デザイナーにとってはむしろ「意図した結果」なのです。

参考：
サービス・アプリのユーザー定着率ＵＰ！ファンを増やすための仕組み「ユーザーオンボーディング」とは？

3. OS とのシームレス体験

全体性の重視とも重なりますが、「スマートフォン」という デバイス 自体が「ポータル化」、つまり入り口として検索したり天気を見たり音楽を聞いたりする汎用的な デバイス となってきているので、色彩効果を極力抑えて、 OS 上でシームレスな体験を提供する動きがあります。
「マテリアルデザイン」が Android OS の全体性に統合されたデザインだとするならば、「コンプレクション・リダクション」を採用したデザインはiOS寄りのデザインだと言うことができます(正確に言えば、iOSがCRを採用する動きに舵を切った、ということです)。

Apple Musicをはじめとして、iOS自体がコンプレクション・リダクションを推進するような動きをしており、そのことはiOS Human Interface GuidelinesというAppleのiOSにおけるガイドラインにもあらわれています。

例えば「Color」(配色)の項目では、次のようなガイドラインが上がっています。

                  アプリ
                全体のインタラクティビティを示すメインカラーを選んでみよう：
「メモ」
                  アプリ
                では、インタラクティブ要素は黄色で着色されています。「カレンダー」
                  アプリ
                では、赤色を使っています。インタラクティビティを示す重要な要素を決めるのであれば、ほかの色はその色と競合してはいけません。

他にも…

インタラクティブ要素に使う色と非インタラクティブ要素の色は同じ色にしないでください：
もしインタラクティブ要素と非インタラクティブ要素が同じ色であれば、
                  ユーザー
                はどこをタップすればいいのかわからなくなります。

といった具合です。

iOSのデザインガイドラインは、コンプレクション・リダクションの詳細をさらに事細かに規定しているようにも思えます。
iOSの標準アプリケーション自体がCR寄りになってきていることも、他の アプリ がCRを採用する理由の一つとなっています。

まとめ

コンプレクション・リダクションという言葉自体はまだあまり浸透しているとは言えませんが、このような「白っぽいシンプルなデザイン」が広まっているのは紛れもない事実です。
アプリ 画面をカラフルに飾るのもいいですが、この流れに乗って、一目で見て使い方が分かるデザイン、 ユーザー の投稿や ユーザー アイコンが目立ってコミュニケーションに自然とフォーカスが当たるデザインにしてみるのも一つの選択肢ですね。

先述したように、コンプレクション・リダクションに関して現在最も充実している学習リソースは、iOS Human Interface Guidelinesでしょう。
これからもさまざまな アプリ がコンプレクション・リダクションを採用してくるでしょう。
ぜひ、既存の アプリ からデザインのヒントを見つけてみてください。