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

OWL_Home1

OWL

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

  1. HTML5,videoタグで印象的に魅せる
  2. 大きく余白をとった自由な配置
  3. その秘密は、四方から囲むメニューデザイン

私はWebデザインのココを見た!

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

トップページにvideoタグ!少しずつ動かすのがコツ

OWL   Home

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

HTML5,videoタグを背景に用いてメッセージ性を強く持たせるWebデザイン

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

バラバラな配置にまとまりを感じるWebデザイン

OWL   Shop

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

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

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

最小限の装飾と余白で魅せるポートフォリオWebデザイン

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

上下左右メニューの統一性

OWL   VIER

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

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

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

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

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

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

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

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

OWL

    この素敵なWebデザイン、「いいな」と思いました?
    その気持ちをポチッと残しておきましょう!

  • このエントリーをはてなブックマークに追加

関連するWebデザイン

コメントをどうぞ。

1日1Webデザイン

あなたにとっての素晴らしいWebデザインが見つかりますように。

Webデザインレビュータグクラウド

ホバーしてね