TIPS】背景を変えても境界線がボケないボタンを作るにはデザイナーの大西です。ページなどで使うボタン作成の小技を書きたいと思います。使い回ししやすいボタンを作るための手法のひとつとして、「違う色の背景に置いてもボケない境界線」が重要です。淡い色合いのボタンを作る場合、そのボタンの周囲を囲む境界線も淡めの色になると思います。淡めの境界線は白系の背景に置けばきれいに見えますが、濃い色や境界線に近い色の背景に移すと・・・ボタンの周りがもやもやして見えませんか?背景とボタンの境界があやふやになるとボタンの立体感(クリックできそうな感じ)が損なわれてしまいます。しれませんが、見た目だけでなく使い勝手にも関わる重要な部分です。境界線のボケを防ぐには、暗い色を使って境界線を描き、白背景に置いてきれいに見えるように透明度を調節してやります。背景色とマッチしつつ、くっきりとした境界線になりました。なんてことない小技ですが、普段から意識しておくとボタンを作り終わってから背景色を変えたくなったときや、様々な背景色のページに共通のボタンを使用する場合など、ボタンの境界線を背景色ごとに作り直す手間が省けます。需要があるのかドキドキしますが、ボタンだけでなくアイコンなどの境界線でも使えますのでこういったパーツ作成の機会がある方は一度試してみてくださいね。魅力再発見!リッチに見せるデザインテクニック。Appleのデザインのように美しい金属調の質感を表現する方法。ゲームずっと使えるデザインテクニック。美しく見せる『余白』と『文字』の使い方。