続きを読む… »

適切な画像形式を選ぶ

ウェブサイトでは主にJPEG（ジェイペグ）形式、GIF（ジフ）形式、PNG（ピング）形式の3種類の画像を使うことが出来ます。それぞれに特色があり、状況に応じて使い分けなければ、きれいに画像を表現することが出来ませんので、最低限の知識を持っておく必要があります。

JPEG形式

JPEG形式は16,777,216色全てを使うことが出来る画像形式です。そのため、色数が多い写真の表現などに向いています。

逆に色数の少ないイラストでは、にじんだように見える事もあります。このような場合には、GIFあるいはPNGの画像を使う方がよいでしょう。

こちらがGIF形式の画像になります。輪郭もしっかりと見え、文字の内部の色が荒れていないのがおわかりいただけるでしょう。

GIF形式

GIF形式は16,777,216色中の256色（あるいはそれ以下）の色を使って画像を表現します。

この写真は先程と同じ物ですが、GIF形式で作られたものです。光によって生まれた微妙な陰影を少ない色数で十分に表現することが出来ていないのがわかるかと思います。写真にはGIFはあまり向かず、主に色数が少ないイラストやボタンのような小さめのパーツ、アイコンなどで使われます。

またGIFでは背景を透明にすることが出来るので、背景の色とGIF画像を重ね合わせることが出来ます（透過GIF）。重ね合わせる場合、画像を作る時に背景の色を指定しておく必要があります。これをやっておかないと予想もしない汚い縁取りが出来てしまいますので注意が必要です。

背景が透明のGIFの例

JPEG 透過機能がない	GIF 透過していない	透過GIF 透過色に白を指定	透過GIF 透過色に#6396C0を指定

またGIF形式では、パラパラ漫画のようなアニメーション機能があります。ネットショップでは新着情報のところの「NEW」などのアイコンで使われているのをよく見かけます。

PNG形式

PNG形式は比較的新しい画像形式で、最近多く用いられるようになってきました。PNGではJPEGのような1,677万色の表示とGIFのような256色の表示の両方が可能で、なおかつ背景を透明にすることも可能です。ただし、透明のPNGはInternet Explorer6では正しく表示することは出来ません。またGIFのようなアニメーション機能はありません。

ではそんなに高機能ならアニメーション以外は全てPNGで画像を作ればよいのではないかと思いますが、写真の場合は多くの場合JPEGよりもファイルサイズが大きくなります。256色以下の場合には、本来はファイルサイズはGIFよりも小さくなるはずですが、画像処理に慣れていないと逆に大きくなる場合もあるので注意が必要です。ネットショップでは画像が多いため、ファイルサイズが大きくなることで、表示が遅くなるのが心配です。

この写真の場合は、先程のJPEGに比べると17倍ほどのファイルサイズになっています。つまりこの写真1枚を読み込む間に、17枚の写真が読み込みるのです。しかし、見かけはJPEGのものとあまり代わりありません。となれば、ここでは本来JPEGを使うのが正解となります。

基本的には写真はJPEG、色数の少ないイラストなどはGIF、JPEGでにじんだりする場合にはPNGと使い分けるのが無難でしょう。

« 隠す

続きを読む… »

16進数による色の指定

パソコンで表現出来る全ての色は、赤(R)・緑(G)・青(B)の発光する強さの組み合わせによって作られています。この3色はそれぞれ0から255の256段階で変えることが出来ますので、256の3乗ということで、16,777,216色が使える色数となります。

ではこれをどのように表現するのかというと、6桁の16進数の数字で表すことで、色を指定することが可能です。16進数とは16で位が一つ上がるので、私たちがいつも使っている10進数とは違った表現になります。

16進数ではFFというのが255となり、6桁のうち前から2桁ずつ赤・緑・青の順で、発光する強さを表します。それらが全て最も強く光ると白が作られます。この白はFFFFFFとなるわけですが、その前に16進数であることを表す#(ハッシュと読む)の記号が付けられ、#FFFFFFとなります。逆に全く光っていない状態の黒は#000000となります。このような数字をRGB値などと呼びます。

いくつか基本的な色で例を挙げておくと、#FF0000は最初の2桁である赤だけが最大限光っている状態になりますので、鮮やかな赤が表示されます。#A4CFDEですと、赤がA4、緑がCF、青がDEとなり、くすんだ水色が出来上がりました。

