Webデザイン基礎知識・Web製作支援サイト|小道具屋|

ウェブデザインサイト・小道具屋
文字サイズ変更  文字サイズ拡大 文字サイズ縮小 元に戻す
Webサイトを構築する全ての人のために。
小道具屋サイト開催1999/09/06 HOMEに戻る Webサイトの顔であるindexを考えてみましょう。 デザインにはコツがあります。コツさせ掴めば結構簡単かも? ユーザーをコンテンツに導くナビゲーションはしくじると使いにくいサイトになります。 デザインとは直接関係ないですが小技を紹介。 ブログ ご連絡・お問い合わせはコチラまで。

小道具屋管理人・ごあいさつ デザインを考える前に・はじめに WEBサイトの顔・トップページ 大きさや容量・サイズ 色の持つちからは重要・カラー

Webで非常に重要なカラーです。同じデザインでも色が違うだけで表情がガラッと変わってしまいます。一番難しい所なのですが、初心者が失敗しない色の使い方を勉強しましょう。


Webセーフカラー一覧
Webセーフカラー一覧

基礎知識(Webセーフカラー)
Webの世界では使用できる色が216色に決まっています。「え?ウチのパソコンはフルカラー(1670万色)表示出来るよ?」そうです、現在のPCならフルカラーが当たり前ですが、ブラウザに問題が在ります。現在主流のインターネットエクスプローラとネットスケープが共通して正確な色を出せるのが216色しか無いのです。各ブラウザ自体はPCの性能通りの色数を表示出来ますので写真など、どう見ても216色以上使っていても綺麗に表示しますが、よ〜く見るとインターネットエクスプローラとネットスケープでは見え方が若干違います。PCは性能が上がっているのにブラウザ間の互換色が216色とは、なんだかなぁ〜って感じですけれども文句を言っても始まらないので、しょうがないと思って諦めましょう。
尚、Webセーフカラーはベクターなどで カラー出力ソフトがあります。


カラー調整パレット
JavaScriptによるリンク先です:画像拡大拡大[16KB]

基礎知識(モニター調整)
ローカルで見ている時はいい色合いでも相手には何この色は?って思われないように国際標準規格に準拠した調整にするのです。国際標準規格ではsRGBを標準色として設定したことでsRGBがWebではスタンダードとなりつつあります(sRGBとは米国ヒューレットパッカードと米国マイクロソフトが提唱した、標準的な色空間定義のこと)でわ、調整の方法ですがまず色温度とガンマを適正にしてみましょう。CRTの正面にボタンが有るはずですそれを押して見ましょう。
メーカーによって調整方法が違うのですが、ボタンをポチポチ押していくと色温度もしくはColorManagerって言う項目が有ります、それを6500Kに合わせましょう。6500K以上の数値の方が6500Kにしますと黄色がかった色合いになりますが気にしないでください、人間の目なんていい加減で2,3時間使っていると違和感が無くなります。
次にコントロールパネル→画面→設定→詳細→色の管理でカラープロファイルをsRGBにします。Windowsの方はここで終わり、ガンマは標準で2.2に設定されています。
現実問題Windowsマシンが世の中には多いのでMacの方も2.2に合わせた方が自分の思い通りの色で見て貰えるので調整してみてはどうでしょうか?Macの方は「モニタ調整アシスタント」で2.2に合わせてみてください。
尚、両マシンともガンマ値が初期設定の時には、Macの方がやや明るく(薄く)、Windowsマシンの方が暗く(濃く)見えます。


カラーサンプルページ
カラーサンプルページ

カラーサンプル
優れたページを注意深く見ると色枚数はあまり多く使って無い事が分かります。基本は、メインカラー、サブカラー、背景色、アクセントカラーの4色ぐらいが嫌みもなく無難でしょう。ちなみに小道具屋は写真画像が少ないので多めに(6色)設定しています。
失敗しないカラー選びは、同系色を使う場合、類似色を使うの2通りが比較的簡単なのでおすすめします。対比(赤と黒とか)は扱いが非常に難しいので説明は省略させて貰います。って言うか私にも上手く表現出来ないんです。

大手有名サイトでもやってしまう過ちなのですが、背景色が白(#FFFFFF)に設定したときに文字色を黒(#000000)にしてしまう!一見問題が無さそうですが実は結構見にくいのです、黒と白ではコントラストが極端に違うのでモニターがまぶしく見えてしまいます。背景色を白に設定した場合は文字色を#666666とか#333333に設定すると見やすくなります。逆に文字色を黒に設定した場合は背景色を薄いグレーにすると見やすいです。