センスの良い配色のWebサイトを作る方法

Django Basic App Colors By: Nathan Borror

センスの良い配色を選ぶ時には、彩度・明度・色相のバランスや青/白は清潔感、黒は高級感などの色の意味を知ってバランスの良い組合わせ模索する必要があります。

配色の本が出ている位なので、こういったセンスを磨くのはとても大変です。

私は本職のデザイナーでは無いですが、システムを構築する上で多少はUI部分の設計もしないといけなかったりします。

そんな時に言われた一言が「配色を自分で選ぶな!」でした。

知識の無い人が配色を選んでも、もの凄く素人っぽい画面になるか、ごちゃごちゃして落ち着きの無い感じになってしまいます。

そのため配色を選択するときには、配色のパターンサイトを利用すると知識が無くても良い配色パターンがデザインできます。

今回は、そんな配色パターンを決めてくれるサイトを紹介します。

センスの良い配色の選び方
  1. 配色パターンを探して利用する
  2. 好きな色から配色パターンを構築する

配色パターンを探して利用する

いろいろな配色パターンを展示してくれるサイト「COLOURlovers
COLOURlovers
このように、2~5色程度で配色パターンが展示されています。
色の量で使用する色のバランスが指定されており、Webサイトを構築するときの参考になります。
color
また、閲覧の多いパターンや人気のパターンなどが簡単に検索できます。
COLOURlovers2

Webサイトを一から構築するときには、このようなサイトがとても役に立ちますので、お気に入りのパターンを探してみてください。

好きな色から配色パターンを構築する

好きな色がある場合や、既に構築済みのサイトに色を追加する場合は一つの色から配色パターンを作成してくれる「Color Scheme Designer」がおすすめです。
ColorSchemeDesigner
円グラフの右下のRGBカラーをクリックすることで色の指定が出来ます。
ColorSchemeDesigner1
「Light Page example」「Dark page examle」をクリックすると、このように指定した配色パターンを使用したサイトイメージを見ることが出来ます。
ColorSchemeDesigner3
ColorSchemeDesigner4
上のアイコンをクリックすることで、補色や類似色のパターンの切り替えも出来て自分のイメージに合った色を探すことが出来ます。
ColorSchemeDesigner5

以上、配色パターンを決めることに役だつ2つのサイトを紹介しました。

個人的には、1からサイト構築するときには「COLOURlovers」を、既存のサイトを変更するときには「Color Scheme Designer」を利用するのが良いと思います。

divider

Trackback URL

http://webnonotes.com/design/web-color/trackback/

No Comments Yet

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>