structure
Design

カラムレイアウトを知るべし

Image by DjR Pictures

[山形師匠のお言葉]
カラムレイアウトはWebデザインで最もベーシックなレイアウトパターンの1つです。
カラムとは画面を横に分割された縦に伸び縮みする領域の事です。カラムの数と配置位置によって得られる効果を学んでください。

[森田]
分かりました!カラムですね。
そういえば普段何気なくネットサーフィンしてるからそこまで注目したことなかったです。早速まとめてみます!

■1カラムレイアウト

calams-1apple
http://store.apple.com/us
980px
まずはいつもお世話になっているApple Store。
商品がスッキリと見やすく、それぞれが目に留まりやすいです。

calams-1kitkat
http://kitkat.com/android/
980px
こちらはKitKat Break LABSのサイト。
ワンページで、スクロールによる動きが楽しいです。
今すぐコンビニに行ってKitKat買いたくなります。

calams-1shu
http://brand.shuuemura.jp/ultime8/
960px
そして個人的欲求に基づきshu uemuraのサイトです。
商品説明を下まで読むともう限界です。

ここまで1カラムレイアウトを見てみました。1つのページを最大限に使えるというのが強みですね。広々としたレイアウト、商品に対する理解を深めたりするのに効果がありそう。

■2カラムレイアウト

calams-2amazon
http://www.amazon.com/
200px  900px
ショッピングサイトの大手Amazonです。あえてアメリカ版。
膨大な商品の中から欲しいものを探す時にはカテゴリ検索が便利ですね。同じカテゴリ内で思わぬ掘り出し物を見つけたり。

calams-2adobe
http://www.adobe.com/products/
705px  210px
これがなきゃ始まらない!Adobe製品ページ。
製品に関係する情報を右側に表示しています。
Cloud便利すぎて感動しました。

calams-2mcd
http://www.mcdonalds.com/
95px  845px
そろそろ小腹が減ってきました。マック行こう。
最小限のガイドで商品の魅力を存分に引き出しています。
バーガーアイコンがすごく可愛い。

2カラムレイアウトは、特定のショップにおけるカテゴリ分けのガイドだったりとオンラインラインショッピングの際によく見かけます。検索作業の手助けや関連情報の表示に役立ちそうです。

■3カラムレイアウト

calams-3cnn
http://edition.cnn.com/
250px  420px  300px
情報盛りだくさんなアメリカのテレビ局CNNのサイトです。
左から最新情報の目次、ピックアップニュースの紹介、広告や情報系となっています。

calams-3yahoo
http://www.yahoo.com/
135px  524px  320px
次に大手ポータルサイトyahoo!を見てみます。
左からカテゴリ、ピックアップ情報、天気や株式等の情報という区分になっています。アメリカ版はスタイリッシュですね。

calams-3niconico
http://www.nicovideo.jp/
185px  430px  350px
そして日本のサブカルチャーのたまり場ニコニコ動画です。
左からカテゴリ、その日の情報、ニュース以外の情報とてんこ盛り。この雑多さにトーキョーを感じます。

3カラムレイアウトのサイトはどこも膨大な情報量がありました。リンクの数も半端ありません。検索ではなく発信の場に活用されていますね。総合サイト向きという感じです。

 

カラムレイアウトを分析してみると、サイトの特徴や性格・それが何の為のページなのかが見えてきました。デザインする際に、こういうページだからこう見せる、といったセオリーを知っておくことはとても大事です。Webデザインの仕組みがちょっと分かってきました!

というわけで今回の修行はここまでです。押忍!

標準