ポスト・ミニマリズム期に出現するWebデザイン配色の3つの「潮流」

更新日: 2018年06月26日

デザイン

Webデザインの潮流として昨今よく見られるのが、*「ミニマリズム」「ミニマルデザイン」*と呼ばれるデザインスタイルです。

ミニマルデザインでは、できるだけ画面上から余分な要素を取り除くことで、シンプルで分かりやすく、洗練されたデザインに仕上げていきます。しかし、多くのWebサイトがミニマルデザインを取り入れた結果、どれも*「似たり寄ったり」になってしまい、Webデザイン界では次なるトレンド*が模索されています。

そこで今回は、*ポスト・ミニマリズム期に出現するWebデザイン配色の3つの「潮流」*をご紹介します。シンプルで洗練されたデザインから、個性的で主張の強いデザインに遷移しています。あなたがWebデザイナーなら、どの潮流を取り入れますか？

フラットデザイン、ミニマリズム、次は・・・？

ミニマリズムのWebサイト / https://www.artek.fi/en/

絵画や建築などでは「古典主義」「ロマン主義」「印象派」「アール・ヌーヴォー」「ダダイスム」「シュルレアリスム」など、ある一定のスパンで芸術の*「流行」「潮流」*とも呼べる流れが存在します。

現代では、WebページというカンバスにWebデザイナーが、いわば現代風の「芸術作品」を描いており、ここにも絵画や建築と同じような潮流が存在します。

例えば、2010年代前半にはパステルカラーを中心とした*「フラットデザイン」が流行し、多くのWebデザイナーたちがそのデザインに触発されました。また、2015年から2016年にかけて2色のビビッドな「デュオトーン」カラーが流行したり、デザインから余計な要素を取り除いた「ミニマリズム」*(または「ミニマルデザイン」)もよく見られるようになりました。

ここ数年、Webデザイントレンドとして定着してきた「ミニマリズム」ですが、こういったデザインに飽き始めているデザイナーやユーザーも出始めています。一方、次のトレンドの芽も見え始めています。

ポスト・ミニマリズム期に出現中のWebデザイン配色の3つの「潮流」

1. ポップアート配色

https://dropbox.design/

Droopboxが2017年10月に採用したリブランディングは、*「ポップアート配色」*とでも呼べるような、大胆な配色をしています。

ポップアートは1960年代にアメリカを中心に流行した*「大量生産・大量消費」*に代表される色使いの作品で、アンディ・ウォーホルがマリリン・モンローを描いた作品はあまりにも有名です。ポップアートはアメリカの漫画にも影響を与えています。

こうした配色が流行する少し前、オンラインではにわかに*「ブルータリズム」*なる潮流が流行しています。

ブルータリズムではレイアウトを想定以上に崩していますが、「ポップアート配色」では、ブルータリズムの破壊的なレイアウトは一旦無視して、独特な色使いだけを取り入れたものということもできるでしょう。

参考：
今までの常識を覆す？斬新すぎる「ブルータル」なWebデザインを取り入れたホームページ11選

この配色のポイント

アンディ・ウォーホルの「マリリン・モンロー」

ポップアート配色では、コントラストが非常に重要になってきます。色使いはビビッドで主張の激しい色使いがポイントです。

色相環で考えてみると、最近取り入れられているようなグラデーションができるだけ隣接した2色を取り入れているのに対して、ポップアート配色では色相環状で距離のある2つ以上の色が使われやすいようです。

こうした色使いは記憶に残りやすいものの、コントラスト比が強すぎると、ユーザーによっては不快に感じてしまうことがあるので注意しましょう。

2. セミ・エレクトリック配色

https://bloom.co/

インターネット黎明期におなじみだった、青い色のハイパーリンクは、*「エレクトリックブルー」*と呼ばれています。アメリカのニューヨークを拠点にしている大手総合サービス会社Bloombergも、ホームページにエレクトリックブルーを採用しています。

しかし、エレクトリックブルーは白背景で用いると非常にコントラスト比が高くなってしまううえに、ほぼ原色を使っており、どうしても主張が激しくなってしまいます。そこで昨今では、*「セミ・エレクトリック配色」*とでも呼ぶべき、明度を上げてパステル調にした色使いが多く使われています。

エレクトリックブルーの場合は、先進的・前衛的なイメージが強く押し出されていますが、セミ・エレクトリック配色では柔らかい印象を受けます。青色の他に、緑やオレンジのような*「蛍光色」*(まさに蛍光ペンで使うような色)などもアクセントとして使われます。

この配色のポイント

この配色では、明度を上げた配色が好んで使われます。下の図は、通常の12色の色相環の明度を上げたものです。

色相環の明度を上げると、面白いことが分かります。青や紫、緑はもともと白背景とのコントラスト比が高く、明度を上げるとパステルブルー・パステルピンク・エメラルドグリーンのように見えます。一方、黄色や黄緑などの一部の色は、もともと白背景ではコントラスト比が高くないため、消えかかってしまいます。

セミ・エレクトリック配色でも通常は白背景でデザインされることが多いようですが、そうなると「使える色」は限られてくるでしょう。

3. グラデーション

https://www.nycpride.org/

グラデーションは目新しいデザインではありませんが、ポスト・ミニマリズム期を代表する配色として、多くのWebデザイナーに好まれています。グラデーションを使用する際には、できるだけ色相環で近い色の配色を選ぶと綺麗に見えます。

グラデーションを使ったデザインの中でも、今最も人気を集めているのが、グラデーションを使って背景全体にオーバーレイをかける*「バックグラウンドオーバーレイ」*と呼ばれる手法です。全画面の画像に、表現したいイメージにあうオーバーレイを上手にかけることができれば、単に画像を配置するよりも印象付けて表示することができるようになります。