シェアする

【CSS】カードやボックスのデザインが野暮ったく見えたときに試したい小技3つ

シェアする

特に非デザイナーの開発者やWeb制作の初心者によくあるとおもうのですが、自分でデザインしたページをいざコーディングしてみたら、思ってたのと違う印象になってしまうこと、ありますよね。

そんな、ちょっと野暮ったいな、とか、もう少し洗練された印象にしたいな、というときに試してみたい3つの小技を紹介します。

まずはベースとなるもの

See the Pen xxGZogq by yinouet (@yinouet) on CodePen.

内容は坂口安吾の随筆、「堕落論」の最後から。

さて、見ての通りパッとしない、いかにも手作り感のあるボックスです。

このボックスを装飾して、(少しでも)洗練された感じに仕上げていきます

1 – 微妙なシャドウをつける

まずはボックスに影をつけて、立体感を出します。

See the Pen box-deco-tips-1 by yinouet (@yinouet) on CodePen.

いかにもなシャドウは避け、背景色によっては気づかない程度の薄いシャドウのほうが品があって良いと思います。

サンプルでは背景がグレーなので、シャドウも非常に薄くしてあります。

2 – 余白を大きく取る

See the Pen box-deco-tips-2 by yinouet (@yinouet) on CodePen.

つぎにボックスの余白を調整します。

余白が大きいとより洗練された印象になりますので、コンテンツの可読性を損なわない程度に大きめに取るほうがいいでしょう。

また、行間も標準のままでは詰まり過ぎなので広げました。だいたい1.6~1.8あたりが読みやすいかな、と。

サンプルではついでに見出しの文字を細くして白の面積をひろげ、薄い下線によって見出しであることを表現してみました。

3 – 微妙な角丸

See the Pen box-deco-tips-3 by yinouet (@yinouet) on CodePen.

最後にボックス角をほんの少しだけ丸くします。

2pxとか3pxくらいで、よく見ないと気づかない程度で十分です。

比較してみる

↑修正前 | 修正後↓

このように、同じ内容ですがだいぶ印象が変わりました。

余白だけ、シャドウだけなど、制作物全体とのバランスを見ながらぜひ取り入れてみてください。