WEBや印刷のデザインする際に色の指定を間違いなく伝える方法

カラーはデザイン的にも機能的にもとても大事

こんにちは。WEBリアル集客プロデューサーの金川です。

今日は「色=カラー」について書こうと思います。

WEBサイトや印刷物のデザインをするにあたって、クライアントさんと「色」についてのやりとりをすることが多々あります。

今でこそ、たくさんの苦い?経験から行き違いが発生しないコツをしっかりつかんでいますが、以前はいろんな行き違いがあってたいへん難儀した経験があるわけです。

それは、色に対する考え方や捉え方はそれぞれ違うということが主な原因です。

例を上げてみますと、「ヘッダーの最上部のラインはピンクにしてね」という要望があったとするでしょう。

でもね、ピンクと一口に言っても、ピンクの種類って一つじゃないですよね。

例えばだけれど、ちょっと上げただけでピンクってこんだけあります。もちろんまだまだ一部です。

なので、「ピンクでお願い」「了解です」だけでは確実に事故ります。

仕上がりまでにもちろんチェックは入るんだんろうけど、修正に手間がかかることは間違いないですね。

なので、ピンクはピンクでも、具体的にどのピンクなのかを特定することが重要になってきます。

印刷における色の規格=CMYK

さて色なんですが、印刷における色とWEB上での色とはまったく別の規格になります。
具体的にはこう。

印刷における色の規格=CMYK

C=シアン≒青
M=マゼンダ≒赤
Y=イエロー=黄色
K=ブラック=黒

というふうに、ざっくりとですが、4つの基本色の掛け合わせで決められます。

一つ例を上げてみますね。

というように、上記の割合のCMYKの色の配合で、こんなピンクが構成されてるんですね。

光の色の規格=RGB

次にWEBで使う色の規格です。
まあWEBのというより、光で構成される色の規格といったほうが正確なんですけどね。
モニタースクリーンで表示される色のことなので。

光の色の規格=RGB

R=レッド
G=グリーン
B=ブルー

この三つの光の要素で光の色は構成されてるんです。

RGBの光の強さの割合によって光の色は決まります。

まあいろいろ書きましたが、もちろん覚える必要なんてないし、そもそも覚えられません。
なんとなくそうなんやー的に雰囲気を掴んでもらえれば大丈夫。

WEBで使う「カラーコード」

ちょっとややこしいんですが、WEBでカラーを指定する際には、実際にはRGBではなく、「カラーコード」というものを指定するんですよ。

WEBで使う色のは全てカラーコードが決まっていまして、そのカラーコードを指定することで枚違いなく絶対的な色の指定ができます。
カラーコードは「#」が前に付く6ケタの数字とアルファベットの組み合わで表現されるんです。

上記の色の例で言えば、

というわけです。
ま、これもこんな感じなんやーとニュアンスをわかっていただくだけで大丈夫です。

WEB色見本 原色大辞典

さて、少々難しげなことを書いた後はちょっと楽しげなことを紹介させていただきますね。

それはコレ。WEBの色見本です。

WEB色見本 原色大辞典 – HTMLカラーコード

さまざまなサイトでWEBカラーの見本を見せてくれるんですが、ボクはこのサイトが一番見やすくて分かりやすいので、ここばっかり見てます。

また和風とか、パステルとか、いろんなテイストを集めいてくれているので、使いやすいだけではなくて、見ててとっても楽しいんですね。

具体的な使いは下のように使います。

↓WEB色見本で使いたい色を選ぶ。

↓その色のカラーコードをコピーする(#ffa500とかです)

↓自分でデザイン編集するなら、画像編集ソフト上でカラーコードを適用する。

↓外部に指示するなら、このカラーコードをデザイナーさんなりに伝える。

 

こうすれば、色の指定の行き違いが発生する余地が無いので安心です。

ただ、その指定した色がセンス的にどうなんだというのは別の問題です(笑)

 

以上、デザインする上での色のチェイスについて紹介させていただきました。

WEB master Profile

金川豊
金川豊
(かながわ ゆたか)
WEBマーケティングコンサルタント。
有限会社紫電改 代表
中小企業・商店さんが自分自身で積極的に情報発信し、お客様との関係性を深めて商売繁盛につなげていくことを支援します。
それらを実現させるためにWordPressを活用して、自分で編集更新できるホームページおよびブログサイトの制作および自主制作のための講座を開催。