2012-11-15

便利すぎる!Webサイトの配色で困ったときのジェネレータ

 仕事でサイトデザインなどを担当する時があります。もしくはある程度レイアウトが固まっていてhtmlを組んでるときに細かいところを調整したり。などなど
その時に必ずと言っていいほど迷う箇所があります。それがサイトの色です。完全に使用する色とかが決まっていて内部の機能を組んでいくだけならまだスムーズに作業へ取りかかれます。
 サイトデザインも含めて開発をしているとどうしても確認作業をしているときに。。。

 「あーここの色が気になる。。。。」

 という衝動にかられ、色の数値をちまちまと変えて都度確認して微妙にバランスが気になる。。。このグラデーションが。。。文字の色がぼやけた。。。とかとかあります。
 とくにグラデーションをかけるときや同系統の色の組み合わせを行う場合などはもっと簡単に色の調整ができないかと感じていました。

 最近はhtmlやcssに関するジェネレータが充実していることもあり、上にあるような作業は実はあっさり解決できることなんです!




いくつかある中で気に入ってる色に関するジェネレータ



http://colorschemedesigner.com/

 というジェネレータが自分の中で便利すぎます!実際にサイトを見ていただくと分かるんですがマウス操作で色の指定ができます。さらに同系統の色の濃い薄いまでも表示してくれます。
 さらに色の明暗までも調整可能なのでちょっと色を変えたいと思ったときにここでバランスなんかがすぐに確認できるんです。


実際にテンプレート的なサイトにした場合の色のバランス



ここでは色をただ表示させて同系統の色を並べているだけです。このままでは実際にサイトに落とし込んだ場合にどのような色具合になるかはまだちょっとわかりにくです。

 しかししかし!そこもちゃんと解決できます!

 色のプレビューがあるタブに

 「Light page example」
 「Dark page example」

 があります。各タブをクリックしていただくと分かりますが選んだ色の系統でサイトデザインを起こした場合のサンプル的なサイトを表示してくれます。

 これは自分が作成しているとこで設定を変えずにまずは一般的にどのようなかんじになるか確認できると思います。


 色々あるジェネレータの中で自分はこれをがっつり利用させてもらっているんで紹介させていただきました。
 とくに色のバランスがまだつかめず自分で作るのがちょっと。。。っていう人にはおすすめです。

0 件のコメント :

コメントを投稿

LinkWithin

Related Posts Plugin for WordPress, Blogger...