なにやら難しい感じもしますが、多くのソフトでは16進数を意識せずに色を選べるようになっているので、心配はありません。ただウェブや本などに掲載されている配色サンプルや筆者が提供している「配色ツール」、実際のウェブページを構築しているHTMLやCSSなどでも、ほとんどの場合にこの数値で色が指定されています。

#のついた6桁の数字が色指定であることを知っておくことで、ブログなどのテンプレートのHTMLやCSSのようなものでも、どこを変えればよいかわかるようにもなりますので、表現方法だけは知っておくようにしましょう。

また他にも色指定の方法はいくつか存在しますが、この表記方法だけを知っておけば十分です。

色を作るツール

ホームページ・ビルダーやBiND for WebLiFE* 3などのホームページを作るツールや、PhotoshopやFireworksなどの画像を加工するツールには、必ず色を指定するツールが付いてきますが、そのような物を使わずにサイトを製作する場合や、重いソフトを立ち上げずにもっと簡単に色を選びたいという場合もあるでしょう。

そのような時には、フリーソフトを利用するとよいでしょう。様々なものがありますが、筆者はフィールドイーストの提供しているFE Color Paletteというソフトを利用しています。

« 隠す

続きを読む… »

補色配色

補色とは色相環の反対側に位置する2色による配色です。色相環の反対にあることから、コントラストが付けやすいため、目立たせたい部分などでよく使われたりします。

色相環で2色を選ぶ場合、その位置関係を角度で表すことがありますが、補色の場合は正反対の位置にあることから、180度の配色ということになります。ただし、通常はそこまで厳密には考える必要はありません。だいたい180度くらいの色相同士を選べればよいでしょう。

補色配色を作る時は、2色を同じトーンから選ぶ必要はなく、色相が補色の関係になっていればよいのです。片方の色を明るく、もう一方を暗くすると、明度の差も付くため、はっきりとした配色になります。逆に明度が近い色の補色を選ぶと、ギラギラして見えたりすることもあるため注意が必要です。

類似色相配色

類似色相とは、近い色相同士の配色です。似た色の組み合わせで統一感が生まれ、容易にまとまるので、配色の基本と言えます。こちらも補色配色と同様に、どのトーンから色を選んでも構いません。

類似色相を角度で表すと、同じ色相を0度として、45度くらいまでの色相を類似色相と呼びます。その中でも隣り合わせの色相は隣接色相と呼ぶこともあります。

この辺りは特に細かいことを覚えなくとも構いませんが、ここでは似た色を合わせるのが配色の基本で、必要に応じてアレンジを加えると、配色をしやすいと覚えておきましょう。

配色例を見て気づかれた方もいるかもしれませんが、2色を並べた場合、色の三属性（色相・明度・彩度）の差が大きいと配色ははっきりし、小さいと穏やかな印象になります。これらを調整することで、色の印象をコントロールすることも出来ますが、それはまた別の機会に説明することにします。

« 隠す

続きを読む… »

トーンとは

トーンは明度と彩度を複合した概念で、日本語では色調などと呼ばれます。

などと書いても大変わかりにくいと思いますが、要するに「明度と彩度が割と似た色を集めてみたら、きれいに揃った感じがして、印象に残りやすそうな配色になります」ってことです。そこでいくつかのブロックに色を分けてみました。

これはJIS規格で決められているトーン（らしきもの）を元に、私が勝手に作ったものです。ですので、細かい色の違いは気にしなくてよいのですが、「ごくうすい～」辺りの色は優しい印象がしますし、「暗い」辺りの色ですと落ち着いて固いような雰囲気がします。

「ごく暗い」色を見て、明るくて心が浮き立つという人はあまりいないかと思いますし、色を見て感じるイメージは個人差はあるものの、バラバラというほどでもありませんので、作りたいイメージに合ったトーンを選ぶと良いでしょう。

トーンを組み合わせる

同じトーンから色を選んで配色を行うと、それぞれのトーンに合ったイメージが生まれます。彩度の高いトーンでは、元気な感じや派手な感じを受け、彩度が低くなるにつれて、落ちついた地味な印象を受ける色のグループが出来上がります。

このように何かのイメージを伝えたい場合には、トーンを使って配色を考えると便利です。ただし、同じトーンだけで色を選ぶと、きつすぎたりぼんやりしたりすることがあります。そのため、違うトーンから色を選ばなければならないことが多々あります。

