記事の詳細
WEBサイトの色や配色を決めるときに役に立つWEBサービス5選
WEBサイトなんてデザイナーの好きな色使ってんだろ? といわれたことがあります。
私の好きな色は黒に赤に金か銀。赤のところを青に変えてもいいです。
パステルカラーよりばっきりとしたビビッドカラーが好きです。
これらを使ってWEBサイトなんか作った日には、よほど上手に配色しないと目がお亡くなりになります。ビューワーやユーザーの目を狙い撃ちにするデザイナーがどこにいるものでしょうか……!
そんなわけでお色のお話をしましょう。
今回のブログの見出しはコチラです!
印刷するときの色【CMYK】と電子機器の画面越しに見る色【RGB】は根本的に違う
印刷するときはインクを使います。これは物理的に存在する色です。これを減法混色といいます。シアン・マゼンダ・イエロー・ブラックの頭文字や末文字を引っ張ってCMYKです。全部混ぜると黒になります。
電子機器は光を放ちます。これによって色を作ります。これを加法混色といいます。光の三原色とも言いますね。レッド・グリーン・ブルーの頭文字をとってRGBです。全部混ぜると白になります。
印刷物を作る時にはCMYKを使います。画面で見えるWEBやムービーを作る時にはRGBを使います。
つまり世の中に出回っているチラシやパンフレットは例外なくCMYKで作られています。たまに特色もありますけれどもそれはまた別のお話。
「パンフスキャンしてWEBにつかってー」ってWEBデザイナーにやるともれなくWEBデザイナーが泣きます。
WEBサイトを作る時のオススメなカラーピッカーWEBサービス
以下、WEBサイトを作るにあたって、RGBのカラーをピックアップしてくれる便利なサイトをご紹介。
もちろんいろんなもののカラーバリエーション作成にお役立ち。そう、画面越しならね!
1.ウェブ配色ツール Ver2.0
>>http://www.color-fortuna.com/color_scheme_genelator2/
1色を作れば自動的にいろいろ配色してくれる便利サイトさま。右サイドで簡易に条件も指定できるので、初心者さまはこちらオススメ。
2.Adobe Color CC
>>https://color.adobe.com/ja/create/color-wheel/
デザイナーがお世話になりまくってるAdobeさまのところのカラーホイール。様々なルールを指定することができるうえに、画像を取り込んで配色を作ることも可能。作った配色を保管しておくこともできます。Adobe IDが無くても無料でアカウントが作成できます。
あとこちらモバイルアプリもありまして、無料です
3.Color Hex Color Codes
左上部のテキストボックスに自分が使いたい色のカラーコード、あるいはその横のボックスから適当に色をチョイスすると、その色のカラーデータ、暗くした場合の色の変化、明るくした場合の色の変化、いくつかの配色と、バックグラウンドをブラックorホワイトにしたときの色のイメージ、さらには簡易なCSSまで作ってくれちゃうすぐれもの。
一つの色にこだわりたいときはぜひこれ。
4.coolors
START THE GENERATORから始められます。
Adobeのカラーホイールと似ていますが、これはそれぞれの色が動的に移動できます。また、選んだ色をPDFやPNGといった画像形式でダウンロードすることも可能。これはプレゼンなどでも「だいたいこんなお色」とアピールするに結構お役立ち。
また、それぞれのパネルを調整するだけでなく、全体の色彩や明るさなどを一度に編集することもできます。
5.paletton
視覚的に色が確認できるという点で、とてもありがたいツールです。
左の丸い色相環の、●になっている部分をぐりぐり動かしたり、その上にあるベースカラーの色数を選んだりすると、右側にパレットとして表示してくれます。真ん中の丸いところもぐなんぐなんと動きます。
表れた色を右のパネル上でオンマウスすると、カラーコードがとれますし、右パネルの下の「PREVIEW」からパネルの形式の変更ができます。その横の「EXAMPLE」で簡易なHPの配色もしてくれちゃいます。「TABLE/EXPORT」ではカラー情報をHTMLやCSSなど、一括して提供してくれます。
わりと玄人さん向けのツールです。
ちょっと楽しいカラーピックのサイト
そんなこと言ったって色なんかぱっとでてこないよ! というときは割と神頼みをします。
>>【ファルベコローレ】http://farbecolore.com/
文字を入れるとカラーイメージを分析してくれる楽しいサイトさま。その日の気分で適当なフレーズを入れて、色を選んでもらっています。
あとこちらは有名な和色のサイトさま。見ているだけでも楽しいし癒されます。
>>【NIPPON COLORS】http://nipponcolors.com/
MUNSELLをスライドさせてぽやっとなごんでおります。
コメント
この記事へのトラックバックはありません。
この記事へのコメントはありません。