![](https://dripn-snip.com/wp-content/plugins/lazy-load/images/1x1.trans.gif)
理論を直感的に実践!ノンデザイナーの為の配色ツール、hue/360が凄い
2017/07/24
こんにちは、ノンデザイナーです。
「デザイン」という言葉の定義については戦争になりかねないのでしませんが、ここでのノンデザイナーとは
「配置や配色などの知識が全くない且つ、センスもない人」という事にさせていただきます。つまり僕です。
それでも生きていれば誰だって、何かを配置したり、何かの配色を決めたりしなければならない瞬間というのがやってきます。
そして、それらの全てをデザイナーにお願いするわけにはいかないのです!(予算的に!)
自分個人で趣味でやるブログや、趣味でリリースするアプリ、趣味で何かを飾り付けるとか…。
例え何かしらのサービスを利用しても、最終的には自分でデザインを決定しなければなりません。テンプレートが利用出来るのはテンプレートが想定している範囲だけなのです!
そこで、今回は配色について、とあるデザインの基本的な考え方を使いやすくまとめて公開してくださっている「hue/360」というwebアプリをご紹介します。
hue/360の使い方

hue/360は、マンセルの配色理論とM&S配色理論を、誰にでも直感的に使えるようにしたwebアプリです。
理論を知らなくても使える!というのが凄い点で、基準にしたい色を1つクリックすると…

こんな風に、調和のとれる色を自動的に絞り込んでくれます。
そして、左下に出てきたバーの「Print User Color」をクリックすると…

こんな風に、使われている色の16進数カラーコードがまとめて表示されます!
また、基準の色をクリックする時にShiftキーを押していると、

その色を背景色にした場合のケースを、その場で見て確認することができます。
まとめ
いかがでしたでしょうか?
配色の選択が楽に出来るだけでなく、目で見て確認出来るため、上の画像のような失敗はすぐに「あ、ダメだなこの配色」と判ります。
普段自分にセンスがないな〜と思っている人は、多分経験と理屈が解っていないだけなので、web制作にかぎらず、配色をする場面になったらこのHUE360を使い倒して自分のセンスを磨いてみてはいかがでしょう?
関連記事
-
Confluenceの具体的な活用方法! 02
さて、引き続きConfluenceの具体的な利用法についてです。 記事周りからが ...
-
Twitterやfacebookで動画は重い…でもGIFなら…!?- 1.git viewer
こんにちは、近所に猫カフェが出来たので足繁く通っています、僕です。 猫カフェって ...
-
レスポンシブデザインのテストツール、Resizer
最近麦茶量産体制に入っている僕です。 1日で割りとダメになっちゃうので、毎晩まだ ...
-
え、そのパソコン捨てるんですか?Ubuntuで復活させませんか? 02 - インストール
では前回の続き、Ubuntuのインストール編(前編)を進めていきます。 STEP ...
-
Serato Pyro で専属DJをいつもとなりに!
センスよく音楽を繋ぐ高機能ミュージックプレイヤー。Pyroをご紹介!