このような場合に、他のトーンから大きく色を配置すると、元々のトーンのイメージは崩れてしまいます。そこで、違うトーンを使うときは、少しだけ追加すれば、最初に伝えたいと思ったイメージを維持することが出来ます。

自分が最初にどのようなイメージを表現したいのかをしっかりと定めておき、そこからぶれることのないように配色することを心がけておきましょう。「なんとなく」で色を決めるのは、最も避けたいことの一つです。

今回のチェックポイント

• トーンとは明度と彩度が組み合わさったもの
• トーンを使った配色では、トーンごとのイメージを作ることが出来る
• 後から追加する色は少な目の量で

« 隠す

続きを読む… »

明度とは？

明度とは色の明るさのことです。明るい・暗いという言葉は普段の生活でもよく使いますが、それと同じような感覚で使います。明るい色を多く使うと軽く柔らかい印象になり、暗い色だと重く固い印象になります。

明度は高い・低いで表すことがあります。明るい色は「明度が高い色」「高明度色」、暗い明度は「明度が低い色」「低明度色」、どちらとも言えない色は「中明度色」のように表現することもあります。

重要なのは色の明度は見やすさや読みやすさと密接に関わっているということです。色相や彩度が違っていたとしても、明度が近い色の組み合わせの場合、境界線がぼんやりとしてしまいます。

特にモノクロで印刷した場合には、色相や彩度の違いはわからなくなり、明度の差だけが読みやすさに影響します。「プリントアウトしたら重要な情報が読めなかった」や「地図を持っていこうとしたけど、モノクロでは全然道がわからなかった」ということのないように、明度に差を付けることで、読みやすくするということを常に心がけなければなりません。

彩度とは？

彩度とは色の鮮やかさのことです。最も鮮やかな色は純色と呼ばれ、大変派手な印象を持っています。純色から彩度がどんどんと下げていくと、色は白・灰色・黒に近づいていき、色相はわからなくなってしまいます。このような白・灰色・黒を彩度の無い色という意味で無彩色と呼びます。くすんだ色は純色に比べると大変地味に見えます。

彩度も明度と同様に高い・低いで、その度合いを表現します。鮮やかな色は「彩度が高い色」「高彩度色」、くすんだ色は「彩度が低い色」「低彩度色」、中くらいの彩度の色は「中彩度色」ということになります。

鮮やかな色をたくさん使えば派手になり、見た目はにぎやかに見えますが、「ウォーリーをさがせ!」のようになってしまい、伝えたい肝心の部分がどこにあるかわからなくなることもあります。何か情報を伝えるという目的をウェブサイトが持っている場合（ほとんどそうだと思います）、彩度の高い色を使う場所を慎重に考えねばなりません。

また無彩色に対して、何らかの色みを感じる色を有彩色ということも覚えておきましょう。白・灰・黒以外の色は全て有彩色と考えて差し支えありません。

よい配色を行うには、彩度の低い色や無彩色を上手に使うことがポイントになります。今まで派手な色ばかり使っていたという人は、ぜひこの機会にくすんだ色を使うことにもチャレンジしてみましょう。

色の三属性

ここまでに学んだ色相・明度・彩度を合わせて、色の三属性と呼んでいます。これからはこの3つを駆使して、様々な配色を考えていきますので、まずこの3つをしっかりと覚えるようにしてください。

今回のチェックポイント

• 彩度とは色の鮮やかさのこと
• 最も鮮やかな色を純色、色みを感じない白・灰色・黒は無彩色と呼ぶ
• 白・灰色・黒以外の色は有彩色と呼ぶ
• 明度は色の明るさのことで、見やすさや読みやすさと密接な関わりがある
• 色相・明度・彩度を合わせて「色の三属性」と呼ぶ

« 隠す

続きを読む… »

色相とは？

「このトマトの色はなんですか？」と聞いたときに多くの人が「赤」と答え、「明るい色」や「鮮やかな色です」と答える方はそれほど多くないでしょう。色を区別するときに最も多く使われる色味の違いのことを色相と呼びます。

日本語では赤・黄・緑・青・紫の5つと、その5つの組み合わせである橙（オレンジ）・黄緑・青緑・青紫・赤紫の合計10の色相が主に使われています。JIS規格では橙は黄赤と呼ばれますが、普段の生活で使うことはないかと思いますので、ここではわかりやすく橙かオレンジで表記します。

