10/14(Mon)
スクーのWebデザイナー学部でもとても人気がある「配色」関係の授業。デザイン関係のお仕事以外でもプレゼン資料や報告書でのExcelの配色、ひいては、普段の洋服のチョイスまで、配色について悩む機会は多いもの。美術の授業以外に配色について学ぶ機会がないまま今に至ってしまった人も多いのでは？そこで今回は、ブラウザやiPhone／Androidアプリで使える配色ツールをご紹介します！
最初のキーカラーを決めれば、自動的に配色的に間違いのない配色を絞り込んでくれます。デザインもキレイで直感的に操作出来ます。スクーの授業でも度々登場している間違いの無いツールと言えそうです。ちなみに、hueとは色相（色合い）という意味です。
・Color Space（RGBとか）
・Hue Step（色合い）
・Chroma Step（彩度／明度）
・M&S Judge（ONにすると、色相環上調和する色を選んでくれる）
以上4つを操作しながら、調和する色を選ぶことが出来ます。資料制作の時にも便利そうですね。
こちらも、Hue/360のように、基準となる色を決めると調和の取れるカラーパターンを示してくれます。カラーコードの取得も可能です。ぐるぐる色を変えられるので、マウスでクリックして楽しんでみてください。
選択する、又はカラーコードを入力するとグラデーションが生成されます。生成したカラーのコピーも可能です。
Hue/360やColor Scheme Designerよりももっと直感的な配色ツールです。ブラウザ上にあるマウスポインタを変えていくと色が変わっていきます。クリックするとその座標の色を記憶してくれるので、色々な配色を試すときに使ってみてください！
hailpixel.comとほぼ同じツールです。違うのは、生成したカラーパタンをダウンロード出来るところ。hailpixel.comよりも細かい設定が可能です。
Hue/360やColor Scheme Designerよりも少し高度ですが、カラーコードを入力すると、その色に関する情報を表示してくれるツールです。
カラーコードとは、「#000000」や「#F7D358」というように#とアルファベットと数字を入力することでWebサイトでの色を指定する事ができます。どの色がどのカラーコードなのかは、こちらのURLを参考にしてみてください。http://html-color-codes.info/
「Colorhexa」は、コンピュータ上で色を表示するときに一般的に使う「RGB」（Red／Green／Blue）と印刷するときに主に使われる「CMYK」（Cyan（青）／Magenda（赤）／Yellow（黄）／Key Plate（黒））のいずれにも対応しています。
https://color.adobe.com/ja/create/color-wheel/
Adobe製品を日常で使っているのであれば、恐らくおなじみの「Adobe Color CC」。Adobe Creative CloudのアカウントIDが必要になりますが、PhotoshopやIllustratorといったAdobeのアプリケーションとの連携機能があるので、ワークフローの中で使うのが良さそうです。
今回ご紹介する中で最も直感的な「coolors」です。まずは以下のURLからアクセスして「スペースキー」を叩いてみてください。センスの良い配色がどんどん展開されていきます。もちろん、カラーコードの取得も可能です。
他のデザイナーはどんな配色をしてるのか、気になりますよね？配色は色んなサイトをコピーしたり、デザイン系の書籍を読んだりすることで鍛えていくことになりますが、「COLOURlovers」は配色の投稿サイトとして、他の人の配色やカラーパターンを見ることが出来ます。良さそうなものがあれば、これまでのツールでカラーコードを調べて自分のデザインや資料に活かしましょう。
色見本と配色のサイトです。色の名前だけでなく、カラーコードの取得も可能なので、色についての情報のほとんどは、この「Color-Sample.com」で大丈夫そうです。
日本の伝統色が一目で分かるサイトです。デザインもオシャレでカッコイイので、見ていて飽きないです。例えば、山吹色や橙と言われてもどんな色かぱっとイメージ出来ないことも多いですよね。そんなときにぜひ活用してみてください。日本人らしいセンスも養われるかも。
http://irononamae.web.fc2.com/colorlist/wa.html
http://www.colordic.org/w/
上記2つのサイトは、NIPPON COLORSと似ています。和の色についてまとまっています。
http://www.pantone.com/pages/fcr/?season=spring&year=2015
国際的に信頼性の高いカラートレンド管轄機関である、Pantone crownedが毎年発表するテーマカラーです。製品開発をしたり印刷の仕事を一度でもしたことがあればPANTONE（パントーン）という名前は一度は聞いたことがあるのでは？ PANTONEが発表するトレンドカラーに応じて、世界中のファッションブランドが自分たちのコレクションに取り入れています。日本の伝統色と打って変わって、世界のトレンドを創り出していますね。サイトでは他でも配色についての色々が紹介されているので参考にしてみてくださいね。
iPhoneやAndroidのアプリでも配色について調べることが出来るものがあります。特に外出時や打ち合わせ時などで使いたいですね。
https://itunes.apple.com/jp/app/karagaido/id405007873?mt=8
色見本帳の「DICカラーガイド」を持ち運べるアプリです。
このアプリがすごいのは撮影した写真の中にある色のカラーコードなどの情報を調べる事ができることです。写真とサイトや資料のトーンアンドマナーをあわせたりするときに使うと良さそうです。Androidアプリもあります。
いかがでしたか？ 知らなかったサイトやアプリケーションがあればチェックして、ご自身のWebデザインや資料制作に活かしていただければ幸いです！ 配色はセンスというよりもルールがあります。そのルールを知ってこれらのツールを活用してみてください！
WEBデザイナー学部では毎週Webデザインについての分かりやすい授業をお届けしております♪
初心者でWebデザインを学びたい方、自分のWebデザインの技術を磨きたい方は是非チェックしてみてください
学部登録（無料）すると、自分のカリキュラムの進捗が一目で分かるようになり、先生がイチオシするツール紹介などの役立つコラムつきメールが受け取れるようになります！
スクー教務課：中西
