ニーズに合わせて選べる、おすすめホームページレイアウト10選
ホームページ作成のための第一歩は、まず適切なレイアウトを決めることです。ホームページレイアウトはデザインの基盤となるだけでなく、サイトを通じてユーザーにどのようにメッセージを伝えるか、何を感じてもらうかという点でも重要な枠組みとなります。
この記事では非対称デザインからおなじみのパターン使い、画面の分割表示まで、サイト制作がはじめてという方にもおすすめの10種類のホームページレイアウトをご紹介します。
ホームページレイアウトとは
ホームページレイアウトは、Web ページ上にあるすべての視覚的なパーツをまとめたものです。ページのパーツをどこに配置するかをあらかじめ決めておくことで、パーツ間の関係性を調整し、より良いユーザーエクスペリエンスを実現できます。
レイアウトは Web デザインにおける主要な要素であり、訪問者がページのパーツを使用して登録を行う順番、最も注目されるパーツ、サイト全体の視覚的なバランスなどを決定するものです。ホームページレイアウトを決める段階ですべての情報を俯瞰的に確認しておくことで、サイトのメッセージ性とユーザビリティの向上も期待できます。
一言で言うと、優れたホームページレイアウトとは「訪問者の視線を適切な方向に誘導できる」デザインを指します。サイト上でまず見てほしい重要なパーツを目立たせ、その次に重要度の高い順にそれに続くセクションへと訪問者を誘導します。また、レイアウトはユニークなインタラクションを作成したり、Web デザインの最新トレンドを取り入れてみるなど、デザインのブラッシュアップを行う際にも役立ちます。
適切なホームページレイアウトの選び方
作成するホームページに適切なレイアウトを探しているというときには、下記の2つの要素を考慮しましょう。
コンテンツの種類に合ったレイアウトを選ぶ
まずは、選んだレイアウトが希望するコンテンツ種類に合っていることを確認しましょう。ホームページレイアウトは、あなたが訪問者に伝えたいストーリーを的確に表現できるものであるべきです。思い描いているメッセージを増幅して、きちんと伝えられるような配置のものを選びましょう。
たとえば、ネットショップやポートフォリオサイトを作成する場合は、商品や仕事内容を掲載するのに適したレイアウトが良いでしょう。対して、ブログやニュースサイトでは、実際の情報をすばやく効率的に伝えるのに適したレイアウトが効果を発揮します。
おなじみのレイアウトを使用する
デザインに対して創造性を発揮する余地はもちろんありますが、たいていの場合は最も良く知られた、多くの人が採用・検証済みのホームページレイアウトを使うのが一番です。このように古くから使われてきたレイアウトはユーザーにもなじみがあることに加えて、数々の試行錯誤の上で改良されてきたこと、デザインの原則に基づいて構築されていることなどが主な理由です。
このように、なじみのある一般的なデザインを採用することでより直観的で使いやすいホームページに仕上がる場合が多いことから、以下では、最も効果的かつ人気のあるホームページレイアウトの中から厳選した10種類のパターンをご紹介します。それぞれのレイアウトのポイントや、おすすめのサイトの種類も併せて説明していますのでぜひ最後までお読みください。
掲載している画像サンプルは、すべて Wix が作成したホームページテンプレートの例です。作成したいサイトのスタイルやニーズに合わせて自由自在にカスタマイズが可能です。
おすすめのホームページレイアウト10選
Z パターンレイアウト
F パターンレイアウト
フルスクリーン画像レイアウト
画面分割表示レイアウト
非対称レイアウト
単一カラムレイアウト
ボックスベースレイアウト
カードレイアウト
雑誌風レイアウト
水平ストリップレイアウト
01. Z パターンレイアウト
訪問者は、新しい Web ページを開くとすばやくそのページ全体に目を通して要点を把握しようとします。これは「スキムリーディング」と呼ばれ、多くの場合視線は Z 字型やジグザグ型で行われます。つまり、視線が左上から右上、次に左下、最後にまた右といった順で移動するのです。Z パターンのホームページレイアウトは、この習慣を利用して重要な情報を Z 字形に分散して配置したものです。
このレイアウトでは、ロゴを通常トップページの左上に配置し、最初に目に入るようにします。対する右端にはナビゲーションメニューと、目立つ CTA（行動喚起）ボタンを配置するのが一般的です。
Z パターンの対角線上にある、ページを上から下へ横断する部分には最も注目を集める情報を配置します。たとえば、魅力的なビジュアルや、ホームページの概要を表す簡潔なテキストを追加すると良いでしょう。
この Z パターンの一番下には、最も重要な CTA を配置すべきです。これまでページで伝えてきた商品の購入やサービス予約について、訪問者が感じている期待感をここで行動に変えてもらうのです。
このホームページレイアウトは、視覚的な要素が多いページに最適です。特に、ある特定のコンバージョン達成を目指すランディングページなどにおすすめです。
02. F パターンレイアウト
このデザインも、Z パターンのレイアウトと同様に、ユーザーがページを読み進める際の一般的な行動に基づくものです。テキストが多い Web ページでは、ユーザーは情報を F 字型に流し読みする傾向があります。つまり、ユーザーの視線はページ上部の横長のセクションにまず注目した後、そこからまっすぐ下方に向かい、左側に集まる傾向があるのです。
F パターンのレイアウトを使用する場合は、訪問者が長く滞在する可能性のあるページ上部のセクションにコンテンツを集中させましょう。見出し、サブタイトル、画像コンテンツなどを配置し、サイトの続きを見たくなるよう魅力的に紹介します。また、訪問者をさらに詳しい情報へと導くアンカーテキストや、最も関連性の高い部分へと誘導するナビゲーションメニューを追加するのも良いでしょう。
F パターンの縦線部分であるページ左側のセクションは、文章をより魅力的に見せるために有効活用できます。画像やアイコンを配置したり、箇条書きやナンバリングなどのフォーマット要素を活用してテキストを整理しましょう。
F パターンレイアウトは、主にテキストを中心とした Web サイトに適しています。例えば、ブログを作成する場合は、トップページと個々のブログ記事のページの両方でこのレイアウトを利用できます。
03. フルスクリーン画像レイアウト
大型のビジュアルを前面中央に配置したフルスクリーン画像レイアウトは、人目を引く、没入感のあるホームページデザインを求めている場合にぴったりです。大きなビジュアルの効果で、あなたが誰で何をしているのかが訪問者に一目で伝わります。また、モバイルデバイスでも見栄えが良いのが、このレイアウトの素晴らしいところです。
使用するビジュアルは、写真、イラスト、動画など何でもかまいません。ただ、このレイアウトを最大限に活用するために、あなたのサービスや製品に関連しており、サイトの全体的な雰囲気に合った高品質の画像を選ぶことが大切です。
また、フルスクリーン画像には短いテキストを添えて、サイトの内容をさらに説明することも忘れずに。パンチの効いたヘッダーやキャッチーなスローガンを作成して、あなたのビジネスについて紹介し、訪問者が続きを知りたくなるようなサイトに仕上げましょう。
フルスクリーン画像レイアウトは、特定のニッチ分野や製品を強調したいビジネスや、マーケティングアセットとして優れた宣材画像が揃っている場合に最適です。例えば、写真ポートフォリオサイトでは、新しく撮影したシリーズや販売中の写真を掲載するのが良いでしょう。結婚式向けの特設サイトでは、幸せなカップルの写真をフルスクリーンで使用することで心温まる印象を与えることができます。
04. 画面分割表示レイアウト
このレイアウトは、ホームページの画面を縦に真ん中で分割することで、完璧なシンメトリー（対称）バランスを実現するデザインです。このように2分割することで、それぞれのセクションにまったく異なるコンテンツを配置したり、1つのアイデアを2つの視点から表現したりすることができます。
以下のテンプレートでは、左側に目を引くビジュアル、右側にテキストとそれに合わせたベクターアートを配置し、食をテーマにしたエクスペリエンスを表現しています。左右のセクションで注目度を競うのではなく、互いに完全に補完し合うことができるのがこのデザインの特徴です。また、eコマースサイトの「メンズ」と「レディース」のように、サイト訪問者に相反する2つの選択肢を選んでもらう場合にも効果的です。
画面の左右で微妙に異なる動作を追加するなど、動きをつけてみるのもおすすめです。例えば、片側だけにパララックススクロールエフェクトを追加するのも良いでしょう。また、このレイアウトをスクロールダウンして表示される2つ目のセクションにも適用して、画面の両側のコンテンツを入れ替えると、視覚的にユニークなデザインに仕上がります。
このレイアウトは、大きく異なる2種類のコンテンツを含むホームページや、文章と画像を均等に組み合わせたいサイトに最適な方法です。例えば、年齢や性別、行動によってユーザーをセグメント化しているネットショップなどに最適です。
05. 非対称レイアウト
画面の分割と同様に、ホームページのセクションを分割して構成するスタイリッシュなレイアウトですが、今回は2つのパーツの大きさや重さが均等ではありません。このように左右のバランスを非対称にすることで視覚的な動きが生まれ、デザイン全体をよりダイナミックに見せることができます。
また、ページ内のスケール、色、幅を均等にしないことで、訪問者の視線を特定の要素に集中させることができます。特定の要素をより大きく、太く、明るくすることで視覚的な重みを与え、注目すべきポイントとして目立たせるのです。
まずはコンテンツのどの部分を強調したいかを決めます。商品の写真や、新規登録を促す CTA など何でもかまいません。色のコントラストを上げたり、比率を大きくしたり、その他の視覚的な方法を用いて、その部分を際立たせます。
非対称レイアウトは、モダンかつ革新的なデザインでユーザーのエンゲージメントを高めることを目的とするホームページに最適です。例えば、ビジネスサイトやデザイン会社のオンラインポートフォリオなどが良い例だと言えるでしょう。
06. 単一カラムレイアウト
すべてのコンテンツを縦1列に配置したレイアウトで、シンプルでわかりやすいデザインです（実際、このページでも使用されています）。
1カラムのレイアウトはナビゲーションが簡単で、訪問者はページをスクロールするだけですぐに詳しい情報を得ることができます。しかし、このレイアウトを使用する際には、「トップに戻る」ボタンや固定メニューを追加して、ユーザーがさらにサイトを探索できるようにすることが重要です。
テキストが多いサイトに1カラムレイアウトを使う場合は、画像や改行、ヘッダーやサブヘッダーでテキストを頻繁に分割することを忘れずに。このレイアウトは、長文のコンテンツや、ブログ、SNS フィードなど、時系列でコンテンツを表示するサイトに最適です。
07. ボックスベースレイアウト
ボックスベース、またはグリッドベースのレイアウトは、複数のコンテンツを1つの幾何学的なデザインにまとめたものです。各コンテンツをボックス内にきちんと収めることで、それぞれのパーツが主張し過ぎず、統一感のある見た目に仕上がります。それぞれのボックスが異なるページにリンクするため、ユーザーは最も関心のあるトピックについてより詳しく知ることができます。
このレイアウトを使用するときは、サイトのヘッダーとなる大きなメインボックスを1つ追加し、その下に異なるボックスをまとめるのがおすすめです。このボックスには、ページのタイトルと内容の簡単な説明、そしてナビゲーション用のメニューを配置しましょう。また、各ボックスのビジュアルをうまく組み合わせて、まとまりのあるブランドアイデンティティを作り上げることも重要です。
Wix でホームページを作成している場合は、Wix プロギャラリーを使用するのがおすすめです。高品質の画像をボックスベースのレイアウトで表示し、列や行の数、サイズや間隔まで自由にコントロールすることができます。
このレイアウトは重要なページを多く含むホームページに最適です。たとえば、グラフィックデザインのポートフォリオサイトの場合、サイト上の各ボックスからそれぞれのプロジェクトページにリンクを張ることができます。
08. カードレイアウト
ボックス型レイアウトと同様に、複数のボックスや長方形状のコンテナを使用してさまざまなコンテンツを表示するレイアウトです。このレイアウトはほとんどの場合、階層にこだわらないのが特徴です。ある項目が他の項目より目立ちすぎることなく、すべての情報が平等に扱われます。
カードはすべて同じ機能（サイズ、フォントなど）で作成されるため、それぞれのカードにコンテンツを簡単に取り込むことができます。あらゆるスクリーンサイズにフィットするモジュール式のデザインで、情報量が多くても直感的で使いやすく、結果としてユーザーエクスペリエンスも向上します。
カードレイアウトは、コンテンツが豊富なウェブサイト、特に Vlog やネットショップに最適です。
09. 雑誌風レイアウト
雑誌風のホームページレイアウトは、紙の新聞からヒントを得て、マルチカラムグリッドをベースに複雑な視覚的階層を作り出したものです。各コンテナは個別に変更可能で、見出しの大きさを変更することで重要な記事を目立たせることができます。
パーツの大きさ（一番見てほしい画像や見出しを大きく設定）、配置（最初に読んでもらいたい記事をページの一番上に）、デザインの詳細度（テキストだけの記事より写真を加えた記事の方が注目度が高くなる）などを工夫して、訪問者に伝えたい情報の優先度を設定しましょう。
なお、この雑誌風レイアウトは、上記のように飛ばし読みに最適な F 字パターンを採用しており、文字をすべて読まない訪問者にも効果的に情報を伝えることができるデザインです。F パターンとより複雑なグリッドを組み合わせることで大量の情報を消化しやすく分解できるため、すっきりと整理されたデザインに仕上がります。
このレイアウトは、ニュースやブログなど、コンテンツが豊富なウェブサイトに最適です。
10. 水平ストリップレイアウト
縦に長いホームページを、全幅のストリップに分割したレイアウトです。各ストリップがフルスクリーンの（またはフルスクリーンに近い）セクションとして機能することで、スクロールダウンするたびに違った構成が現れ、ユーザーに驚きと期待感をもたらします。
各ストリップのデザインが（特に前のセクションと）異なるよう、各ストリップにサイトの配色と異なる色合いを使用したり、あるストリップには画像を、他のストリップには文章を入れるなどパーツの配置を工夫しましょう。また、パララックススクロールなどのエフェクトをストリップに取り入れることで、サイトの背景に動きと奥行き感が加わります。
このレイアウトは、シングルページサイト、特に長いスクロールを伴うデザインの場合に特に有効です。
ライター： Wix Team
