固定レイアウトの背景色

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

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

印象を壊さない背景色で

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

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

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

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

関連記事：

目の動きを考える

坂本邦夫 — Wed, 27 Jan 2010 09:31:59 +0000

色を置く時には目の動きなども考慮する必要があります。

重要な部分へ目の動きを

このサンプルではアクセントカラーのえんじ色が左右に置かれていますが、本来読んでほしい中央部の文章よりもメニューの方が目立ってしまい、視線が定まりません。

そこで右の例のようにアクセントカラーを文章の見出しに持ってきて、視線を中央に誘導しています。

アクセントカラーは目立つ色を設定しているはずですので、見せたい部分に上手に配置することで、美しさだけでなく色の機能を利用することが出来ます。

目の動きは左から右、上から下

サンプルのようにメニューを色分けして表示したい場合などは多いことと思いますが、この色の並びも適当にするわけには行きません。

この並びですと、左から黄→青→赤→緑となっておりますが、赤や橙などは非常に目立つ色（誘目色と呼ばれます）ですので、左から３番目を先に見てしまい、そのまま視線が下に流れていってしまう場合もあります。

そこでこのようなメニューの場合、読んでほしい順番に左から並べていきます。そして一番目立つ赤色から色相順に並べると、リズムも出て視線の動きもスムーズになります。

グラデーションで動きを

グラデーションを看板部や文字でお使いになる方がいらっしゃいますが、暑苦しかったり読みにくかったりすることが非常に多いです。

しかし品良く使えば、非常に美しく、目の動きに対する効果の高い配色になりますので、少し小さめの面積で使ってみることにしましょう。