僕がWebデザインで気をつけている、使用している5つの技法

Webデザインで気をつけていること、使っている技法をまとめました。

1. 3原色の使用は控える

皆さんご存じの通り、3原色は“赤”、“青”、“黄”の3色を表します。

僕がカラー指定で気をつけていることは、3原色を使用しないことです。CSSやHTMLでカラー指定する場合は16進数で指定します。つまり、3原色である#ff0000#00ff00#0000ffを使わないということです。更に言ってしまえば#00ffffや#ffff00などの“fと0のみで表される色”は使いません。
当サイトでも青色や赤色を使用していますが、青色といっても水色に近い青、赤色といってもオレンジに近い色を使用しています。

背景が白や黒の場合、明るい色を使用すると美しく見えます。ここでの“明るい色”は白や黄色のことではなく、先述した“赤色ならオレンジに近い色に”や“青色なら水色に近い青色に”ということです。

2. 変化が大きいグラデーションは使わない

初心者がよく使っているように思えます。

僕は変化が大きいグラデーションは使わないようにしています。理由はいくつかありますがそのうちの1つとして“変化が大きいグラデーションを背景にした場合、前面のカラーと合わなくなる場合がある”からです。

3. 適切な強さの光彩やシャドーを使う

文字に立体感を与える場合、“シャドー”という効果を使います。また文字を輝かせたい場合は“光彩”という効果を与えます。

どちらとも適切な加減で使えば美しいデザインになりますが、強すぎると気持ち悪いデザインになってしまいます。

4. 縁は濃く、内枠は明るく

文字に縁をつける技法は多くの方が行いますが、これも縁の太さや色に気をつけるように心がけています。私は縁だけでなく、内枠も加えるようにしています。

グラデーション効果が与えられている文字や画像に縁をつける場合、縁の色は必ずグラデーションの最も濃い部分を使用するか、それよりも濃い色を使用しています。例えば、“白から灰色のグラデーション”の縁の色は濃い灰色にします。
また内枠を加える場合、内枠の色は白色に透明度を与えたものを使用するようにしています。

5. グレアやストライプの効果を上手く使う

表現技法の1つである、『グレア』や『ストライプ』の効果を上手く使うようにしましょう。ただし使いすぎには注意です。

横幅が長いボタンのグレア効果は“スクエアグレア”を、横幅が短いボタンは“サークルグレア”の効果を与えると良いでしょう。また、ストライプは不透明の白色を使用することをオススメします。
ここら辺は場合によって配色が異なってくるので、自分で満足のいく配色を見つけましょう。