連載
» 2013年08月21日 18時00分 UPDATE

ズルいデザイン(3):box-shadowで表現する、「セミフラット」なズルいデザインテクニック (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:シャドウの色が濃過ぎる

1-1-1.jpg

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

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

1-1-2.jpg

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

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

1-1-3.jpg

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

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

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

1-2.jpg

 普通は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:内側にぼかして高級感を表現する

1-3.jpg

 次は、最初に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)
}
       1|2 次のページへ

Copyright© 2017 ITmedia, Inc. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

Focus

- PR -

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。