デザイン学部で学習を開始しよう!

まずは無料会員登録!デザインスキルや知識を得られる授業をオンラインで開講中。最新のWeb制作スキルを身につけましょう。

配色 サイト アプリ


スクーのWebデザイナー学部でもとても人気がある「配色」関係の授業。デザイン関係のお仕事以外でもプレゼン資料や報告書でのExcelの配色、ひいては、普段の洋服のチョイスまで、配色について悩む機会は多いもの。美術の授業以外に配色について学ぶ機会がないまま今に至ってしまった人も多いのでは?そこで今回は、ブラウザやiPhone/Androidアプリで使える配色ツールをご紹介します!

 

1. HUE/360


配色 サイト アプリ

http://hue360.herokuapp.com/

最初のキーカラーを決めれば、自動的に配色的に間違いのない配色を絞り込んでくれます。デザインもキレイで直感的に操作出来ます。スクーの授業でも度々登場している間違いの無いツールと言えそうです。ちなみに、hueとは色相(色合い)という意味です。

・Color Space(RGBとか)
・Hue Step(色合い)
・Chroma Step(彩度/明度)
・M&S Judge(ONにすると、色相環上調和する色を選んでくれる)

以上4つを操作しながら、調和する色を選ぶことが出来ます。資料制作の時にも便利そうですね。

 

2. Color Scheme Designer


配色 サイト アプリ

http://paletton.com/

こちらも、Hue/360のように、基準となる色を決めると調和の取れるカラーパターンを示してくれます。カラーコードの取得も可能です。ぐるぐる色を変えられるので、マウスでクリックして楽しんでみてください。

 

3. 0to255


配色 サイト アプリ

http://www.0to255.com/

選択する、又はカラーコードを入力するとグラデーションが生成されます。生成したカラーのコピーも可能です。


4. hailpixel.com


配色 サイト アプリ

http://color.hailpixel.com/

Hue/360やColor Scheme Designerよりももっと直感的な配色ツールです。ブラウザ上にあるマウスポインタを変えていくと色が変わっていきます。クリックするとその座標の色を記憶してくれるので、色々な配色を試すときに使ってみてください!

 

5. colourcode


配色 サイト アプリ

http://colourco.de/

hailpixel.comとほぼ同じツールです。違うのは、生成したカラーパタンをダウンロード出来るところ。hailpixel.comよりも細かい設定が可能です。

 

6. colorHexa


配色 サイト アプリ

http://www.colorhexa.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(黒))のいずれにも対応しています。

 

7. Adobe Color CC


配色 サイト アプリ

https://color.adobe.com/ja/create/color-wheel/

Adobe製品を日常で使っているのであれば、恐らくおなじみの「Adobe Color CC」。Adobe Creative CloudのアカウントIDが必要になりますが、PhotoshopやIllustratorといったAdobeのアプリケーションとの連携機能があるので、ワークフローの中で使うのが良さそうです。

 

8. coolors.co


配色 サイト アプリ

http://coolors.co/intro/

 

今回ご紹介する中で最も直感的な「coolors」です。まずは以下のURLからアクセスして「スペースキー」を叩いてみてください。センスの良い配色がどんどん展開されていきます。もちろん、カラーコードの取得も可能です。

 

9. COLOURlovers


配色 サイト アプリ

http://www.colourlovers.com/

他のデザイナーはどんな配色をしてるのか、気になりますよね?配色は色んなサイトをコピーしたり、デザイン系の書籍を読んだりすることで鍛えていくことになりますが、「COLOURlovers」は配色の投稿サイトとして、他の人の配色やカラーパターンを見ることが出来ます。良さそうなものがあれば、これまでのツールでカラーコードを調べて自分のデザインや資料に活かしましょう。


10. Color-Sample.com


配色 サイト アプリ
 

http://www.color-sample.com/

色見本と配色のサイトです。色の名前だけでなく、カラーコードの取得も可能なので、色についての情報のほとんどは、この「Color-Sample.com」で大丈夫そうです。

 

11. NIPPON COLORS


配色 サイト アプリ

http://nipponcolors.com/

日本の伝統色が一目で分かるサイトです。デザインもオシャレでカッコイイので、見ていて飽きないです。例えば、山吹色や橙と言われてもどんな色かぱっとイメージ出来ないことも多いですよね。そんなときにぜひ活用してみてください。日本人らしいセンスも養われるかも。

 

12. 和の色


配色 サイト アプリ

http://irononamae.web.fc2.com/colorlist/wa.html

 

13. 和色大辞典


配色 サイト アプリ

http://www.colordic.org/w/

上記2つのサイトは、NIPPON COLORSと似ています。和の色についてまとまっています。

 

14. PANTONE


配色 サイト アプリ

http://www.pantone.com/pages/fcr/?season=spring&year=2015

国際的に信頼性の高いカラートレンド管轄機関である、Pantone crownedが毎年発表するテーマカラーです。製品開発をしたり印刷の仕事を一度でもしたことがあればPANTONE(パントーン)という名前は一度は聞いたことがあるのでは? PANTONEが発表するトレンドカラーに応じて、世界中のファッションブランドが自分たちのコレクションに取り入れています。日本の伝統色と打って変わって、世界のトレンドを創り出していますね。サイトでは他でも配色についての色々が紹介されているので参考にしてみてくださいね。

iPhoneやAndroidのアプリでも配色について調べることが出来るものがあります。特に外出時や打ち合わせ時などで使いたいですね。

 

15. 【iPhone/Androidアプリ】カラーガイド


配色 サイト アプリ

https://itunes.apple.com/jp/app/karagaido/id405007873?mt=8

色見本帳の「DICカラーガイド」を持ち運べるアプリです。

このアプリがすごいのは撮影した写真の中にある色のカラーコードなどの情報を調べる事ができることです。写真とサイトや資料のトーンアンドマナーをあわせたりするときに使うと良さそうです。Androidアプリもあります。

配色 サイト アプリ配色 サイト アプリ

いかがでしたか? 知らなかったサイトやアプリケーションがあればチェックして、ご自身のWebデザインや資料制作に活かしていただければ幸いです! 配色はセンスというよりもルールがあります。そのルールを知ってこれらのツールを活用してみてください!


WEBデザイナー学部では毎週Webデザインについての分かりやすい授業をお届けしております♪

初心者でWebデザインを学びたい方、自分のWebデザインの技術を磨きたい方は是非チェックしてみてください

学部登録(無料)すると、自分のカリキュラムの進捗が一目で分かるようになり、先生がイチオシするツール紹介などの役立つコラムつきメールが受け取れるようになります!


 

スクー教務課:中西

  • このエントリーをはてなブックマークに追加

デザイン学部の記事一覧

生放送授業への参加は無料です
Schooの会員登録および生放送授業への参加は無料です。生放送授業では先生に質問したり他のユーザーと一緒に楽しく学ぶことができます。
×