インターネットビジネス最新情報ポータル IBNIP

売れるWebページ(ホームページ)レイアウト12選

Webサイトのデザインは、パソコンのディスプレイの解像度の変化、タブレットやスマートフォンの登場などで、その流行も年々変化しています。

また、デザインのインパクトを重視したWebサイト、美しさを追求したWebサイトなど、さまざまなデザインやレイアウトも登場しています。

思い切ったレイアウトの場合、アクセスやコンバージョンを見ながら日々調整していくことができる会社であれば問題はありません。

ですが、一度作ったレイアウトをたびたび変更するわけにはいかない場合や、どのようなレイアウトにしていいかわからない場合は、とりあえず王道とも言える、基本的なレイアウトにしておくことをお勧めします。

売れるWebページ(ホームページ)のレイアウトを紹介いたします。

ホームページのレイアウトの基本型とは?

昔からある基本レイアウトは、現在でも多くのWebサイトで採用されています。

ということは、この形はユーザーにとっても慣れていて、使いやすいということであり、Webサイトのレイアウトの王道とも言えます。

2カラムレイアウト

基本中の基本のレイアウトです。幅広いWebサイトで使うことができます。

コーポレートサイトなど、頻繁にデザインを変更しないサイトの多くは、この形を採用しています。

ヘッダ

人の目は左から右に移行する傾向がありますから、会社のロゴは左側に配置します。

また、次に目立たせたいのが、連絡先です。電話やメールへのリンク、場合によっては営業時間なども配置します。

グローバルメニュー

ヘッダのすぐ下にはグローバルメニューを配置します。グローバルメニュー項目は、多くても7つくらいまでにします。重要な項目順に左からメニューを配置します。

サイドメニュー

サイドメニューは、ここでは左側に配置していますが、右側に配置されることもあります。

ここには、グローバルメニューと同じものをビジュアルに見せるためバナーで配置する場合もありますし、グローバルメニュー配下のサブメニューを配置することもあります。

また、お問い合わせボタンや、SNSへの誘導バナー、関連サイトなどへのリンクバナーなどを配置します。

コンテンツ

グローバルメニューの下や上、また、コンテンツの一番上などに、メイン画像を配置する場合もあります。

その場合は、キャッチコピーなどと一緒にインパクトのある画像を配置します。

フッタ

フッタには、ヘッダより小さめのロゴや、住所、問い合わせ先、テキストリンクのグローバルメニューなどを配置します。また、Copyrightの情報も一番下に入れておきます。

1カラムレイアウト

サブメニューがない場合や、グローバルメニューもサブメニューも必要としないランディングページに使われるレイアウトです。

ヘッダ

基本的な配置は、2カラムレイアウトと同じになります。

グローバルメニュー

ヘッダのすぐ下には、グローバルメニューを配置しますが、ランディングページのようにグローバルメニューがない場合もあります。

1カラムレイアウトは、主にグローバルメニューがない場合は、メニューが少ない場合に適しています。

コンテンツ

このレイアウトの場合、後述するようなさまざまな変化形を作ることができます。

例えば、全画面を使って、動画やスライドを配置するなど、インパクトの大きいサイトを作ることができます。

フッタ

フッタの基本的な配置は、2カラムレイアウトと同じになります。

3カラムレイアウト

2カラムレイアウトよりも、さらにサブメニューやバナーを多く配置したい場合に、3カラムのレイアウトを使います。

ヘッダ

基本的な配置は2カラムレイアウトと同じになります。

グローバルメニュー

基本的な配置は2カラムレイアウトと同じになります。

左メニュー・右メニュー

例えば、左メニューには、商品カテゴリー一覧を配置、右メニューにはお勧めの商品やTwitter、Facebookのタイムラインを埋め込む、あるいは関連サイトへのバナーを配置するというような使い方も可能です。

コンテンツ

左右にメニューを配置するとコンテンツの幅が狭くなりますので、全体の幅を広めに作ることをお勧めします。

フッタ

基本的な配置は2カラムレイアウトと同じになります。

Webサイトの横幅について

パソコンのディスプレイの解像度は年々高くなり、10年ほど前では1024pxの幅のWebサイトも多く見かけましたが、最近では幅の広いサイトが主流となってきています。

よく、Yahoo! Japanのサイトの横幅に合わせておけばいいと言われます。そのYahoo! Japanですが、コンテンツの幅は950pxです。

ところが、最近コンテンツの左右に広告が入ることがあります。この広告が入る場合は1280pxとなります。

Yahoo! Japanが見られないかもしれない位置に広告を入れるとは思えませんから、Yahoo! Japanも1280pxくらいまでは可能と考えているのでしょう。

2018年の日本におけるディスプレイの幅のシェアを見ると、このようになっています。

出典:startcounter

375、414、767という数字は、スマートフォンやタブレットですからここでは除外します。

そうすると、最低でも1280pxということになります。昨今では1024pxのパソコンはほとんど使われていないということになります。

ですから、1200pxくらいまでの横幅であればまったく問題ないと考えられます。

ホームページのレイアウトには他にどのような種類がある?

最近では、上記のような基本的なレイアウトの他に、さまざまなレイアウトが使われています。

