固定レイアウトの背景色

坂本邦夫 — Wed, 27 Jan 2010 15:20:21 +0000

デザイン領域の幅を固定するデザインの時の背景色の選び方を説明しております。

印象を壊さない背景色で

ブラウザウインドウのサイズによって、幅が可変して最大幅が変わるようなデザインであればあまり問題はないのですが、固定レイアウトの場合、800×600ピクセルに対応して作られたデザインはもっと広い画面で見れば大きく隙間が出来てしまう場合があります。

この部分についつい色を使いたくなってしまいますが、使う場合でもほぼ白に近い色を彩度が低く、明るい色を使うようにしましょう。空いている面積がかなり大きいのでベースカラーなどを用いるとくどい印象になってしまいます。

この例ではベースカラーがHSB[270:15:90]、サブカラーにもHSB[270:5:90]と色相が270で統一感が出来ておりますので、背景の色として色相は近い物を選び、同じような低彩度、高明度のHSB[305:5:90]を用いました。読みやすさを重視するために本文が入る部分の背景には色を付けておりません。

背景に色を使うことで、色の印象は強くなるのですが、無理に背景色を付けて、違和感を感じるようであれば、白背景のままにしておくのも選択肢の一つでしょう。必要ないと判断された場合には背景色を使う必要はないのです。

関連記事：

色相とは

坂本邦夫 — Tue, 26 Jan 2010 02:59:13 +0000

赤、青、緑と言った色みの違いを表すものです。また類似色相と補色についても説明しています。イメージを決定するのに最も重要な属性です。

色相と色相環

色相とは赤、青、緑のような色味の違いのことを表します。色相はイメージの違いを最も表現することが出来る属性です。

また色相を円上に配置したものを色相環と言います。同じ赤の中でも赤紫に近い赤や橙に近い赤など色々な赤がありますが、ここでは代表的な赤、黄、緑、青、紫の5色にその中間の色を加えて赤、橙、黄、黄緑、緑、青緑、青、青紫、紫、赤紫の10色を作り、その中間にもう1色加えて全部で20色相の色相環を作っております。

類似色相

よく似た色相のことを表します。厳密にどこまでを似ているというかは大きな問題ではありませんが、色相環の上の5を基準にすると、3～4と6～7くらいまでを、類似色相として覚えておけばよいでしょう。

補色

この色相環の正反対に位置する色のことを補色と呼びます。補色同士を並べて配置するとお互いに引き立て合って鮮やかに見えます。しかし使いどころを間違えると、まぶしくかえって見えにくくなってしまいます。