奥行き感を演出！ぼかしのあるサイトデザイン
こんにちは。
webデザイナーの神田です。
みなさん、iPhoneのポートレートモードって使いますか？
背景をぼかすだけで奥行き感のあるそれっぽい写真が撮れるので、私は好きです。
そんな「ぼかし」ですが、デザインの世界でもよく見かける表現ですね。
今回はwebデザインにフォーカスして「ぼかし」を素敵に利用しているサイトを3つご紹介します。
01：迫力満点！ポテトチップスでぼかし
まずはカルビーの堅あげポテトのサイトのご紹介です。
堅あげポテト、美味しいですよね。
このサイトではポテトチップスに奥行きを持たせています。
奥のポテチがぼやけている分、手前のポテチが今にも掴めそうに飛び出していて臨場感があります。
奥にあるポテチはややサイズ感も小さくして、しっかりと強弱をつけているのが素敵だなと思いました。
02.フレッシュ！野菜でぼかし
続いてはサラダクラブのサイトのご紹介です。
私もサラダクラブのサラダにはよくお世話になっています。
こちらのサイトでは2層に仕込まれたパララックスで野菜たちが浮き上がっていき、鮮やかで幻想的な世界観が表現されています。
一番奥の野菜はぼやけている上に、色も少し褪せた感じですごく遠くにあるように錯覚してしまいます。
2層のパララックスも効果的で、こんな奥行きを感じるサイトはなかなかないなと印象に残ったサイトです。
03.おしゃれ！文房具でぼかし
最後はなんともおしゃれなこちらのサイト。
yasuo range さんの鮮やかで優しいイラストが贅沢に使われたサイトです。
こちらもパララックスなのですが、スクロールのたび、文具やクシたちがふわあっ…と動くんです。画面を止めていても動きのあるモノもあって、眺めているだけで楽しいサイトです。
先ほどのサラダクラブのサイトでは野菜が浮き上がっていきましたが、こちらのサイトだと自分のスクロールに合わせて、モノたちと一緒に沈んでいくような不思議な感覚になります。
こちらのぼかしで面白いのは、奥のモノがぼやけているだけでなく一番手前にあるものもぼやけている点です。きっとこの世界の焦点は真ん中の方にあるのですね。
奥行きのあるデザインをするときは、焦点はどこに合っているのかを意識することが大切なんだなと感じました。
いかがでしょうか。
ぼかしを駆使すると、奥行きや世界観のあるリッチなサイトに仕上がりますね。
自分もいつかこんなデザインができるよう、アイデアをストックしたいと思います。ご精読ありがとございました＾＾