
デザインはもっとシンプルに!無駄な要素を削ぎ落とした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デザインを廃止し、ピンクとミントグリーンをアクセントカラーに採用しながらも全面的に白を基調として、雑誌を選ぶかのように並んでいる旅行先の画像をはっきりと際立たせています。
これらの新しいデザインスタイルに共通するのは、背景のような画面上で大きな面積を占める部分の色の数を減らし、基本的には「白とグレー」のモノトーンを採用していること、また文字を大きくしてより太くした「ゴシック書体」や「サンセリフ書体」が採用されていることです。
アイコンもできるだけシンプルな「リニアアイコン」(線を用いたアイコン)を使って、より簡素になっています。
ブランドカラーは、アクティブな(現在選択されている)タブや、時間や新着レビューなど視線を引き付けたいところに、わずかなアクセントとして部分的に使われているだけです。
コンプレクション・リダクションとは、こうした非常にシンプルなデザインのことです。
極力色彩要素を減らすことで、結果としてユーザーのアイコンや旅行先の写真などが主役として目立つようになります。
コンプレクション・リダクションを採用しているアプリは、現在も次々と増えています。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- 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)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- ユーザー
- ユーザーとは、コンピューターやシステムを利用する人のことを指します。 利用者、使用者、消費者などの意味を持つ英単語で、対義語は「メーカー」や「デベロッパー」などがあります。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
おすすめ記事
おすすめエントリー
カテゴリから記事をさがす
Web マーケティング
- SEO(検索エンジン最適化)
- SNSマーケティング
- アプリマーケティング
- Web広告
- グロースハック
- ABテスト・EFO・CRO
- LP制作・LPO
- CMS・Webサイト制作
- 記事制作・ライティング
- コンテンツマーケティング
- メール配信・メールマーケティング
- マーケティングオートメーション(MA)
- リードジェネレーション(見込み顧客獲得)
- カスタマーサポート・カスタマーサクセス
- アクセス解析・広告効果測定
- データ分析
- リサーチ・市場調査
- 口コミ分析・ソーシャルリスニング
- O2O(Online to Offline)
- EC・通販・ネットショップ
- 多言語・翻訳
- 動画・映像制作
- AR・VR制作
- 統計データ
- マーケティングお役立ちレポート
- 連載
- チャットボット
- Web会議
- 動画マーケティング