UNIQRO / ユニクロ

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

1. 高さを合わせたマルチカラムWebデザイン
2. ヘッダーとコンテンツ幅が統一され、サイト全体がまとまる
3. 多くの情報をコンパクトにまとめる

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

• Tweet
• 

マルチカラムWebデザインの大御所、UNIQLOのWebデザインをレビュー。サイト幅を固定してサイト全体を統一させています。また多くの商品数にも関わらずしっかりまとめられているWebデザインはECサイトとして非常に参考になるもの。

高さを合わせたマルチカラムWebデザイン

コンテンツをマルチカラムに表示させ、多くの商品を一度に見せています。当ブログトップページもマルチカラムとなっていますが、高さはそれぞれ別に設定しているのに対し、高さを同一にしています。そのためページ全体の統一感がありますね。

ところでこのマルチカラム。商品などを多く見せる場合にとても優れたデザインなのですが、画像をどのように配置するか実はけっこう頭を悩ませるところでもあります。ユニクロは画像を周り余白なしで表示させています。それに対し当ブログのトップページでは画像を画像周りに余白を設定しています。

これは商品自体をより強調させたいか、周りのコンテンツとの兼ね合いはどうか、その目的によっても変わってくるものなのですが、ユニクロの縦長の画像を使用したマルチカラムデザインは、商品が目立って良いですね。今この状態を観ると、このデザインこそが正解と思うくらいにまとまっていますが、このシンプルで強調性があるデザインになるまで、多くの試行錯誤があったのではないかと思います。

ちなみに同じくマルチカラムWebデザインのPinterestは、画像周りには余白が設定されています。

比較してもらうとわかりますが、やっぱり縦長の画像が余白なしで独立して配置されていると、存在感が違いますね。ユニクロの画像を精一杯に強調したマルチカラムWebデザインのまとまり具合は、うまいなぁと思わざるを得ません。

ヘッダーとのまとまりがすごい

UNIQLOのWebデザインのまとまり感の一番の要因はココではないでしょうか。

スクロールしてもヘッダーがついていきます。そのヘッダーにはメニューが配置されていて、簡単に各商品にアクセスが可能となっておりユーザビリティを向上させる大事な要因の一つでもあります。そのヘッダーをここまでうまくサイトになじませて魅せているWebデザインも、なかなかないでしょう。

4カラムのコンテンツとヘッダーの幅がぴったり。他のページでもメインコンテンツとヘッダーの幅は同一で、サイト全体に統一感がうまれます。

なんというか、スクロールしてついてきてもそれが「自然」。そんな風に思えるヘッダーですよね。

情報のまとめ方 – ヘッダーとマルチカラムと

ご存知UNIQLOには多彩な商品が揃っています。それをまとめあげているのが、このヘッダー。しっかりとソートカテゴライズされ、目的にあった商品をすぐに探すことができます。

このメニューに対し、マルチカラムのメインコンテンツなのですから、簡単に商品にアプローチが可能で、なおかつ見やすく魅力的に映ります。

そして商品ページにたどり着いた上の、このデザイン。今までいくら存在感があるといってもマルチカラムで観て来た小さい画像。それを商品ページでは大きいサイズの画像で、しかも多彩な例とともに見ることができます。

ここまでくればユーザーにかなり商品のアピールが出来ているのではないでしょうか。

そしてモデル事例もコンパクトに収めながらUNIQLOのサイトらしさを出すWebデザイン。

気になるカテゴリー。気になる商品。そして気になる大きい魅力的な商品の例。理想的な商品へのアプローチ方法がつまっているWebデザインな気がします。

ECサイト、マルチカラムWebデザイン、それらのサイトを作る際にはぜひとも参考にしたいUNIQLOのWebデザインでした。勉強になります！

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

• ツイート
•