box-shadowで表現する、「セミフラット」なズルいデザインテクニック：ズルいデザイン（3）（1/2 ページ）

box-shadowを活用した各種ボックス表現の作り方を紹介。フラットデザインの中でも違和感なく使える「やりすぎていない立体感」とは？

[赤塚 妙子，@ken_c_lo]

世の中、フラットデザイン流行りですが……

　iOS 7がフラットデザインを採用したのを皮切りに、Webデザインのトレンドがフラットデザイン一色になってきましたが、立体感を完全に排した色面と空間、シンプルな描画の組み合わせだけのデザイン表現は、ある種ごまかしが効かず、また適切な利用方法を喚起させるようなUIも表現がなかなか難しいものです。

　例えば、「ボタンは押せるもの」であると表現するための「押したくなる感じ」を喚起させる立体感は、ユーザビリティ面でもまだまだ有効です。今回は、流行のフラットデザインの中でも違和感なく使えて、また適切なアフォーダンスの表現が可能になる、「やりすぎていない立体感」を目指した、box-shadowを活用した各種ボックス表現の作り方を紹介します。

NGなbox-shadow

　立体感の表現に便利なCSS3のbox-shadowですが、使い方によっては素人っぽいデザインになってしまいがちです。

　下記に挙げたbox-shadowの利用方法は、使い方によっては絶対ダメというわけではないのですが、うまく使いこなすのが難しいので、特別な意図がない限り避けた方が無難といえます。

NGなbox-shadow 1：シャドウの色が濃過ぎる

　シャドウの色が濃過ぎると、汚く見えてしまいがちです。「薄過ぎるかな？」くらいのさりげない影の濃さの方が、多くの場合、自然な立体感をきれいに表現できます。背景の色とのバランスも加味し、少し見えるくらいの濃さがオススメです。

NGなbox-shadow 2：シャドウのボケ足が長過ぎる

　シャドウのボケ足を長くすると、その分、物理的に背景から浮いているような表現になります。画面上に「置いてある」ような表現を目指す場合、シャドウのボケ足はあまり長くしない方がよいです。また、ぼけ足が長過ぎると、汚れて見えてしまうことも多いです。

NGなbox-shadow 3：シャドウに色がついている

　これも背景とのなじみ具合によってはダメではないのですが、自然でキレイな表現にするのが難しい技です。

　さて、NGなbox-shadowの特徴をいくつか紹介しましたが、次はSassとCompassを利用して作る、便利で自然に見える使い勝手のよいbox-shadowのパターンをいくつか紹介します。

ズルいbox-shadow 1：枠線代わりに利用できるbox-shadow

　普通はborderを使って線で表現する所を、さりげないbox-shadowを使って表現します。これによりborderを使うよりも柔らかく繊細な表現にできます。本文中のsectionを表す時などに使い勝手がよいです。Compassのbox-shadowを利用すると、この1行だけで表現できます。

.box {
  @include box-shadow(rgba(0, 0, 0, .15) 0 0 2px);
}

ここがポイント

• シャドウには角度を付けない四方で、薄いalpha0.15のシャドウを入れます
• ぼかしは2pxで、線よりも少しふわっとした表現に
• boxと背景がともに白に近い色の時に利用しやすいです

mixinにして汎用化しよう

　背景色が濃い色の場合などは、もっと濃い色の影が適切です。場合によって影の濃さを変えられるようにmixinにしておくと、色んな場合に対応できて便利です。

@mixin zurui-box($shadow: 0.15)) {
  @include box-shadow(rgba(0, 0, 0, $shadow) 0 0 2px);
}

　影の濃さが0.3で利用したい時はこのようにします。

.box {
  @include zurui-box(.3);
}

　また上記のmixinはデフォルトでシャドウの濃さを0.15にしているので、0.15のまま利用したい時は下記のように引数を指定しないでOKです。

.box{
  @include zurui-box;
}

ズルいbox-shadow 2：内側にぼかして高級感を表現する

　次は、最初にNGテクとして紹介した、ボケ足の長いbox-shadowの活用方法です。内側に向かってボケ足の長いbox-shadowをさりげなく入れることで、リッチな物体表現ができます。少しクラシカルでレトロなデザインや、高級感を演出したいときなどにオススメです。シャドウの濃さは、濃過ぎると汚くなってしまうので、やはり控えめの方がよいですが、ベースの色の濃さに合わせて調整しましょう。

.ribbon {
  @include box-shadow(rgba(0, 0, 0, .2) 0 0 0 20px inset);
}

ここがポイント

• 内側に向かってぼけ足を長く、角度を付けずに四方に満遍なく薄いシャドウを入れることで、高級感とリアルな存在感を表現できます
• ズルい背景パターンと併用して、布やノイズなどのテクスチャを取り入れると、さらにリッチでリアルな表現が可能になります
• リボンやボタン等、比較的小さなオブジェクトに「モノ感」を出したい場合にとても効果がありオススメです

mixinで汎用化しよう

　これも、適用するものの背景色に合わせて、シャドウの濃さを調整する必要があります。mixin化しておくと、色んな場合に活用できて便利です。

@mixin rich-box($shadow: .2){
  @include box-shadow(rgba(0, 0, 0, $shadow) 0 0 0 20px inset);
}

　シャドウの濃さ0.1で利用する時はこのように書きます。

.ribbon{
  @include rich-box(.1)
}

　また、上記mixinでは、デフォルトでシャドウの濃さを0.2に設定しているので、0.2のまま使いたい時は以下のように引数を指定しないで書いてもOKです。

.ribbon{
  @include rich-box(.1)
}