一つ共通なのは、どのレイアウトも、レスポンシブ(スマホ対応)にした場合でも表示しやすいものであることが特長です。

デザイン性から見たレイアウト

トップページにはSEO的な機能は盛り込まず、コンテンツ内の商品ページを、ランディングページとしての機能を持たせる場合、トップページを斬新なデザインにする場合もあります。

いくつか例を挙げてみますと、

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

ブラウザをどれだけ広げても縮めても全画面の状態です。全画面でシンプルな静止画像を表示する場合や、動画、スライドの場合もあります。

2分割レイアウト

左右で異なる方向にスライドします。

MENU一体型

MENUをそのままデザインとして組み入れているもの

非対称2分割

非対称の2分割で狭い方にメニューが入る場合もあります。

機能性から見たレイアウト

固定レイアウト

横幅は絶対値であるピクセルで設定します。どのような幅のウインドウ見ても、幅が固定されていますから、横幅の大きさが変わることはありません。

可変レイアウト

幅を%で設定するので、ウインドウの横幅に合わせてコンテンツの幅も変更されます。

リキッドレイアウト

幅は%指定するので、ウインドウ幅が広くても狭くてもコンテンツはウインドウ内に表示される一方、幅の狭いウインドウでは、コンテンツは縦に長くなりすぎて読みにくくなります。

フレキシブルレイアウト

幅を%指定するものの、最低幅や最大幅を指定することで、コンテンツ幅が狭くなりすぎたり、広くなりすぎたりすることを防ぎます。

可変グリッドレイアウト

可変グリッドレイアウトの有名なサイト、Pinterestを見れば一目瞭然ですが、コンテンツはタイル状に配置され、ウインドウ幅が広くなったり、狭くなると、タイルを再配置して、全画面または既定の幅内にタイルがきっちり収まるようにレイアウトされます。

レスポンシブレイアウト

最近では、主流のレイアウトです。PCとスマートフォンのサイトを別々に作るのではなく、一つのデータをCSSによってPC、スマートフォン用に最適化します。

データ自体は共通なので、メンテナンスは1度で済むので便利な機能です。

一例として、上述した2カラムの基本レイアウトをレスポンシブにした場合、下記のようにレイアウトすることもできます。

ホームページのレイアウトのNG例

ホームページのオーナーは、自分自身の思いをぎっしりWebサイトに詰め込みたい、という場合もあるでしょう。

しかし、ホームページを使うのは閲覧者ですから、閲覧者が使いにくいホームページは離脱率が高くなってしまい、せっかく書いた文章も読んでもらえなくなってしまいます。

ここでは、閲覧者から好まれないレイアウトのNG例をいくつか挙げてみます。

導線がわかりにくい

探したいコンテンツにたどり着きにくいホームページは好まれません。

例えば、メニューを置くべきグローバルメニューにもサイドメニュにも含まれない、メニューがコンテンツページの下の方にあったとすれば、閲覧者はそれを見つけることがむずかしくなります。

また、特にページ数がたくさんある場合は、きちんとカテゴリー分けして見やすいメニューの階層を作るようにします。

ファーストビューで何も伝わらないレイアウト

サイト閲覧者は、ファーストビュー(ホームページを開いた時に見える画面)によって、読み進めるかどうかを決めると言います。

たとえば、メイン画像を配置しているとしても、何の関連性もない、キャッチコピーもない、ただの画像であれば、閲覧者は読み進めてはくれないでしょう。

ファーストビューに、魅力的なコンテンツを配置することはとても重要です。

テキストの割合が多すぎるレイアウト

SEO対策を意識しすぎて、とにかくテキストばかりにしているWebサイトを見かけることがあります。

それでもまだ、きちんと階層に分かれた見出しがついていればいいのですが、ずらずらと長い文章が書かれているだけという場合は要注意です。

Webサイトは適宜画像を入れて見やすくすること、コンテンツはH1、H2などの見出しタグをつけて、読みやすくすることが大切です。

レスポンシブデザインになっていないサイト

最近のGoogleでは、検索順位の基準をスマートフォンサイトの評価で決めています。

つまり、そもそもスマートフォンサイトがない、あるいは、別サイトとして作っているスマートフォンサイトがPCサイトよりもコンテンツが劣る場合は、検索上位に表示されにくいということになります。

理想的には、PCとスマートフォンのサイトを同じにする、そのためには、レスポンシブサイトにするのが一番手っ取り早い方法となります。

もし、作り方がわからないという場合は、レスポンシブ対応になっているテンプレートなどを利用するのもひとつの方法です。

まとめ

ホームページをレイアウトする際、もし、経験が少なくどのようにしていいかわからない場合は、とりあえず王道と言われる基本レイアウトにしておくべきです。

レイアウトや見せ方は、閲覧者の見やすさ、読みやすさを最優先にします。

特にファーストビューは、閲覧者の離脱を防ぐため、サイトの内容がよくわかるような画像やキャッチコピーを使うようにしたいものです。

また、最近では、デザインやレイアウトに加えて、スマートフォンに対応しているサイトであるかどうかが非常に重要な要素となっています。

[記事公開日]2017.11.15
[最終更新日]2018.12.06
[ライター]natsu