バラバラな配置なのにまとまりがある感じ。メガネショップのWebデザイン

Webデザイン３つの良いとこ : 3 Good Point!

これがメガネ屋さんですか・・・！っていうほど刺激のあるWebデザイン。HTML5、videoタグや、バラバラの配置なのにまとまっている印象を与えるデザインは、良いWebデザイン参考例です。

HTML5のvideoタグを有効に使うサイトが増えて来ましたが、若干の動きをつけてる動画ってサイトにすごく合っています。

今回紹介しているOWLというメガネショップは、Nodeというのを一つのコンセプトにしているようですが、それが動画だと更に強調できている気がします。ついついクリックしたくなる。気がする。

ビデオをクリックすると、ショップページに飛びます。もう、これはECサイトだとは思わなかったｗ

かなりアシンメトリーなデザインで、一見統一性がありません。というより余白の取り方が大胆すぎて、何がなんだかわからないのが正直なところ。ですがずーっとページをスクロールして観ていると、そのジャンプ率の高さが、結果強弱を感じさせるデザインになって逆に商品に魅力を感じさせるようになっています。

一般的にジャンプ率の高さは、若さや力強さをイメージさせますが、荒々しい感じが逆に商品に注目させる要因になっているのではないでしょうか。以前にも余白を多くとったアシンメトリーなWebデザインはありました。

まぁ！というよりも、肌の露出度が大きい写真に、目が奪われる効果も高い上の話ですが・・・。

そんなアシンメトリーなWebデザインですが、常に統一されているものがあります。それはメニューの配置。

この上下左右に常に表示されているメニューが、サイトをまとまらせている一番の要因ではないかなと思いました。「サイトの引き締め役を担っている」と言って良いかもしれません。

で、このサイトで面白いと思ったのがこの上下のメニューなのですが、

z-indexで要素を上に表示させ、背景はなにも指定しないことで透過処理を行なっているように表示されます。これが面白い！上のキャプチャでは、どちらも肌の上に表示されていますが、このように文字だけが浮かび上がるように表示されるのは面白いですねー。

position:fixedで固定して常に表示されるヘッダー・フッターなどよくありますが、背景がなく、文字だけが字幕のように表示されているデザインはなかなかない気がします。

このメニューで四方からコンテンツを囲むというデザインだから成せるデザインだと思いました。

こんな自由なデザインを私もどんどん自然に出来ていきたい。配置で魅せるWebデザイン、勉強になりました。

今日参考にさせて頂いたサイト

Twitter/FacebookではWebデザインにまつわることから、Web制作に関することを日々配信しています。ぜひフォローしてください！