視認性重視で白っぽく?! Complexion ReductionでシンプルになるモバイルUI

2016.12.19
リスト
このエントリーをはてなブックマークに追加

もはや手放せないスマホのアプリケーション。ですが最近のバージョンアップで「なんだか画面が白っぽくなったな」と感じることはないでしょうか。ここ数カ月、Facebook、Airbnb、Appleなどスマホ用アプリケーションの最先端を走っている企業がこぞってUI(User Interface)を“よりシンプルな”ものに変更しています。その方向感を生んでいるデザイントレンドが「CR(Complexion Reduction)」。CRとは、どんな考え方で、なぜ今採用が増えているのでしょうか。

見出しを大きく、アイコンはシンプルに

図1は、2016年春以降にUI(User Interface)を変更した代表的なスマホ用アプリケーションの画面例です。

cr-design_1
図1:シンプルなUI(User Interface)を採用したスマホ用アプリケーションの画面例

例えば、Facebook傘下の「Instagram」は、それまで紺色の背景を使い力強いイメージを採用していましたが、今はメニューとアイコンが簡略化されると同時に、モノトーンのUIになっています。結果として見出しが大きくなり、文章や写真が際立つようになったと言えるでしょう。Facebook自身が提供するメッセージングアプリ「Messenger」も同様に、背景は白に一新され、対話先のアイコンである写真部分が目立つデザインになっています。

民泊用アプリケーションの「Airbnb」でも、不要な画像や色使いが減り、アイコンもシンプルになりました。モノトーンに統一されたUIが、文章や画像を引き立てたほか、どこをどう操作すれば良いのかといった機能面でも明確になったと言えます。色々な場面で使われるアプリケーションの視認性を高める狙いがあるのでしょう。

これらの新UIに共通するのは、背景など画面上で大きな面積を占める部分の色数を減らし、基本的にはモノトーン(白黒)になっていることと、文字の大きさが大きく、かつ太い書体が採用されていることです。各種のアイコンも、より簡易化されています。色味としては各社がブランド色として規定しているものを細かい部分で使っている程度です。

こうしたデザインの考え方は「CR(Complexion Reduction)」と呼ばれています。Complexionは「顔色」や「血色」という意味、Reductionは「削減」と言う意味です。つまりCRでは「色彩要素を削減する」という方向でデザインが進みます。米ニューヨークのデジタルデザイン会社であるSWARMのUX/UIデザインナーのマイケル・ホートン(Michael Horton)氏が提唱しました(図2)。

cr-design_2
図2:「CR(Complexion Reduction)」を提唱したマイケル・ホートン氏のブログ記事の画面例

マイケル・ホートン氏は、CRに沿った画面をデザインするためのガイドラインとして以下の5つを挙げています。

ガイド1:色を削除する。1つの色のみ使えますが、とても控えめに使用する。それ以外はすべて白黒であるほうがよい。コンテンツに色を持たせる
ガイド2:見出しは、 より大きく、より太く、より黒くする。約20〜30ピクセル(画素)大きくして“重く”する
ガイド3:アイコンはシンプルで、薄く、認識できるようにする。アイコンでも色を多用してはいけない。そのアイコンは左から順に、ホーム、検索、プライマリアクション、セカンダリアクション、プロフィールのように並べ替える
ガイド4:空白を2倍ではなく3倍に、できれば4倍にする。ここを間違ってはいけない
ガイド5:アプリケーションのアイコンを明るくする。Flashや色を多用したいのなら、ここで利用する。アプリのアイコンこそ、デザイナーが個性とブランドを表す場所であり、目立たせる

UIデザインも個別最適から全体最適へ

しかし、CRに沿ってデザインされたアプリは、モノクロで文字が太いといった程度しか特徴がなく、見た目では、ほとんど差がありません。それでも各社はなぜ、CRを採用するのでしょうか。

これまでもUIをシンプルにするトレンドはありました。しかし、マイケル・ホートン氏は、「CR は、フラットデザインとミニマル(最小)デザインというトレンドの延長線上にはある。だが、CRのシンプルと従来の『Progressive Reduction(認知シンプル化)』は異なる」と指摘しています。Progressive Reductionが「利用者がアプリケーションを操作し、学習を積み重ねることで徐々にデザイン要素を解釈し、結果としてシンプルになるモノであるのに対し、CRはより明確に一目で分かるようにデザインする」(同)とします。

この背景には、「利用者がアプリケーションを操作するのはデザインによる個性ではなく、それによって利用できる機能やサービスを求めているのだ」という考えがあります。利用者の使用感、つまりUX(User Experience:顧客体験)をより重視する方向に、デザインの方向性が変わってきているのです。加えて、競合が始めた新サービスをも次々と取り込んでいく流れの中では、UIも個々のサービスに最適化するのではなく、アプリケーションを切り替えても同じ操作感で利用できるという、全体感を重視せざるを得ないという理由もあるのでしょう。

UIデザイナーにすれば、自らの個性を出しながら色々と工夫して“きれいな”画面をデザインしたいと考えるはずです。しかし、デジタルビジネスにおけるUXは、複数の顧客接点をシームレスに設計できなければならず、UIにしても局部的な美しさよりも、全体としての仕組みの一部に組み込まれていなければなりません。結果、CRのようなデザインが生まれているのでしょう。画面デザインにも、各社のデジタルビジネスに向けた取り組み度合いが現れているというわけです。さて、みなさんが利用されている各種のアプリケーションはUXの最適化に向けたUIデザインに変化してきているでしょうか。

執筆者:丁 晟彦(Digital Innovation Lab)

EVENTイベント