デザイナーの大西です。 Web ページなどで使うボタン作成の小技を書きたいと思います。 使い回ししやすいボタンを作るための手法のひとつとして、「違う色の背景に置いてもボケない境界線」が重要です。 淡い色合いのボタンを作る場合、そのボタンの周囲を囲む境界線も淡めの色になると思います。 淡めの境界線は白系の背景に置けばきれいに見えますが、濃い色や境界線に近い色の背景に移すと・・・ ボタンの周りがもやもやして見えませんか? 背景とボタンの境界があやふやになるとボタンの立体感(クリックできそうな感じ)が損なわれてしまいます。 境界線のたかが 1px かもしれませんが、見た目だけでなく使い勝手にも関わる重要な部分です。 ■「違う色の背景に置いてもボケない境界線」の作り方 境界線のボケを防ぐには、暗い色を使って境界線を描き、白背景に置いてきれいに見えるように透明度を調節してやります。 暗い青色で描いた