画面を目一杯使ってコンテンツを配置するWebデザイン- その秘密は意図した「線」にある

画面を目一杯利用してコンテンツを配置するWebデザインのご紹介。グリッドレイアウトにしても、ここまでコンテンツごとの余白をなくしたレイアウトは初めて見ました。そして、そのごちゃごちゃ感を払拭させるデザインは、脱帽ものです。

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

なぜだ・・・！余白という概念を超えたレイアウトです。画面いっぱいをコンテンツの配置に使用しているのに、見やすい。ごちゃごちゃしてて見づらいーという感覚を起こさせない。

それは、しっかり意図した「線」のおかげでした。

まずこのWebデザインの一番の特徴は、全画面を利用したコンテンツ配置ですね。

上図はタブレット端末サイズで表示した際の全画面表示のキャプチャです。画面を目一杯利用しています。一般的には、コンテンツの間には余白が存在するもの。例えばWeb風のトップページでは記事の上下左右に余白が存在します。

一方、このWebデザインは、一見記事と記事の間の余白が感じられない。けど、余白があるように見えますよね。

これは、記事そのものの中に余白をとったレイアウトだからです。WidthもHeigthも固定されており、横の余白はとらないのですが、しかし、縦幅を大きく取得して「余白」を生み出しています。

そしてこの「余白」は目の休めどころともう一つ意味がありました。（むしろそっちのほうが主役？）

その意味、いや、このサイトの見やすさの秘密は、コンテンツごとを区切る「線」にあると思いました。一見バラバラに配置されているコンテンツですが、実はいずれの行を観ても、３カラム以上は同じ線で区切られているです。

そしてその区切り方が秀逸！これが本当に感動した！のが、記事のトップボトムだけの「線」ではないんです。区切り線は、記事のキャプチャと本文の”分かれ目”を「線」として観せているんです。

上図がまさにその例。猫の記事と上の記事は違う記事で、記事ごとの線で区切られています。その区切り線の右に目をやるとやはり線は続きます。しかし、猫の記事列とは異なり、実は私達が認識していた「線」は写真と本文の”分かれ目”です。

このように、「線」を無意識の内に、訪問者に認識させることで、一見バラバラのコンテンツがまとまりのあるコンテンツに見えていたのですね。これはとても参考になりました。

WK-Amsterdam-Webデザイン_003

そして下へスクロールすると、大きな余白に囲まれた、information。やはりいくら線で区切られ、まとまりがあるように感じてもコンテンツが敷き詰めれていることには変わりありません。

最後に重要な情報を載せ、そこは大きな余白をとるという、「視覚のギャップ」は、訪問者の目を自然とこのメッセージへと移らせるでしょう。

なんでもなさそうで、実は深いWebデザイナーの”意図”が込められているWebデザインでした。とても参考になりました。

今日参考にさせて頂いたサイト

Twitter/FacebookではWebデザインにまつわることから、Web制作に関することを日々配信しています。ぜひフォローしてください！