【WEBデザイン】背景を薄いグレーにする理由のひとつ「区切り線の立体感を簡単に出せる」

Apr 9, 2013

本日、こんなWEBアプリをリリースしました。
スマホがあれば誰でも人狼の司会ができる!『うそつき人狼 ゲームマスターガイド』をリリースしました! | 株式会社人狼

そこそこに好評なようで、とてもうれしいです。jQueryだけで作ってます。
metaでapple-mobike-web-app-status-bar-styleだとか、
apple-mobile-web-app-capableだとかを設定してるので、
iPhoneで「ホーム画面に追加」をしてもらうと、まるでネイティブアプリみたいになります!
ぜひ、「ホーム画面に追加」してみてください!

さてさて、この『うそつき人狼 ゲームマスターガイド』というWEBアプリの背景色は、
薄いグレー(#f0f0f0)に設定してあります。

白ではなく、なぜ薄いグレーを採用しているのか?
質感を出すという理由ももちろんありますが、
個人的には「区切り線に立体感を出せる」というのが大きいです。

↓背景色を薄いグレーにすることで、区切り線に立体感を出すことができます。
【WEBデザイン】背景を薄いグレーにする理由のひとつ「区切り線の立体感を簡単に出せる」

ポイントは、1pxの区切り線を2本重ねて、
上を背景色より濃いグレー、下を背景色より薄いグレーにすることです。

【WEBデザイン】背景を薄いグレーにする理由のひとつ「区切り線の立体感を簡単に出せる」

もし、背景色を真っ白にした場合、背景色より薄い色が存在しないため、
立体感を出すのは難しくなってしまいます。

覚えておくと、いろんなところで使える便利な小技です。
ぜひ、使ってみてくださいね!

白坂翔
白坂翔

1984年生まれ。ボードゲームカフェJELLY JELLY CAFEオーナー、将棋カフェCOBINオーナー、マーダーミステリー専門店Rabbitholeプロデューサー、株式会社人狼の代表取締役。ポーカーとゴルフが好きです。MORE

あわせてどうぞ

Fireworks Bros.的よく使うショートカットキーランキング