デザインはもっとシンプルに!無駄な要素を削ぎ落とした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. 採用している色彩を減らす
色彩を取り除きましょう。
差し色として1色くらいは残してもいいですが、多用しないようにするのがポイントです(Facebookなら紺色・twitterなら水色など、ブランドアイデンティティを示すカラーが好まれているようです)。
色彩は主役ではないので、できるだけコンテンツの色が映えるようにしましょう。
2. 見出しを大胆に表示する
見出しをより大きく、より太く、より黒くしましょう。
最初にできることは、今すでにデザインしているフォントのサイズを20〜30ピクセル大きくして、重量感を持たせます。
3. UIはシンプルにデザインする
UIアイコンは、シンプルで、より繊細に、そしてパッとみてすぐに識別できるようにしましょう。
アイコンでも色を多用してはいけません。
アイコンは順に、ホーム・検索・プライマリーアクション、セカンダリーアクション、プロフィールの順で並べます。
4. 余白をたっぷりと取る
ホワイトスペースを、現在のデザインの2倍、3倍、可能であれば4倍にしましょう。
余白に関しては、多くても多すぎることはありません。
5. アプリアイコンは存在感を出す
アプリのアイコンはビビッドで明るい色にしましょう。
どうしても色を使ったカラフルなものにしたいのであれば、アイコンにその情熱を注ぎ込みましょう。
アイコンにこそ、個性を醸し出し、ブランドを確立する力があるのです。
なぜ今、コンプレクション・リダクションなのか?
一見すると、このようなモノクロの操作画面は個性が欠如しているようにも見えます。
しかし、UIデザイナーがこの淡白なスタイルを好もうが好むまいが、確実にコンプレクション・リダクションを採用するアプリは増え続けていきます。
それではなぜ、シリコンバレーの名だたる企業は次々とコンプレクション・リダクションを採用しているのでしょうか。
ここでは、そうしたコンプレクション・リダクションを採用する必然的な理由について、考えてみましょう。
1. デザインよりも機能性やサービスによる体験を重視
UIかUXか、という議論に意味があるかは分かりませんが、コンプレクション・リダクションの考え方では、よりUX(ユーザー体験)重視にシフトしています。
これは、*「ユーザーがアプリを操作するのは、デザインが優れているからではなく、アプリによって体験できる機能やサービスが優れているからである」*という考え方が根底にあるからです。
2. 個別よりも全体の最適化
次々と新しいアプリがローンチされては存在感のあるアプリがそれらの機能を取り入れていく現在の流れの中では、個々のUI操作を触りながら使い方を学習していくのはユーザーにとってストレスになります。
従来の「個性的な」アプリでは、わざわざオンボーディングページを作ってユーザーを教育していく必要があったのです。
しかし、コンプレクション・リダクショナルなデザインをした場合、結果的に一目でわかるようなユニバーサルなUIデザインとなります。
その結果、アプリケーションを切り替えても同じ操作感で利用できるようになります。
デザインによる「個性」ではなく、操作性による*「全体性」*を重視した結果、多くのアプリでデザインが似通ってしまいますが、これはUX/UIデザイナーにとってはむしろ「意図した結果」なのです。
参考:
サービス・アプリのユーザー定着率UP!ファンを増やすための仕組み「ユーザーオンボーディング」とは?
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でしょう。
これからもさまざまなアプリがコンプレクション・リダクションを採用してくるでしょう。
ぜひ、既存のアプリからデザインのヒントを見つけてみてください。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- UX
- UXとは、ユーザーエクスペリエンス(User Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。似たような言葉に、UI(ユーザーインターフェイス、User Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- ヘッダー
- WEBページの上部スペースに位置し、どのページが開かれても常に共通して表示される部分です。ヘッダーの役割は、まずWEBページを目立たせ、ブランドイメージを訴求することにあります。会社のロゴなども通常はここに置きます。また目次となるメニューを表示し、自分が今どのページにいるかを分からせることもあります。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- コンテンツ
- コンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。 なお、かつてはCD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- UX
- UXとは、ユーザーエクスペリエンス(User Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。似たような言葉に、UI(ユーザーインターフェイス、User Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。
- UX
- UXとは、ユーザーエクスペリエンス(User Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。似たような言葉に、UI(ユーザーインターフェイス、User Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- UX
- UXとは、ユーザーエクスペリエンス(User Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。似たような言葉に、UI(ユーザーインターフェイス、User Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- デバイス
- デバイスとは「特定の機能を持つ道具」を表す語で、転じてパソコンを構成するさまざまな機器や装置、パーツを指すようになりました。基本的に、コンピューターの内部装置や周辺機器などは、すべて「デバイス」と呼ばれます。
- OS
- OSとはOperation Systemの略称です。パソコンやスマートフォンで操作した内容をアプリケーションに伝える役目を担っています。パソコン用ではwindowsやMac OS、スマートフォンではiOSやAndroidが有名です。
- Android
- Android OSとはスマートフォン用に開発された基本ソフト(OS)の一種です。米国Google社が中心となり開発されました。
- OS
- OSとはOperation Systemの略称です。パソコンやスマートフォンで操作した内容をアプリケーションに伝える役目を担っています。パソコン用ではwindowsやMac OS、スマートフォンではiOSやAndroidが有名です。
- OS
- OSとはOperation Systemの略称です。パソコンやスマートフォンで操作した内容をアプリケーションに伝える役目を担っています。パソコン用ではwindowsやMac OS、スマートフォンではiOSやAndroidが有名です。
- OS
- OSとはOperation Systemの略称です。パソコンやスマートフォンで操作した内容をアプリケーションに伝える役目を担っています。パソコン用ではwindowsやMac OS、スマートフォンではiOSやAndroidが有名です。
- OS
- OSとはOperation Systemの略称です。パソコンやスマートフォンで操作した内容をアプリケーションに伝える役目を担っています。パソコン用ではwindowsやMac OS、スマートフォンではiOSやAndroidが有名です。
- OS
- OSとはOperation Systemの略称です。パソコンやスマートフォンで操作した内容をアプリケーションに伝える役目を担っています。パソコン用ではwindowsやMac OS、スマートフォンではiOSやAndroidが有名です。
- OS
- OSとはOperation Systemの略称です。パソコンやスマートフォンで操作した内容をアプリケーションに伝える役目を担っています。パソコン用ではwindowsやMac OS、スマートフォンではiOSやAndroidが有名です。
- OS
- OSとはOperation Systemの略称です。パソコンやスマートフォンで操作した内容をアプリケーションに伝える役目を担っています。パソコン用ではwindowsやMac OS、スマートフォンではiOSやAndroidが有名です。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング