Custom Suits & Mens Suits | Indochino

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

1. レスポンシブWebデザインの可変がうまい
2. Goodなランディングページ−説明がうまい
3. シンプルな白を基調としたWebデザイン

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

• Tweet
• 

シンプルクリーン！白を基調したレスポンシブWebデザインをレビュー。メンズファッションのECサイトですが、サイト各所にあるランディングページのような説明ページが、写真を主体に余白を大きく取りそして文字もまとめることで、とてもミニマルにまとまった構成になっている点も見どころ。

シンプルな男らしさが詰まったWebデザインが表現出来ているのではないでしょうか。それでは見どころを観ていきましょう！

レスポンシブWebデザインの可変具合がGood！

サイトはレスポンシブWebデザインを採用しています。タイポグラフィなどは全て画像を使用していないので、読み込みに時間がかかる画像は、商品写真のみとなっているのが大事なところですね。

で、このサイトの可変具合が良いんですよ！上図はPCサイズの場合。

上図はタブレットサイズの場合

更に上図はスマホサイズの場合です。

PCサイズの場合では幅を大きくしていたり、高さを異なるサイズにしたりしていた画像が、ウィンドウサイズが小さくなると正方形になります。同時にメニューが開閉式に。

小さく、だけど目立たせて。そんな要望をうまく叶えた可変具合だと思います。むしろこの構成ならスマホサイズで観たほうがむしろ見やすかったりするかもしれません。そう考えるとPCサイズの画像サイズを変えることによる緩急の付け方はうまいですよね。だってもしスマホサイズなどのレイアウトに囚われていたら、このように画像の中の余白をうまく使うような画像の配置は、なかなか出来ないのではないでしょうか。

ここまでモバイル端末に対応されたWebデザインならば、ほぼ全ての構成を初めからモバイル端末を見越してデザインしたはず。このようにうまくレイアウトを対応させているのは素直にすごい。

ランディングページのような説明ページが秀逸！

あぁ、ECサイトの中にこんなかっこいい説明ページがあったらついつい見てしまいます。商品の説明ページがとにかくうまい！サイトのいろんなところにこのようなページがあるので、商品ページをデザインする方はとても勉強になりますよ。

そんな中から私が気になった一つの例はこの部分

「LA BOCA CHINO」というブランドの商品ページですが、商品説明のために「LEARN MORE >」というボタンが用意されています。このボタンを押すと。。。

スクリーンショットが縦に伸びて、スライドショーになります。このページでもサイトコンセプトにあった余白を活かしたシンプルな構成になっているので、商品そのものを実感しながらスライドを楽しむことができます。ちょっとぜひ観てみてください！

ECサイト、ランディングページ、いずれにしてもとても参考になるWebデザインです。シンプルな構成を楽しむのにも良いですね。勉強になりました！

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

• ツイート
•