ドロップシャドウ（影）とボカシ/濃淡のUI活用 | デジマースブログ
『ドロップシャドウ』のほか、『ボカシ』と『透明度(アルファ)』をつかって、単純なグラフィックデザインの表現としてではなく『UI』の機能/優先度を補助する設定をしてみます。
今回の内容は、
この先である将来のUIの機能による表現を、手軽にCSSやプログラムで動的にインタラクションとして組み込んだ場合の想定ですのでご理解ください。
それでは早速ボタンUIを作ります。
ドロップシャドウの設定あれこれ
ボタン単体としてみると、Aのシンプルなドロップシャドウがない表現で十分に機能しますが、
実際には、バナー画像やサムネイル画像、テキスト本文が含まれる総合的な画面のなかでUIとして十分に認識でき機能しなければいけません。
ドロップシャドウの表現もCSSで細かく設定できます。
box-shadow: 2px 2px 4px 0px gray;
最初の「2px」部分はx座標、
次ぎの「2px」部分はy座標
次ぎの「4px」部分はボカシ具合
次ぎの「0px」部分はドロップシャドウの大きさ
次ぎの「gray」部分は色設定 ※「#000000」系の記述も可
末尾に「inset」をつけると影が内側に設定できます
※間は半角スペースを入れる
box-shadow: 2px 2px 4px 0px gray inset;
「,」(カンマ)を入れて複数ドロップシャドウを設定出来るので、「inset」でボタンの質感のテカリを再現、その他にドロップシャドウでボタンの影を設定もできます。
box-shadow: 2px 2px 4px 0px gray,2px 2px 4px 0px #ffffff inset;
↓値を変更することで、画像のAのようなパキッとした表現や、Bのようなボカシを設定して実際の影のような表現も段階で表現できます。
トレンドでは、影がさらにぼやけて広がり拡散した状態のドロップシャドウが、WEBデザイン、グラフィックデザインで多く使われています。
それでは複数課金のボタンUIでのドロップシャドウに、意味合いと優先度を設定してみます。
ドロップシャドウの表現を揃えれば、優先度は横並びとなり、上下左右の設置位置による些細な優先度だけが存在している状況です。
この並びのボタンUIにドロップシャドウのボケ具合の程度で差異を出すと、コントラストの違いにより、ボカシが弱く濃い左上のボタンの優先度が高くなります。
次に、
実際の影の付き方を再現して、ボタンに「高さ」と「奥行き」の距離感を設定してみます。
手前に飛び出て見える感もありますが、微妙な表現の違いにとどまっており、4つのボタンの優先度に大きな違いはありません。
さらに、
ボタンの面部分とそのボタンから落ちるドロップシャドウの距離を離して違いをだしてみました。
ここまでの表現は現在のブラウザCSSでも設定できますが、これから先の内容を動的インタラクティブなUIとして現在機能させるには、JavaScript/jQueryなどの重い処理を利用し疑似的に力技で処理する必要があり、ユーザー体験にも処理が重く読み込みに時間もかかりデメリットがあります。
今後のブラウザ側の機能追加とデバイス側の処理速度向上が必要です。
ボカシの設定あれこれ
「ボカシ」表現自体は、OSネイティブアプリレベルではホーム画面やsafariブラウザ上部領域の透かし処理などのエフェクト処理として確認出来ますが、WebのCSS3レベルでは、画像を部分的にぼかすことができず一部のブラウザのみ画像全体のボカシ処理にとどまっています。
※CSS3のfilter:blur（ぼかし）は現在SafariやGoogleのChromeなどのwebkitブラウザだけ実装されています
将来的には「視線追跡機能」等により、見ているUIパーツや優先度の高いパーツの「ピント具合」を動的に調節できる機能が実装されるとおもわれます。
他にも利用者が注力して見ている場所以外のレンダリング解像度を落とし、デバイスの処理を軽くすることでバッテリー持ちを良くしたり、閲覧レスポンスを快適にするなどUX向上メリットも期待できます。
それでは話を戻して「ボカシの優先度」をUIに活かして設定してみます。
この段階まで表現できて、やっと判断しやすい優先度に見えるようになりました。
濃淡（透過/アルファ）の設定あれこれ
最後の表現として「手前」「奥」の濃淡表現（空気遠近法）を対象UIパーツに透過/アルファの数値設定を行い、優先度の低いUIコンポーネントパーツの透明度を下げ視認性を下げてみます。
メリハリがでてわかりやすくなったところで、訴求金額の上下を逆にしてみると、また見え方が変わってみえますね；
ボタンの並び方を変更して大きさに遠近感を出すとこのような感じです↓
使いやすくユーザビリティに問題なくUIが機能できるかはこの表現が動的にインタラクションする必要があります。
さいごに
スマートフォンなどのUIにおける画面要素の「重なり構造表現」へ意識は、マテリアルデザインへの意識向上、新技術のデバイスへの組み込みにより今後さらに必要となってきます。
SF映画のなかで登場する「未来的でシンプルなUI」は、カッコいいけど簡素過ぎてわかり難いものばかりでした。今後、技術が追いついた時、それらについて適切な情報設計が出来るかどうかは、表現とUIデザインの意識次第なのではないでしょうか。
次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。
他の記事をさがす ⇒ 記事一覧へ
