Hommard

男性向けファッションECサイトのWebデザインをレビュー。ダンディーな男性のサムネイルが敷き詰められたトップページはとても目を惹きます。ホバーの演出やECサイトとしてのユーザビリティが考慮されているWebデザインです。

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

1. 大きいサムネイルを途切れなく並べる
2. サムネイルホバー時の演出
3. ヘッダーと左カラムを固定して購入を簡単に

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

• Tweet
• 

男性向け服飾ブランドのECサイト。トップページはサムネイルを隙間なく敷き詰めているのが特徴的です。トップページではリンクのあるサムネイルは、文字付きで大きく、その隙間にはリンクはついていないけど、商品との相性が良い小さめの画像を置いています。コンテンツの充実と見た目を兼ねてのこのWebデザインは良いですね。

ホバー時の演出が白を内側に魅せる

トップページのリンク付きサムネイルをホバーすると、マウスが乗っていることを知らせるために、白い枠が表示されます。この枠が、ちょっと内側に表示されているのが良いですね。普通は周りにただ表示させるだけが多いですが、このように内側に表示されることで、周りの画像との兼ね合いも取れますし、この写真自体も映えて写ります。

ヘッダーとサイドバーを固定して購入を簡単に

ECサイトとして、ユーザビリティを高めているのがこの点。ヘッダーには、カートに入っているもの、またログイン情報などが記載されます。サイドバーには、このサイトが持つ洋服のカテゴリーがそれぞれ置いてあるので、どのページにいても簡単に移動ができます。

ECサイトでは、カートに入れたものがすぐに見れたり、ページ移動が簡単に出来るかなど、そういったユーザビリティへの配慮がとても重要だと思います。そういった点をレイアウトでカバーしているこのWebデザインは良いですね。

ナビゲーションボタンが気に入った

また、個人的にですが、ナビゲーションボタンが気に入りました。左右のボタンがこのように何重にも重なる>で出来ています。このナビゲーションボタンは、このサイトとの親和性がとても強く感じられました。

個別プロダクトページでは、このボタンが右カラムでも使われていることもあります。こういったボタン一つでも大事な要素なので吟味してデザインしていきたいですね。

ちなみにこのボタン、CSS Spriteで利用されているので、そういった点も参考になるWebデザインでした。

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

• ツイート
•