ポスト・ミニマリズム期に出現するWebデザイン配色の3つの「潮流」
Webデザインの潮流として昨今よく見られるのが、*「ミニマリズム」「ミニマルデザイン」*と呼ばれるデザインスタイルです。
ミニマルデザインでは、できるだけ画面上から余分な要素を取り除くことで、シンプルで分かりやすく、洗練されたデザインに仕上げていきます。しかし、多くのWebサイトがミニマルデザインを取り入れた結果、どれも*「似たり寄ったり」になってしまい、Webデザイン界では次なるトレンド*が模索されています。
そこで今回は、*ポスト・ミニマリズム期に出現するWebデザイン配色の3つの「潮流」*をご紹介します。シンプルで洗練されたデザインから、個性的で主張の強いデザインに遷移しています。あなたがWebデザイナーなら、どの潮流を取り入れますか?
フラットデザイン、ミニマリズム、次は・・・?
ミニマリズムのWebサイト / https://www.artek.fi/en/
絵画や建築などでは「古典主義」「ロマン主義」「印象派」「アール・ヌーヴォー」「ダダイスム」「シュルレアリスム」など、ある一定のスパンで芸術の*「流行」「潮流」*とも呼べる流れが存在します。
現代では、WebページというカンバスにWebデザイナーが、いわば現代風の「芸術作品」を描いており、ここにも絵画や建築と同じような潮流が存在します。
例えば、2010年代前半にはパステルカラーを中心とした*「フラットデザイン」が流行し、多くのWebデザイナーたちがそのデザインに触発されました。また、2015年から2016年にかけて2色のビビッドな「デュオトーン」カラーが流行したり、デザインから余計な要素を取り除いた「ミニマリズム」*(または「ミニマルデザイン」)もよく見られるようになりました。
ここ数年、Webデザイントレンドとして定着してきた「ミニマリズム」ですが、こういったデザインに飽き始めているデザイナーやユーザーも出始めています。一方、次のトレンドの芽も見え始めています。
ポスト・ミニマリズム期に出現中のWebデザイン配色の3つの「潮流」
1. ポップアート配色
Droopboxが2017年10月に採用したリブランディングは、*「ポップアート配色」*とでも呼べるような、大胆な配色をしています。
ポップアートは1960年代にアメリカを中心に流行した*「大量生産・大量消費」*に代表される色使いの作品で、アンディ・ウォーホルがマリリン・モンローを描いた作品はあまりにも有名です。ポップアートはアメリカの漫画にも影響を与えています。
こうした配色が流行する少し前、オンラインではにわかに*「ブルータリズム」*なる潮流が流行しています。
ブルータリズムではレイアウトを想定以上に崩していますが、「ポップアート配色」では、ブルータリズムの破壊的なレイアウトは一旦無視して、独特な色使いだけを取り入れたものということもできるでしょう。
参考:
今までの常識を覆す?斬新すぎる「ブルータル」なWebデザインを取り入れたホームページ11選
この配色のポイント
アンディ・ウォーホルの「マリリン・モンロー」
ポップアート配色では、コントラストが非常に重要になってきます。色使いはビビッドで主張の激しい色使いがポイントです。
色相環で考えてみると、最近取り入れられているようなグラデーションができるだけ隣接した2色を取り入れているのに対して、ポップアート配色では色相環状で距離のある2つ以上の色が使われやすいようです。
こうした色使いは記憶に残りやすいものの、コントラスト比が強すぎると、ユーザーによっては不快に感じてしまうことがあるので注意しましょう。
2. セミ・エレクトリック配色
インターネット黎明期におなじみだった、青い色のハイパーリンクは、*「エレクトリックブルー」*と呼ばれています。アメリカのニューヨークを拠点にしている大手総合サービス会社Bloombergも、ホームページにエレクトリックブルーを採用しています。
しかし、エレクトリックブルーは白背景で用いると非常にコントラスト比が高くなってしまううえに、ほぼ原色を使っており、どうしても主張が激しくなってしまいます。そこで昨今では、*「セミ・エレクトリック配色」*とでも呼ぶべき、明度を上げてパステル調にした色使いが多く使われています。
エレクトリックブルーの場合は、先進的・前衛的なイメージが強く押し出されていますが、セミ・エレクトリック配色では柔らかい印象を受けます。青色の他に、緑やオレンジのような*「蛍光色」*(まさに蛍光ペンで使うような色)などもアクセントとして使われます。
この配色のポイント
この配色では、明度を上げた配色が好んで使われます。下の図は、通常の12色の色相環の明度を上げたものです。
色相環の明度を上げると、面白いことが分かります。青や紫、緑はもともと白背景とのコントラスト比が高く、明度を上げるとパステルブルー・パステルピンク・エメラルドグリーンのように見えます。一方、黄色や黄緑などの一部の色は、もともと白背景ではコントラスト比が高くないため、消えかかってしまいます。
セミ・エレクトリック配色でも通常は白背景でデザインされることが多いようですが、そうなると「使える色」は限られてくるでしょう。
3. グラデーション
グラデーションは目新しいデザインではありませんが、ポスト・ミニマリズム期を代表する配色として、多くのWebデザイナーに好まれています。グラデーションを使用する際には、できるだけ色相環で近い色の配色を選ぶと綺麗に見えます。
グラデーションを使ったデザインの中でも、今最も人気を集めているのが、グラデーションを使って背景全体にオーバーレイをかける*「バックグラウンドオーバーレイ」*と呼ばれる手法です。全画面の画像に、表現したいイメージにあうオーバーレイを上手にかけることができれば、単に画像を配置するよりも印象付けて表示することができるようになります。
グラデーションを使った配色のポイント
グラデーションは、古くはWindows95時代のOffice製品のワードアートでおなじみでしたが、昨今では*「美しく見える」2色*の組み合わせが選ばれています。美しく見える2色の組み合わせは、色相環上では隣接する2色、あるいは1つ飛ばしの2色になります。
ポップアート配色の場合は、色相環上で離れた色を使っていますが、これをグラデーションで混ぜ合わせると色のつなぎ目部分が黒っぽくなってしまい、美しくありません。ポップアート配色は、明確な色の境界線があるからこそ印象に残るのです。
また、グラデーションを利用する際に、アクセシビリティにも考慮しましょう。背面にグラデーションを利用する場合には、上に重ねる文字とのコントラスト比に気をつけます。
上:白黒 / 下:実際のバナー
例えば、Spotifyのホームページでは鮮やかなグラデーションを取り入れていますが、これを白黒表示で見ても、はっきりと文字が識別できるようになっています。グラデーションでは異なる色を重ね合わせることになりますが、どちらの色でも文字の可読性が高くなるように気をつけましょう。
まとめ
Webデザインの新しい潮流として登場したミニマリズムですが、早くもこの潮流には転換点が訪れています。今回紹介した3つの「派閥」は、グレーを基調としたミニマリズムに比べると、いずれも色鮮やかで「印象に残る」色使いを心がけている点では同じだと言えます。
しかしながら、Webデザインにおいて以下の点は最低限押さえておくとよいでしょう。
(1) 対象とするユーザーのイメージにぴったり合った色使いやデザインになっているか?
(2) 色を使いすぎて雑多な感じになっていないか?
(3) 色盲者にも優しい色使いになっているか?
とりわけ重要なのは、最後の点です。Webデザインの流行を追いかけすぎると*「独りよがり」なデザインになりがちです。潮流を追いかけつつも、万人が安心して利用できるユニバーサルなデザイン*を心がけましょう。
参考:
今すぐできる!アクセシビリティを劇的に改善するための3つのポイント
- Webサイト
- Webサイトとは、インターネットの標準的な情報提供システムであるWWW(ワールドワイドウェブ)で公開される、Webページ(インターネット上にある1ページ1ページ)の集まりのことです。
- Webサイト
- Webサイトとは、インターネットの標準的な情報提供システムであるWWW(ワールドワイドウェブ)で公開される、Webページ(インターネット上にある1ページ1ページ)の集まりのことです。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- オンライン
- オンラインとは、通信回線などを使ってネットワークやコンピューターに接続されている状態のことをいいます。対義語は「オフライン」(offline)です。 現在では、オンラインゲームやオンラインショップなどで、インターネットなどのネットワークに接続され、遠隔からサービスや情報などを利用できる状態のことを言う場合が多いです。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- インターネット
- インターネットとは、通信プロトコル(規約、手順)TCP/IPを用いて、全世界のネットワークを相互につなぎ、世界中の無数のコンピュータが接続した巨大なコンピュータネットワークです。インターネットの起源は、米国防総省が始めた分散型コンピュータネットワークの研究プロジェクトARPAnetです。現在、インターネット上で様々なサービスが利用できます。
- リンク
- リンクとは、インターネット上では、あるページの中に記された、他のページの所在を表す情報のことを「ハイパーリンク」と呼び、これを略した言葉です。リンクのある場所をクリックすると、他のページにジャンプするようになっています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- バナー
- バナーとは、ホームページ上で他のホームページを紹介する役割を持つ画像ファイルです。画像にリンクを貼り、クリックするとジャンプできるような仕組みになっています。画像サイズの規定はありませんが、88×31ピクセルや234×60ピクセルが一般的です。また、静止画像だけでなく、アニメーションを用いたバナーもあります。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●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・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング