デザインに色は欠かせません。たとえ白黒デザインでも、異なる色合いやコントラストを利用しているでしょう。
フラットスタイルの人気が続いていることもあり、Webデザインにおいて配色は、よりユーザーの注目を集める要素となっています。最近数ヶ月の目立ったトレンドのひとつに、鮮やかで、ハッピーな色合いに、明るく刺激的な色を利用するケースが増えています。
詳細は以下から。
ファッション、インテリアデザインからの影響
これらの明るい色使いは、オンラインだけのトレンドではなく、世界中のあらゆる業界で、特にファッションやインテリアデザインの分野で注目されています。
ユーザーが普段着たい洋服の色や、家のインテリアとして使うカラーリングを、Webデザインでも楽しむようになっていきています。色がもつ意味合いを利用することで、ユーザーとの強いつながりを獲得することができるでしょう。
なぜ今なのか？
鮮やかな配色カラーリングの人気は偶然ではなく、高画質ディスプレイとフラットデザインの爆発的な普及が、大きく関係しています。
4KやRetinaなどの高画質ディスプレイでは、色をより豊かに表現できるようになりました。以前のウェブデザイナーは、216色のWebセーフカラーしか利用できませんでしたが、いまでは何百万という色をカバーしています。また同じ時期に、フラットデザインが人気となったことで、もうひとつ前のトレンドで、リアル感を追求したSkeuomorphicスタイルからの強い反動も、鮮やかな配色カラーの人気を加速させた原因と言えるでしょう。
今回は、Webデザインにおける、トレンド配色カラーの使い方テクニック10個をまとめて見ていきましょう。
01. 単色による色彩設計。
ミニマルスタイルの繊細さと、同じ色の微妙な違いを表現する、単色による色彩設計が増えてきています。
特にこのテクニックは、鮮やかな配色との組み合わせがよくはまります。複数の色を利用することによる、カラーリングの衝突が少ないぶん、デザイナーはより挑戦的な色使いを採用することができます。
上記サンプルでは、普段まあり使われることのないライムグリーン色を利用しています。みどり色のメインキャラクターと同じカラーリングを活用することで、見出しタイトルやUIデザインがアクセントとなっています。
太字タイポグラフィーやゴーストボタンなどの、ミニマルスタイルの特長と一緒に利用することで、より視覚的なイメージを扱いやすくなり、見た目にも楽しい雰囲気を表現できるでしょう。
通常、鮮やかな配色は、派手でひと目をひきやすく、スクリーンでまとめて見るとカオス状態になってしまいます。単色による色彩設計は、デザインを作成前に、そのような問題を解決してくれます。
02. 色をつかってアクセント。
効果的な色の使い方のひとつは、アクセントとして利用することで要素を強調したり、目立たなくしたりする方法です。明るい色はほかの配色から目立ちやすく、色によって視覚的な階層を作品に取り入れるデザイナーもいます。
上記サンプルでは、文字テキストとプロダクト商品のカラーリングを、ピンク色で統一することで、黒のダーク系背景をバックに、圧倒的な存在感を表現しています。
03. ブロック型コンテンツ、ホバーエフェクトに色を活用。
コンテンツをブロック、カード状デザインに表現するこのトレンドは、見た目だけでなく、ユーザーの使いやすさを考慮した、ユーザビリティーも人気の理由のひとつです。
グリッドレイアウトを参照したブロック型コンテンツは、配色を利用することで、うまくカテゴリ分けをしています。また、カード型デザインでよく利用されている、マウスカーソルを合わせることで背景カラーを変化させる、ホバーエフェクトテクニックも人気です。これらのテクニックを組み合わせて利用するケースも多いでしょう。
上記サンプルサイトでは、カード状に並べられた、色鮮やかなコンテンツが強調されています。また、コンテンツにホバーすることで、背景が半透明カラーにアニメーション付きに変化します。これによって訪れたユーザーが、どの要素をクリックできるのか、分かりやすく判断することができます。
ブロック型コンテンツとホバーエフェクトは、スタイリッシュなデザインであり、より実践的な選択とも言えるでしょう。カラフルに色分けされたレイアウトに、よりスムーズな操作性を実現するホバーエフェクトが採用されています。
04. テクスチャをつかった配色カラーリング。
デザインにさり気ない質感を加えるテクスチャは、鮮やかな配色カラーとうまく組み合わせることで、素晴らしデザインへと生まれ変わります。
上記サンプルサイトでは、イラストイメージや背景にテクスチャを利用することで、明るすぎる色合いをソフトに仕上げています。また、イラストにテクスチャを重ねることで、ユニークなデザインを表現でき、Skeuomorphicスタイルになりすぎるのを抑えています。
偶然にも同じタコス関連の以下のサイトで、テクスチャをUIデザインに取り入れています。ヘッダー上部のわずかな影は、奥行きを演出し、ロゴデザインのよいアクセントとなっています。
05. 文字テキストを強調、ハイライト。
注目を惹きやすい鮮やかな配色は、特定のキーワードや、文字テキストを強調するのにもピッタリです。どんなメッセージを伝えようとしているのか、色で表現することもできます。
上記サンプルでは、「LOVE」という単語がアクセントになっています。Call-to−Actionボタンと色をマッチさせることで、つながりがあることを無意識に伝えています。
06. ボタンやUIデザインへの利用。
文字テキストと同じように、ボタンや他のUIデザイン要素も、鮮やかな配色によって強調することができ、注目をあつめるだけでなく、操作性を改善してくれるでしょう。
上記サンプルでは、Call-to-Actionボタンにだけ赤色を利用することで、他のモノクロデザインにくらべて、ユーザーの目線が集まりやすくなっています。
同じように上記サンプルでは、オレンジ色のCall-to-Actionボタンが、プロダクト商品を含めた、白色の背景から目立っています。背景カラーとバックパックの色を統一したことで、よりオレンジ色がアクセントになっています。
07. ナビゲーション・メニューへの活用。
色をつかったモノの分別、整理するメリットは、昔から知られています。Webサイトのナビゲーションメニューに色を活用することで、異なるカテゴリの分別がしやすくなります。特に、情報量の多いメディアサイトでは効果的なテクニックで、ナビゲーションメニューをシンプル化することができます。
上記サンプルでは、虹色をつかってカテゴリーを8つに分別しています。あまり正統なやり方ではありませんが、ブランドイメージをうまく反映しています。（会社名: カラー・ライン（Coloured Lines）より）
08. 美しいグラデーションカラーの活用。
配色カラーにおけるデザイントレンドは、周期的に訪れていることもあり、以前の古いテクニックが再発見されるケースも少なくありません。ミニマルスタイルとの相性も良く、使いやすい鮮やかな配色のグラデーションの人気も再燃しています。
09. 太字タイポグラフィーと一緒に利用。
鮮やかな色使いと、ダイナミックな太字タイポグラフィーの組み合わせによって、メッセージをより明確にする伝えることができます。以下のサンプルは、ピンク色の強烈な背景カラーに、白の太字テキスト文字を利用することで、ユーザーの目線がメッセージへと、自然と誘導されるでしょう。
10. カラーオーバーレイ・フィルタの活用。
最近さらに増えている、色を使った人気トレンドのひとつが、カラーレンズを装着したような、カラーオーバーレイ・エフェクトです。重ねる色によって、印象がガラリと変わってくるので、配色には注意が必要でしょう。
また以下参考サイトでは、淡いパステルカラーを重ねることで、スタイリッシュでエレガントなイメージに仕上がります。
以下サンプルでは、赤色のカラーフィルタを重ねることで、明るく楽しい雰囲気を演出しています
さいごに、。
Web Design Book of Trends 2015-2016
今回参考にした無料eBookは、より詳しい配色カラートレンドだけでなく、現在の流行トレンド10個がまとめて解説されています。また166種類の具体的な参考サイトや、100種類を超える無料素材もリストアップされているので、この機会にいかがでしょう。
2015年要チェック！流行中の注目Webデザイントレンド13個まとめ
ただいま人気沸騰中のデザイントレンドをまとめています、一度確認しておくとよいかもしれません。
参照元リンク : 7 On-Trend Colors Tips for 2015 & 2016 | Creative Bloq
