Web戦略講座 ソーイ株式会社
未経験のWeb担当者でもWeb戦略を作成できるようになるWeb戦略ブログ

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/)

 

 

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

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



無料相談はこちらから

Web制作についてのご相談はこちらからお願いします。
真剣に制作をお考えの方に無料でご提案いたします。まずはお気軽にメールでご相談ください。

* しつこい営業は一切しておりません。

御社名
お名前
ふりがな
HPのURL
メールアドレス
検討内容
制作の背景
認識している課題・要望
その他、ご相談



ホームページ制作会社の賢い選び方