実際には一口に赤と言っても、紫がかった赤やオレンジっぽい赤など様々な赤が存在しますし、明るい赤や暗い赤など無数の赤が存在しますが、それらを全てひっくるめて赤と呼びましょう。

どこからどこまでを赤と呼ぶのか、緑と青緑の境界線はどこかという疑問もあるかもしれませんが、それは大きな問題ではありません。もちろん色彩の規格やシステムによって、その分類ははっきりしているのですが、通常配色を行う際には、どのような印象を受けるかが重要で、細かいシステムは多くの人にとって必要のないものです。

では、白・灰色・黒はどうなのか？　それは次回説明します。

色相環とは？

これらの色相を細かく分解していくと、色相は連続していることがわかります。それを環状につなげた物を色相環と呼んでいます。色相環にも様々な種類がありますが、一般的には赤→オレンジ→黄→黄緑→緑→青緑→青→青紫→紫→赤紫→赤のように、色相の順番に色が連続的につながって、一周すれば元の色に戻るという形になっています。無秩序に並んでいるものは色相環と呼びません。

この色相環にも様々なスタイルがあって、6色であったり、10色、12色、20色、24色などいろいろな物が存在していますが、約数が多く、色相環を分割して考えやすいという理由から、配色を学ぶにあたっては、12色や24色の色相環が利用されることが多く、このサイトでもそれに倣います。

色が順番に変わっていく順序はぜひ覚えておきたいところですが、これから色を学んでいくことで自然に覚えられますので、無理に色相環を覚える必要はありません。

最も大事なことは、色相は連続しているということなのです。ここはぜひ押さえておいてください。

今回のチェックポイント

• 色相とは色味のことで、日本語だと赤・オレンジ・黄・黄緑・緑・青緑・青・青紫・紫・赤紫・赤などのこと
• 色相環とは連続した色相が環状に配置されたもの

« 隠す

続きを読む… »

きれいな色を作るだけではありません

きちんと色の勉強をしたことがない方にとって、美しい配色を作るためにはどうすればよいかは、日々頭を悩ませる大きな問題なのかもしれません。しかし色の役割は相手に美しいと思わせるだけではありません。最も重要なことは、TPOに応じて色を使い分けると言うことなのです。

例えば大変印象に残るきれいな花を見かけたとしましょう。それをあなたは大変美しい色だと感じました。だからと言って、その色で壁全体を塗ってみようとは思わないでしょうし、同じ色の服をすぐに買って着ようとも思わないはずです。

それと同じように、ある美しい配色が、そのウェブサイトにとって最適か、あるいは役に立っているのかは全く別問題なのです。

ウェブサイトならではの性質や、あなたが作りたいサイトの各部分の役割を考慮し、適材適所の色を配置することが重要なのです。

適材適所の色を使う

では適材適所とは何かということですが、これは一言で解決出来る問題ではありませんので、今後の記事で順に書かれていくわけですが、まず配色によって解決出来そうな問題点を挙げてみましょう。

• サイト名やショップ名がきちんと見えていない
• 文字が読みにくい
• キャンペーンなどのバナーが埋もれてしまっている
• どこを押せばよいのかわからない
• 写真の色がくすんでいる
• 画面がギラギラして、見ているとなんとなく疲れる

まだまだたくさんありますが、心当たりのある方も多くいるのではないでしょうか？　もしかすると課題が山積みでどうしていいかわからないという人もいるかもしれません。

しかし、これらの問題の多くは、センスではなく、知識と技術で解決していくことが出来ます。

ですから、センスがないとあきらめてしまわずに、地道に知識を吸収していくことにしましょう。

機会損失を減らすのが目的です

ネットショップではサイトの配色だけで売り上げが決まるわけではないことは、皆さんもご理解いただいているかと思います。色は万能ではなく、「売れる色」などという都合のよいものは存在しません。

しかし、色の使い方によって、サイトが使いにくくなったり、ユーザーにいつまで経っても覚えてもらえなかったり、帰られてしまったりという結果が、売上の低下につながることは想像に難くありません。せっかくの魅力ある店舗が色によって台無しになっていることも多いのです。

そんな色による機会損失を減らし、使いやすく風通しのよい配色を作っていくためのあれこれをご紹介していこうと思います。

« 隠す