ドリップン・スニップ | どりっぷんのブログ

ドリップン・スニップ

あなたの生活役立つWEB情報イッパイお届け
スポンサーリンク

理論を直感的に実践!ノンデザイナーの為の配色ツール、hue/360が凄い

2017/07/24

Pocket

こんにちは、ノンデザイナーです。
「デザイン」という言葉の定義については戦争になりかねないのでしませんが、ここでのノンデザイナーとは
「配置や配色などの知識が全くない且つ、センスもない人」という事にさせていただきます。つまり僕です。

それでも生きていれば誰だって、何かを配置したり、何かの配色を決めたりしなければならない瞬間というのがやってきます。
そして、それらの全てをデザイナーにお願いするわけにはいかないのです!(予算的に!)

自分個人で趣味でやるブログや、趣味でリリースするアプリ、趣味で何かを飾り付けるとか…。
例え何かしらのサービスを利用しても、最終的には自分でデザインを決定しなければなりません。テンプレートが利用出来るのはテンプレートが想定している範囲だけなのです!

そこで、今回は配色について、とあるデザインの基本的な考え方を使いやすくまとめて公開してくださっている「hue/360」というwebアプリをご紹介します。

https://hue360.herokuapp.com

hue/360の使い方

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

hue_clicked

こんな風に、調和のとれる色を自動的に絞り込んでくれます。

そして、左下に出てきたバーの「Print User Color」をクリックすると…
__HUE___360___The_Color_Scheme_Application

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

その色を背景色にした場合のケースを、その場で見て確認することができます。

この配色、さすがノンデザイナー。

まとめ

いかがでしたでしょうか?
配色の選択が楽に出来るだけでなく、目で見て確認出来るため、上の画像のような失敗はすぐに「あ、ダメだなこの配色」と判ります。
普段自分にセンスがないな〜と思っている人は、多分経験と理屈が解っていないだけなので、web制作にかぎらず、配色をする場面になったらこのHUE360を使い倒して自分のセンスを磨いてみてはいかがでしょう?

                           

  関連記事

Facebookでログインって?実際何が行われているか、あなたは知っていますか?

こんにちは、皆さんInstagramはどのくらい使われていますか? 僕は、まずア ...

Skypeよりも使いやすいかも!音声グループ通話ソフトDiscord

こんにちは、夜はゲームに明け暮れる僕です。 今はオンラインで遠方の友達と、いつで ...

SlackとGoogleが手を組んだぞ!…でも、Slackって何?便利なの?

こんにちは。 GoogleとSlackが手を組み、Google Drive内のB ...

ちゃんと使えてる?Gmailの本当の使い方 - 3. Inboxの使い方応用編/iPhoneと連絡先を同期する

この記事は2016年5月20日に書かれています。 前々回はGmailのアカウント ...

何かと話題の会計ソフトfreee。便利な点や何故今MFと揉めているのか?

こんにちは。2年位個人事業主として働いていた事もある僕です。 さらにその前には4 ...

-アプリ/サービス
-,