しばらくセミナーエントリーばかりで、「本当にデザイナーかよ」と言われてしまいそうですので久々にデザイン分野のお話です。
よく「どうしたらデザインの勉強ができるの?」と私にご質問下さる方が居ますが、「こうしたら良いよ」と明確にお伝え出来ないので私の記事を読んで少しでも役に立てて頂ければと思います。
私がWebデザインをはじめた時に上司に教えてもらった事が「Webのデザインはいかに奥行き感を出すか」であると言われました。
モニタ(光の世界)の中では無限の奥行き感を出す事が出来る、それが紙(印刷物)のデザインと一番違う所であり、いかに奥行き感を出せるかがWebのデザインで、紙でデザインできる事は紙で表現すれば良い。
と。
必ずしも今のWeb業界でこの理論は成立しないようにも感じますが、Web2.0という言葉自体もWeb2.0「的デザイン」という感覚すら無い頃にそう教えられ、「Web2.0っぽい」デザインをとしばし言われる時代を経て、ベタっぽい感じに移行しつつある現在も少しこの教えを守りながらデザインをしています。
今回は久々にその「奥行き感」のtipsを私なりに。
といっても、最近の流れを見ている感じでは、奥行き感を出すという手法(?)から業界の流れが分岐しつつあるようにも感じています。
ただ、分岐であって消滅ではないので、「重厚な」や「高級感」というイメージを言い渡されるデザインには、おそらくその「奥行き感」が加味されるとグッと説得力が出るのではないかと(個人的には)考えています。
この奥行き感を最大限に利用して、以前各方面で話題になったのがSHARPの亀山第二工場のサイト(http://www.sharp-kameyama.com/)。Flashのサイトですが、是非中に入って見てみて下さい。
RAKU-GAKI西田幸司氏のグラフィックスと博報堂アイ・スタジオの佐野勝彦氏のFlashで、独特の世界観(まるで童話やファンタジーといった非現実的な雰囲気)が繰り広げられます。
2006年のPhotoshopWorld(セミナー)で西田氏がおっしゃっていたことには「工場内が企業秘密な為、写真が全く出せずやむなく……」との事でした。
※ この話しは今回とは関係ないので割愛します。
この世界でやはりキーワードになるのが「浮遊感」と「奥行き感」だと感じます。
この「奥行き感」、このサイトでは「ぼかし」によって生まれています。
写真を趣味にされている方等は、ぼかしによって生まれる遠近感は身近なのではないでしょうか?
奥行き感は必ずしもぼかしだけで生まれるわけではありませんが、今回はこの「ぼかし」に焦点を絞って話しを進めます。
この画像は、サササと時間の空いた時につくった花の画像2枚を並べただけです。
モニタにかじりついてこのブログを読まれている方は、ちょっと、モニタから離れてこの画像を見て頂きたいです。
左の花がただ切り抜いた画像、右の花が全く同じ花を適当な塩梅でぼかし、更に隠し味で「彩度(あざやかさ)」を少し落とす加工をしただけなのですが、平面のはずの画像に前後関係を感じるかと思います。
「目の水晶体はどんな技術を持ってしてもマネの出来ない高機能なものだ」と言い切ったのは大学の教授でした。
ピント調整(超高性能オートフォーカス!)をする為に眼球の周りの筋肉を動かし、絶妙な加減で「像」を映し出します。その際、1点はクリアなピント調整が可能ですが、その1点以外は完全にぼけている筈なのです。
それを擬似的に書き出す(写し出す)のが「カメラ」であり、腕の良いカメラマンが撮った写真は「ピントが合う」わけです。
この基本原則に則って、逆に人為的にぼかしを発生させてやると空間感を持たせる事ができる、それが上の花の画像です。
「人の目に全ての物がピントが合って情報が入って来てしまったら情報過多で狂ってしまうだろう」と言ったのは誰だったか……ともかく、このピント調節(むしろフォーカスしない)機能と色彩認識(むしろ色彩排除)機能を利用してピントの合った物とそれ以外の物に差を持たせるように画像を加工する。
せっかく無限の広がりをモニタの奥に持つWebデザインの世界、こういった技を少し意識してみると「空間の作り方」が少し変わるかもしれませんよ。
ぼかしにはまた別の(完全にhack的な)使い方もあるのですが、それはまた次回。
ぼかしを使ったTips第2段。今回はこのブログのメインイメージに使っている画像(実は携帯で撮った物でととても小さい)で使った裏技ぼかしテクニックの公開です...[続きはこちら]
「いまさら?メイン画像Tips」 on [Sunny design]|07-11-19(Mon)