新宿のWeb制作会社|ソーイ
ホームページ制作/マーケティング
EC・サービスサイト制作

Webサイトの基本レイアウト5つ

Webサイトのレイアウトとして5つの基本系を知っておくと、Webサイトを検討する際に役に立つ。
レイアウトとは、例えば1カラムや2カラムなど、全体的な構造レイアウトのことである。
 
 
column
それぞれの特徴は以下だと考えてほしい。
 
 

1.1カラムレイアウト

一直線にユーザーに訴えかける傾向があり、世界観の演出力がある。メインコンテンツ部分の幅が広いので画像での訴求力があり、ブランドイメージの促進によい。またサイドバーに目が行かない分、目線の流れをある制御しやすく、意図した流れでコンテンツを見せることができる。
 
【1カラムレイアウトの例】

出典:ホテルニューオータニ(http://www.newotani.co.jp/tokyo/)


 
 

2.2カラムレイアウト

サイドバーが右か左にあるレイアウト。他のページへのリンクやブログの新着情報一覧などを表示させることが多い。ナビゲーションとしては親切になり、他ページのコンテンツへの遷移をしてもらいやすくなる。

一方で世界観の演出としては1カラムに比べて劣る。
 
【2カラムレイアウトの例】

出典:マツモトキヨシ(http://www.matsukiyo.co.jp/)


 
 

3.3カラムレイアウト

情報量が多いサイトにありがちなレイアウト。全体的にスマートではなく見づらくなるが、情報量の豊富さを見せることがメリットになるサイトには向いている。Yahooのトップページは3カラムである。
 
【3カラムレイアウトの例】

出典:Yahoo!(https://www.yahoo.co.jp/)


 
 

4.グリッドレイアウト

多数のコンテンツをフラットに並列的にレイアウトするためわかりやすいが、特定のものを強調しづらい傾向にある。
ニュースサイトやファッションサイトなどによくあるレイアウトで、一覧性の良さが求められるものに向いている。
 
【グリッドレイアウトの例】

出典:ZOZOTOWN (http://zozo.jp/)


 
 

5.フルスクリーンレイアウト

世界観の演出にはもってこいのレイアウトである。
メッセージ性やイメージ性が強いサイトに向いていて、インパクトを創出できる。
感性に訴えかける訴求だといえる。
 
【フルスクリーンレイアウトの例】

出典:NIKKON(http://shop.nikon-image.com/nikon1/nikon1aw1/)


 
 

最適なフレームレイアウトを検討しよう

レイアウトが変わればできるデザインも大きく変わる。ユーザーに対してどんな印象をもたせたいのか、あるいはどう行動してほしいのかを考えレイアウトを決めよう。