少し工夫するだけで美しく！
私ジャガアポーがWebデザインの外観において気をつけていることや、使用している技法5つご紹介します。
気をつけていることと言えば…忘れがちな「取り消し線は非推奨タグ」だとか「floatの解除の確認」とかですかっ？
そうですね、今回は技術編ではなく外観編です。そのため、この記事を読めば技術力が無くてもちょっとしたことを気をつければ美しいWebデザインが出来るかもしれませんよ！ あ、もちろん参考程度にしてくださいね（笑）
1. 3原色は控える
皆さんご存じの通り、3原色は“赤”、“青”、“黄”の3色のことです。
僕がカラー指定で気をつけていることは、3原色を使用しないことです。
CSSやHTMLでカラー指定する場合は16進数で指定するので、“#FF0000”、“#00FF00”、“#0000FF”を使わないということです。
更に言ってしまえば“#00FFFF”や“#FFFF00”などの「Fと0のみで表される色」は使いません。
当サイトでも青色や赤色を使用していますが、青色といっても水色に近い青、赤色といってもオレンジに近い色を使用しています。
背景が白や黒の場合、明るい色を使用すると美しく見えます。
ここでの「明るい色」は白や黄色のことではなく、先述した「赤色ならオレンジに近い色に」や「青色なら水色に近い青色に」ということです。
明るい色を使うと美しい配色になりますが、
3原色を使用したときと比べて強調が弱くなることに注意してください。全体の配色と考えて文字の配色を行ってください。
2. 変化が大きいグラデーションは使わない
初心者の方がよく使っているように思えます。
僕は変化が大きいグラデーションは使わないようにしています。
理由はいくつかありますが、そのうちの1つとして「変化が大きいグラデーションを背景にした場合、前面のカラーと合わなくなる場合がある」からです。
変化が大きいグラデーション背景（左）と、変化が小さいグラデーション背景（右）。
同じ色系統ではない、異なる色（赤から青など）のグラデーションも控えた方が良さそうですね。
そうですね。
「他色系統へのグラデーションは美しくない」と一概には言えませんが、参考画像の左側のようなグラデーションは美しいとは言えません。
3. 適切な強さの光彩やシャドーを使う
文字に立体感を与える場合、『シャドー」』という効果を使います。
また文字を輝かせたい場合は『光彩」』という効果を与えます。
どちらとも適切な加減で使えば美しいデザインになりますが、強すぎると気持ち悪いデザインになります。
強すぎる光彩（上）と、適度な強さの光彩（下）。
4. 縁は濃く、内枠は明るく
文字に縁をつける技法は多くの方が行いますが、
これも縁の太さや色に気をつけるように心がけています。私は縁だけでなく、内枠も加えるようにしています。
グラデーション効果が与えられている文字や画像に縁をつける場合、縁の色は必ずグラデーションの最も濃い部分を使用するか、それよりも濃い色を使用しています。
例えば、「白から灰色のグラデーション」の縁の色は濃い灰色にします。
また内枠を加える場合、内枠の色は白色に透明度を与えたものを使用するようにしています。
効果を与えたテキストと図形。図形のズームもご覧いただきたい。
内枠の色ですが、不透明の白色やグラデーションで使われている色を明るくした色でも代替出来ますよ！
ちなみにこの顔アイコンの画像も、内枠効果が使われています（笑）。
5. グレアやストライプの効果を上手く使う
表現技法の1つである、『グレア』や『ストライプ』の効果を上手く使うようにしましょう。ただし使いすぎには注意です。
横幅が長いボタンのグレア効果は“スクエア”を、横幅が短いボタンは“サークル”のグレア効果を与えると良いでしょう。
また、ストライプは不透明の白色を使用することをお勧めします。
ここら辺は場合によって配色が異なってくるので、自分で満足のいく配色を見つけましょう。
スクエアグレア（左）と、サークルグレア（右）。
ストライプは技法の中でも美しさが全面的に現れますが、使用しすぎるとしつこくなるため注意が必要です。
いやー、いかがでしたかっ！？ たかがWebデザイン、されどWebデザイン…。奥深しWebデザイン！
えーっと…って、前回の記事と同じような展開じゃないかっ！（笑） ってか、そろそろキャラクターの性格を決めた方が良いのでは…？
キャラクターねぇ…。 “ドジっ子キャラ”で良いんじゃないですか！？みんなから愛されるキャラクターみたいな（笑）。
何故に赤色文字っ（笑）。 …まぁ、そのうち否が応でもキャラクターの性格が決まってくるでしょう。 「この記事に登場するパイナポーくんの性格と、来年のパイナポーくんの性格が違う…」なんていう事態になるかもしれませんね（笑）。
それでは今回はこの辺で！
-
この記事を見た人は他の記事を見ていないようです…。
ぜひよければコメントをお願いします！
3原色を使った配色（上）と、明るい色を使用した配色（下）。