とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

うわっ...Webサイト、四角すぎ...?ハッとするデザインを盛り込もう

うわっ...Webサイト、四角すぎ...?。ハッとするデザインを盛り込もう

Webサイトって四角いですよね。

まぁそんなこというと

ほとんどのものは四角いのですが。

 

Webサイトはしょせんはグリッドで

レイアウトされているので、

とにかく四角い。

 

そんな四角いWebサイト、Webデザイン

ではありますが、ハッとするデザインって

あるんですよね。

 

四角から飛びててるデザインです。

既存レイアウトの枠からはみ出ているので、

「ハッ...!」ってなります。

 

ビジュアル的な見栄えもよくて、

目を引くデザインに仕上がります。

 

 

うまいなぁと思ったのが、こちらのサイト。

www.rakuten.ne.jp

とある楽天市場のネットショップの

デザインなのですが、画像をうまく利用しています。

商品バナー画像をうまく配置して枠から飛び出すようなデザインに

商品バナー画像をうまく配置して枠から飛び出すようなデザインに

画像の使い方がすごくうまい。ハッとなり目を引きます。

画像の使い方がすごくうまい。ハッとなり目を引きます。

これ、すごくうまいですよね。
バナー画像でこういう使い方をしている

サイトはあまりないのではないかなと思います。

 

四角いレイアウトのなかで、飛び出す。

あえて外す、あえて崩すというのは訴求に

かなりよい手法とおもいます。

 

もっと大げさにやると、

ブロークングリッドレイアウト

と呼ばれているものになります。

 

Appleの商品ページなんかそうなのかな。

ベースのグリッドのラインはありつつも、

一部飛び出すようなデザインを採用していますね。

一部で飛び出すようなデザインを採用しているiPadのページ

一部で飛び出すようなデザインを採用しているiPadのページ

www.apple.com

やりすぎると逆効果な感じもしますし

Webサイトのコンテンツや目的にも

よりますが、

【楽天市場】島の人 楽天市場店:島の人 礼文島の四季 北海道ギフト

ぐらいがハッ...!となっていいなと個人的には

思います。

 

ブロークングリッドレイアウトを

紹介している参考サイト、貼っておきます。

 

webdesignday.jp

webdesign-trends.net

mtame.jp

webdesign-trends.net

pecopla.net

ほかにもWebサイトで採用すると

ハッ...!とするデザイン手法は、

エディトリアルデザインというものがあります。

雑誌や書籍など出版物に適用されるデザインなのですが、

なかなか目を引くのでWebサイトに

採用するのはありだとおもいます。

エディトリアルデザインについてはまた

別の記事で紹介します。