記事の詳細

WEBサイトなんてデザイナーの好きな色使ってんだろ? といわれたことがあります。

私の好きな色は黒に赤に金か銀。赤のところを青に変えてもいいです。

パステルカラーよりばっきりとしたビビッドカラーが好きです。

これらを使ってWEBサイトなんか作った日には、よほど上手に配色しないと目がお亡くなりになります。ビューワーやユーザーの目を狙い撃ちにするデザイナーがどこにいるものでしょうか……!

そんなわけでお色のお話をしましょう。

印刷するときの色【CMYK】と電子機器の画面越しに見る色【RGB】は根本的に違う

印刷するときはインクを使います。これは物理的に存在する色です。これを減法混色といいます。シアン・マゼンダ・イエロー・ブラックの頭文字や末文字を引っ張ってCMYKです。全部混ぜると黒になります。

電子機器は光を放ちます。これによって色を作ります。これを加法混色といいます。光の三原色とも言いますね。レッド・グリーン・ブルーの頭文字をとってRGBです。全部混ぜると白になります。

RGB-CMYK

印刷物を作る時にはCMYKを使います。画面で見えるWEBやムービーを作る時にはRGBを使います。

つまり世の中に出回っているチラシやパンフレットは例外なくCMYKで作られています。たまに特色もありますけれどもそれはまた別のお話。

「パンフスキャンしてWEBにつかってー」ってWEBデザイナーにやるともれなくWEBデザイナーが泣きます。

WEBサイトを作る時のオススメなカラーピッカーWEBサービス

以下、WEBサイトを作るにあたって、RGBのカラーをピックアップしてくれる便利なサイトをご紹介。

もちろんいろんなもののカラーバリエーション作成にお役立ち。そう、画面越しならね!

1.ウェブ配色ツール Ver2.0

ウェブ配色ツール Ver2.0

>>http://www.color-fortuna.com/color_scheme_genelator2/

1色を作れば自動的にいろいろ配色してくれる便利サイトさま。右サイドで簡易に条件も指定できるので、初心者さまはこちらオススメ

2.Adobe Color CC

Adobe Color

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

デザイナーがお世話になりまくってるAdobeさまのところのカラーホイール。様々なルールを指定することができるうえに、画像を取り込んで配色を作ることも可能作った配色を保管しておくこともできます。Adobe IDが無くても無料でアカウントが作成できます。

あとこちらモバイルアプリもありまして、無料です

3.Color Hex Color Codes

Color-hex

>>http://www.color-hex.com/

左上部のテキストボックスに自分が使いたい色のカラーコード、あるいはその横のボックスから適当に色をチョイスすると、その色のカラーデータ暗くした場合の色の変化明るくした場合の色の変化いくつかの配色と、バックグラウンドをブラックorホワイトにしたときの色のイメージ、さらには簡易なCSSまで作ってくれちゃうすぐれもの。

一つの色にこだわりたいときはぜひこれ。

4.coolors

2016-05-27_19h41_51

>>https://coolors.co/

START THE GENERATORから始められます。

Adobeのカラーホイールと似ていますが、これはそれぞれの色が動的に移動できます。また、選んだ色をPDFやPNGといった画像形式でダウンロードすることも可能。これはプレゼンなどでも「だいたいこんなお色」とアピールするに結構お役立ち。

また、それぞれのパネルを調整するだけでなく、全体の色彩や明るさなどを一度に編集することもできます。

5.paletton

2016-05-27_19h42_19

>>http://paletton.com/

視覚的に色が確認できるという点で、とてもありがたいツールです。

左の丸い色相環の、●になっている部分をぐりぐり動かしたり、その上にあるベースカラーの色数を選んだりすると、右側にパレットとして表示してくれます。真ん中の丸いところもぐなんぐなんと動きます。

表れた色を右のパネル上でオンマウスすると、カラーコードがとれますし、右パネルの下の「PREVIEW」からパネルの形式の変更ができます。その横の「EXAMPLE」簡易なHPの配色もしてくれちゃいます。「TABLE/EXPORT」ではカラー情報をHTMLやCSSなど、一括して提供してくれます。

わりと玄人さん向けのツールです。

ちょっと楽しいカラーピックのサイト

そんなこと言ったって色なんかぱっとでてこないよ! というときは割と神頼みをします。

ファルベコローレ

>>【ファルベコローレ】http://farbecolore.com/

文字を入れるとカラーイメージを分析してくれる楽しいサイトさま。その日の気分で適当なフレーズを入れて、色を選んでもらっています。

ファルベコローレ

あとこちらは有名な和色のサイトさま。見ているだけでも楽しいし癒されます。

NIPPONCOLORS

>>【NIPPON COLORS】http://nipponcolors.com/

MUNSELLをスライドさせてぽやっとなごんでおります。

 

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
久保田 里美

久保田 里美

価値あるコンテンツ制作部インクループ株式会社
デザイナー。コンセプト設立からデザインを理論立てて起こすことをポリシーに、WEB媒体から紙媒体まで幅広く手掛けていきたいデザイナー。日々勉強日々精進。

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

特集

エクセルトラブルと解決策のまとめ アクセス数を増加させるための方法まとめ 初心者向けWordPressの設定方法まとめ

AD

お知らせ

平成28年度補正予算 小規模事業者持続化補助金
ページ上部へ戻る