【PIXCEL探訪】無印良品のトップページ

無印良品さんのサイトにお邪魔しました。
はるか昔、テーブルレイアウト時代から参考にさせて頂いてました。
無印良品さんといえば、グラデーションを使わないベタ塗り、フラットなデザイン。
もちろん、サイトの方向性もそれに追従しています。

面白いなと思ったのは、全体の幅が880pxだということ。両サイドに10pxの余白を置いて、合計900px。
それにしちゃあ随分広く見えるのは、情報整理のうまさや版面率のバランスがいいことによるものか。

メインのイメージ部分は、880px×370px。ふむふむ。

その下のコーナーには、左からw220pxのボックスが20pxのスペースを空けて3つ並び、右端に155pxのボックス。
155pxなんて、なんだかデザイン上使いにくそうだけど。。
３つのボックスと右端のボックスの間にのスペースは25px。
他のボックス間のスペースより少し多く取ることで、情報整理をされているわけですね。なるほどなあ。

続いてその220pxのボックス内部。
40pxの画像に1pxのボーダーをつけた42pxのアイキャッチ画像に、8pxのスペースを空けて150px幅の文章がついています。
次のアイキャッチ+文章との縦マージンが15pxなので、それよりも短いスペースにして、アイキャッチと文章の繋がりが分かりやすくなってますね。

それにしても、バナー部分とアイキャッチ+文章の部分とが両方いい塩梅でありますね。
ちょっと追い切れなかったのですが、この下の方には220px×55pxのバナーもあります。
このバナーが先に上部に来ていたらちょっと重い感じがしてしまうので、アイキャッチ+文章を上部に持ってきたのでしょうか。

お時間ある方は、実際のサイトを見てみて下さいね。