Advertisement

color-in-ui-design-2017-pt1

 

配色とは、他のデザイン要素と同じように、適度に使用することが大切です。最大で3つの色数に抑えることで、より良い結果を得ることができる傾向があります。デザインプロジェクトで色を適用することは、バランスを取ることと深く関係しています。使用する色数が増えれば増えるほど、バランスを取るのがより複雑になります。

 

色はデザインに心地よい品質を加えるのではなく、補強します。
Pierre Bonnard

 

カラーパレットで決めた以外の色が必要がときは、色彩と色合いをうまく利用することで、異なるデザイントーンを実現できるでしょう。今回は、ウェブサイトの配色を決めるときに覚えておきたい7つのポイントを詳しくご紹介します。

 

 

 

60−30−10ルール

 

このインテリアデザインルールは、いつの時代にも活用できるデザインテクニックで、配色を手軽にまとめるのに役立ちます。60%+ 30%+ 10%の比率は、バランスの良い色を取るためのものです。この方程式は、バランス感覚をつくり、視線がある焦点から次の焦点に快適に動かすのためにうまく機能します。そして信じられないほど使い方も簡単です。

 

60%がまとまりのある色合いで、30%が補色、10%がアクセントカラーとなります。

 

1-color-in-ui-design

 

 

色の意味合いについて

 

科学者は何世紀にも渡って、特定の色の生理的効果を研究してきました。美しさに加えて、色は感情や結びつきを表現できます。色の意味は、文化や状況によって異なる場合があります。それぞれの色が持つ意味合いを検討して、配色を選ぶようにしましょう。

 

2-color-in-ui-design

 

  • : 情熱、愛、危険
  • : 落ち着き、責任感、安全
  • : 神秘的、エレガント、邪悪
  • : 純粋、静寂、清潔
  • : 情熱、愛、危険

 

color-theory-top
海外デザインブログCanva Design School Blogで公開された「Color Theory Tips and Inspiration」より許可をもらい

 

 

まずはグレイスケールから

 

デザインの早い段階で色や色調を使いがちですが、配色を調整するために多くの時間を費やしてしまったという経験はないでしょうか。デザインを魅力的に見せることができますが、この手順は見直す必要があるようです。

 

代わりに、デザイン要素の配置とレイアウトに集中してみましょう。こうすることで、デザイン制作を手掛ける時間を節約できるでしょう。また、このような制約をもってデザインを進めることで、より生産的に制作を進めることができます。別のトーンを利用することで、見た目が退屈になってしまうのを防いでくれるでしょう。

 

3-color-in-ui-design

 

 

真っ黒や灰色の利用は避けよう。

 

これまでに私が学んだもっとも重要な配色トリックのひとつが、彩度のない灰色を使用しないようにすることです。実生活では、純粋な灰色はほとんど存在せず、黒色にも同じことが当てはまります。

4-color-in-ui-design

 

 

少しだけ彩度を追加することを、常に念頭に置いておきましょう。無意識のうちに、ユーザーにとってより自然で、親しみやすい印象に仕上げることができます。

 

5-color-in-ui-design

 

 

自然にインスパイアされた配色を。

 

最高の色の組み合わせは自然から生まれ、ナチュラルな見た目を実現できます。デザイン解決のために自然を参考にする最善の点は、配色カラーパレットが常に変化していることです。インスピレーションを得るために、周りをぐるりと見回してみましょう。

 

6-color-in-ui-design

 

intro-to-natural-palette-1
わたしたちの生活のなかで、もっとも美しいものは何でしょう。私にとってそれは自然で、海や川、山、森、草原、花や動物たちです。地球上には素晴らしい風景画たくさんあり、そ

 

 

コントラストをうまく保とう。

 

いくつかの色の組み合わせはうまくいきますが、色同士が衝突してしまうこともあります。カラーホイールを使うことで、配色をうまくまとめる決定的なルールがあります。いくつかのルールを知っておく必要がありますが、手動で行う必要はありません。より詳しいカラーホイールの使い方については下記エントリーを参考にどうぞ。

 

7-color-in-ui-design

 

