ドロップシャドウは、影を落とすエフェクトではない

タイムライン

ドロップシャドウは、影を落とすエフェクトではない

バリスタ

に選定していただきました。✌('ω')✌

ドロップシャドウは、影を落とすエフェクトではない

禅問答ではございません。

最近ではwebデザイナーでなくともCSS3を駆使してドロップシャドウ等結構リッチな表現が簡単にできるようになりました。

が、まあ、そもそも論、いろんなエフェクトってやつは、エフェクトをかけるために存在しているわけではなく、何か表現したい効果があって、効果を得るための過程に過ぎないよなぁと、僕は思っています。

まあね、ボタン一発で簡単に色々出来てしまうので、深く考えずにかけちゃうんだよなぁってなもんです。

とはいえ、本来はですね、ドロップシャドウやベベルやエンボスには、得たい目的があったはずだし、かけるべきシチュエーションとかあるんじゃないのかなぁと、小難しくもいろいろ考えているんです。

「なんとなくこうなりました!」ってのは、本当の天才以外は使っちゃダメてきな。

理屈でがんじがらめになるのも本末転倒ですが、実は理屈が確かで安全な道だなぁと職業デザイナーの私は思うところであります。

なので、なんとなく、とか、雰囲気がいいから等の理由だと、ちぐはぐだったり、意図しない効果を生んだりと、なーんか残念になりがちなのは、エフェクトをかけることが目的でエフェクトをかけちゃってる場合が多く見受けられます。

じゃあさ、どうしたらいいの?

となると思うので、ドロップシャドウを僕が使う時の考え方をお知らせします。

やりたいことは立体的な表現

手前と奥。重なり。空間的な広がり。

こういうことをシンプルに表現したいとき、ドロップシャドウはかなり有効です。

2013-8-4-02

二色が並んでます。この状態では重なっているのか、隣り合っているのか、よくわかりません。

2013-8-4-03

ここに、影を落とせば、濃い水色が手前に存在するようにも見えます。

立体的な表現としては不完全ですが、奥と手前という概念が見て取れます。

他にも

2013-8-4-04

この状態だと、ただ文字を打っただけですが。

2013-8-4-05

影をつけると地面から浮かんでいるような空間表現が簡単に演出できます。

物体と物体が重なって底に光が当たれば影になる。当たり前のように知っている知識ですが、この当たり前を得るために必要なエフェクトがドロップシャドウなんです。

CGを使えば本来はありえないような影を簡単に作ることが出来ますが、本来有り得ないような影はやはり違和感のもととなり、過剰な影の演出が失敗しがちなのは、不必要だからです。だって、自然界の影って、超さり気ないですからね。

ドロップシャドウを使ってよく狙われるもっと一般的な効果がアリます。

それは

2013-8-4-06

ですね。

本来白い背景に、白い文字を打つと、見えないのですが、影をつければあら不思議。

ちゃんと読めますね。しかも立体的に飛び出ているような効果まで付与されてます。

2013-8-4-07

ご覧のように、影がないよりはあったほうが強調されます。人間の目には飛び出して見えてしまうからです。

結果から言えば、強調表現にもドロップシャドウは使われます。が、上にも書いている通り、そもそも影は重なったものに光があたった状態のシュミレートなのです。

目立たせたい→ドロップシャドウの流れは間違ってはいませんが、あっているとも言いがたいなぁと僕は思っています。

強調の効果ももちろんあるのですが、それはあくまでも立体化の産物だよなぁと。

まとめだよ!

とにかくPhotoshopって便利よね!と、webだろうとグラフィックだろうと関係なく、一番良く使うエフェクトっぽいドロップシャドウに対して、僕の考えを簡単に書きました。

上に何度も書いてますが、ドロップシャドウのドロップシャドウほど失敗することはありません。なぜならドロップシャドウである必要性がないことがほとんどだから。

僕は思うのですが、デザインでも表現でもなんでも、「見る」から始まるんだろうなぁと。

窓から差し込む光、部屋の電気、こいつらがどんな影を落としているか、20秒ほど観測してみてください。

あなたがかけたいエフェクトはそうなってますかね?強調のためのドロップシャドウを掛ける前に、他に強調する手段はないか迷ってますか?実は20手くらい、代案があるんですけど、それドロップシャドウで大丈夫ですか?

理屈は意外と近道だし、理屈はいつだって正確で裏切らない技術でもあるんです。

ドロップシャドウ、便利よね。

文:シンタロヲフレッシュ

一緒に読んで欲しい記事

前の記事(Previous)
2度見通り越して3度見した!「Canon EOS Kiss X7」の赤ちゃんCGが凄すぎるCM
次の記事(Next)
目玉焼き好きに捧ぐシェフ渾身の創作フォント、その名も「Eggs font」の解説がなかなかに泣ける