Image by DjR Pictures
[山形師匠のお言葉]
カラムレイアウトはWebデザインで最もベーシックなレイアウトパターンの1つです。
カラムとは画面を横に分割された縦に伸び縮みする領域の事です。カラムの数と配置位置によって得られる効果を学んでください。
[森田]
分かりました!カラムですね。
そういえば普段何気なくネットサーフィンしてるからそこまで注目したことなかったです。早速まとめてみます!
■1カラムレイアウト
http://store.apple.com/us
980px
まずはいつもお世話になっているApple Store。
商品がスッキリと見やすく、それぞれが目に留まりやすいです。
http://kitkat.com/android/
980px
こちらはKitKat Break LABSのサイト。
ワンページで、スクロールによる動きが楽しいです。
今すぐコンビニに行ってKitKat買いたくなります。
http://brand.shuuemura.jp/ultime8/
960px
そして個人的欲求に基づきshu uemuraのサイトです。
商品説明を下まで読むともう限界です。
ここまで1カラムレイアウトを見てみました。1つのページを最大限に使えるというのが強みですね。広々としたレイアウト、商品に対する理解を深めたりするのに効果がありそう。
■2カラムレイアウト
http://www.amazon.com/
200px 900px
ショッピングサイトの大手Amazonです。あえてアメリカ版。
膨大な商品の中から欲しいものを探す時にはカテゴリ検索が便利ですね。同じカテゴリ内で思わぬ掘り出し物を見つけたり。
http://www.adobe.com/products/
705px 210px
これがなきゃ始まらない!Adobe製品ページ。
製品に関係する情報を右側に表示しています。
Cloud便利すぎて感動しました。
http://www.mcdonalds.com/
95px 845px
そろそろ小腹が減ってきました。マック行こう。
最小限のガイドで商品の魅力を存分に引き出しています。
バーガーアイコンがすごく可愛い。
2カラムレイアウトは、特定のショップにおけるカテゴリ分けのガイドだったりとオンラインラインショッピングの際によく見かけます。検索作業の手助けや関連情報の表示に役立ちそうです。
■3カラムレイアウト
http://edition.cnn.com/
250px 420px 300px
情報盛りだくさんなアメリカのテレビ局CNNのサイトです。
左から最新情報の目次、ピックアップニュースの紹介、広告や情報系となっています。
http://www.yahoo.com/
135px 524px 320px
次に大手ポータルサイトyahoo!を見てみます。
左からカテゴリ、ピックアップ情報、天気や株式等の情報という区分になっています。アメリカ版はスタイリッシュですね。
http://www.nicovideo.jp/
185px 430px 350px
そして日本のサブカルチャーのたまり場ニコニコ動画です。
左からカテゴリ、その日の情報、ニュース以外の情報とてんこ盛り。この雑多さにトーキョーを感じます。
3カラムレイアウトのサイトはどこも膨大な情報量がありました。リンクの数も半端ありません。検索ではなく発信の場に活用されていますね。総合サイト向きという感じです。
カラムレイアウトを分析してみると、サイトの特徴や性格・それが何の為のページなのかが見えてきました。デザインする際に、こういうページだからこう見せる、といったセオリーを知っておくことはとても大事です。Webデザインの仕組みがちょっと分かってきました!
というわけで今回の修行はここまでです。押忍!