ultimate-color-combination
デザイン制作のなかでも、正しい色の組み合わせを見つける作業は、もっとも重要な過程のひとつで、デザインのたびに頭を悩ますデザイナーも多いでしょう。 今回

 

 

インスピレーションを得よう。

 

UIデザインの参考インスピレーションを探しているときは、Dribbbleをのぞいてみると良いでしょう。他のデザイナーが特定の色をどのように使用しているのか知りたいときは、Dribbble Colors をチェクすることでさまざまなデザインをまとめて確認することができます。

 
8-color-in-ui-design

 

 

動画ビデオやプリントデザイン、インテリアデザイン、ファッションなど参考にできる魅力的なものはたくさんあります。デザインに活用できるクリエイティブで興味深い配色を見つけてみましょう。以下参考サンプルは、KPOPのミュージックビデオを配色の参考にしており、どれもゴージャスな色使いとなっています。

 

9-color-in-ui-design

 

 

配色ツールを活用しよう。

 

配色カラーパレットをより手軽に決定、作成するために、利用可能ないくつかの配色ツールも一緒にまとめています。これらのツールを利用することで、デザイン制作時間の短縮にもつながります。

 

color-tool2015-top
PhotoshopVIP編集部: 2015年1月9日に公開された記事を再編集、追記しています。 配色はあらゆるデザインの基本となる、とても重要な要素の

 

Coolors.co

配色を決めるときにいつも利用している愛用ツールのひとつ。お好みの色をひとつ決め、スペースバーをクリックするだけで、美しい配色カラーパレットを生成することができます。また、画像イメージをアップロードすることで、その画像から配色カラーパレットを作成することもできます。ひとつの結果だけでなく、参照したい色を変更できるカラーピッカー機能にも対応しています。

 

10-color-in-ui-design

https://coolors.co/

 

Kuler

Adobeが公開している、長い間利用されている配色ツールで、オンラインで利用できるブラウザ版とデスクトップ版が用意されています。デスクトップ版では、配色カラースキームをそのままPhotoshopに書き出すこともできます。

 

11-color-in-ui-design

https://color.adobe.com/

 

Paletton

12-color-in-ui-design

http://paletton.com/

 

Kulerにも似ていますが、大きな違いは5つの色合いに限られていない点です。利用したい色が決まっていて、一緒に使える配色を探すときにオススメしたいツール。より具体的なツールの使い方については、以下エントリーも参考にどうぞ。

 

simple-web-guide-top
海外デザインブログ Smashing Magazine で公開された「The Simple Web Developer's Guide to Color」では、1つ

 

Designspiration.net

配色に関するアイデアはあるが、どんな組み合わせ参考例があるか確認したいときにオススメしたいツール。5種類までの色を選択するだけで、希望の色合いを利用した画像イメージを検索することができます。特定のカラーパレットを使って検索するだけでなく、実際にどのように配色をデザインに実装するのか確認するのにも非常に適しています。

http://designspiration.net/

 

Shutterstock Lab Spectrum

選択下配色の写真を検索するのにはどうすれば良いでしょう。Spectrumというこちらのツールを利用すれば、特定の色合いを利用した写真の検索を行うことができます。透かし入りの小さなプレビュー画像は配色カラーパレットを生成するのに十分なので、特に会員登録を行う必要もありません。

13-color-in-ui-design

https://www.shutterstock.com/labs/spectrum/

 

Tineye Multicolr

特定の色を利用した写真を探し、さらに利用している色の量も指定したいときは、Tineyeツールがオススメです。このウェブサイトでは、Flickerより1000万を超えるクリエイティブ・コモンズの写真イメージを、データベースとして利用しています。

http://labs.tineye.com/multicolr/

 

 

さいごに。

 

配色はマスターするのがむずかしいコンセプトで、デジタルデザインではなおさらです。今回紹介したテクニックを利用することで、適切な色を見つける作業を容易にしてくれるでしょう。そして見事な配色カラーパレットを作成するもっとも最良の方法は、何度も試行錯誤することです。では、デザインを楽しんで!

 

 

参照元リンク : How to use colors in UI Design by Wojciech Zieliński – Medium