WordPressなどで色のカスタマイズに便利なWEB色見本原色大辞典

コンテンツ

カラーはデザイン的にも機能的にもとても大事
印刷における色の規格＝CMYK
光の色の規格＝RGB
WEBで使う「カラーコード」
WEB色見本原色大辞典

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

こんにちは。WEBディレクターの金川です。

今日はWordPressに限定しない「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とかです）

↓画像編集ソフト上でコピーしたカラーコードを指定する。

というふうに利用しているんです。
画像編集ソフトとは、アドビ・イラストレーターとかフォトショップとかですね。

あるいはWordPressであればテーマ（テンプレート）上で、専門知識不要でいろんなパートを色を変更する＆指定するなどのカスタマイズが可能なので、そんな時にも重宝しますよ。

以上WEBでの色について紹介させていただきました。

色って素敵ですね！

WEB master Profile

金川豊

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