サイトレイアウトの基本【CVが増加するレイアウトとは】

• HP制作

この記事を読んでいるということは、上記のようなお悩みがあるのではないでしょうか？

これから自社サイトを立ち上げる際のサイトレイアウトについて紹介しています。

サイトレイアウトは、CVを獲得する上でも非常に重要です。

しかし、サイトレイアウトの基本を理解した上で設計をしないとCVを獲得するのは難しくなるので、本記事では、レイアウトの基本と参考になるサイトを紹介しています。

是非、最後までご覧下さい。

サイトの目的がまだ明確に決まっていない方は、下記記事を参考にしてサイト設計から始めましょう！

関連記事:ホームページ作成のコツ【サイト設計をしてプロ並のHPを作ろう！】

ホームページ開設方法と手順・正しい企業HPの作り方について知りたい方は以下の記事を参照してください。

参考記事：ホームページ開設方法と手順を公開【正しい企業HPの作り方とは】

サイトレイアウトの基本

まず、サイトを作成する上で、サイトの内で使われる部分について理解しましょう。

ヘッダ

ヘッダーは通常、webサイトの上部（または上部のナビゲーションメニューのすぐ下）の位置に設置されています。

多くの場合、ロゴまたはwebサイト名が含まれています。

ナビゲーションバー

ナビゲーションバーには、訪問者がwebサイトをナビゲートするのに役立つリンクのリストが含まれています。

コンテンツ

webサイトのメインとなるコンテンツです。

最も一般的なレイアウトは、次のいずれか（またはそれらを組み合わせたもの）になります。

• 1列（モバイルブラウザでよく使用されます）
• 2列（タブレットやラップトップによく使用されます）
• 3列（デスクトップでのみ使用）

フッター

フッターはページの下部に配置されます。

多くの場合、著作権や連絡先情報などの情報が含まれています。

webサイトレイアウトの種類

続いてサイトレイアウトの代表的な種類について紹介します。

それぞれ向いているサイトやメリット・デメリットがあるので、自社に合ったものを選定しましょう。

シングルカラムレイアウト

シングルカラムは、縦一列で設計されたレイアウトです。

ユーザーがサイトを訪問した際に、目線をメインコンテンツに持って行きやすいので、メインコンテンツの注目度が高まるレイアウトです。

シングルカラムに向いているサイト

• LP
• キャンペーンサイト

シングルカラムのメリット

• メインコンテンツに集中してもらえる
• スマートフォンでの表示の際に崩れにくい

デメリット

• 情報量が多いサイトには向かない
• サイトをくまなく見てもらいたい時には向かない

マルチカラムレイアウト

マルチカラムサイトは、サイトの全体の内容が分かるようにサイドバーなどを配置したレイアウトになります。

マルチカラムが向いているサイト

• 情報量が多いサイト
• ECサイト
• ポータルサイト

マルチカラムのメリット

• 多くの情報を見てもらえる
• ユーザーの離脱率が軽減できる

マルチカラムのデメリット

• 情報量が多くメインコンテンツが見られにくい
• レスポンシブウェブデザインが困難

フルスクリーン型

フルスクリーンレイアウトは画面全体に画像や動画を表示させるレイアウトです。

ダイナミックな訴求が可能なので、ユーザーにインパクトのあるサイトという印象付けをしたい場合に効果的です。

フルスクリーンが向いているサイト

• 企業サイト
• 旅行系・飲食・ファッションなど

フルスクリーンのメリット

• 大きなインパクトを与えられる
• レスポンシブとして機能しやすい

フルスクリーンのデメリット

• ナビゲーションの中身が見えない
• 制作のハードルも高め

グリッド型

グリッド型とは、コンテンツをグリッド(格子)のように並べることで、統一感のある整えられた印象のデザインを作るレイアウトです。

狭いスペースに多くの情報を詰め込めるため、情報量が多いサイトなどに採用されています。

グリッド型が向いているサイト

• トピックやニュースサイト
• 情報量が多く、更新頻度が高いサイト

グリッド型のメリット

• 多くの情報を整理して見せることが可能
• レスポンシブデザインとの相性がいい

グリッド型のデメリット

• どこから閲覧すれば良いか迷う可能性がある
• コンテンツごとの差がつけにくい

実際のサイトレイアウト参考例

続いては、紹介したサイトレイアウトの種類別に実際のHPで使われている例を紹介します。

シングルカラムレイアウト

スターバックス

出典:スターバックス

スターバックスの公式HPは、シングルカラムレイアウトで設計されています。

スターバックスのメインコンテンツは常に新商品が並びます。

シングルカラムレイアウトのメリットである、メインコンテンツの集中を最大限に生かしたサイトレイアウトになっています。

トリバゴ

出典:トリバゴ

旅行予約サイトのトリバゴの公式HPは、シングルカラムレイアウトの中でも非常にシンプルな設計をしています。

無駄なデザインは、一切省き「ユーザーに検索させる」といったCVのみに特化したサイトレイアウトといえます。

マルチカラムレイアウト

ファイブミニ/大塚製薬

出典:ファイブミニ

大塚製薬のファイブミニの公式サイトでは、左側に固定のメニューを設置したマルチカラムレイアウトで設計されています。

製品情報やヒストリーやユーザーの声など情報量が多いながらも、コンテンツがコンパクトにまとめられており、マルチカラムレイアウトのデメリットをカバーしたレイアウトといえます。

AIアナリスト

出典:AIアナリスト

AIアナリストのHPでは、メニューバーは上部に設置し、CVである申し込みフォームを右側に固定設置した、マルチカラムレイアウトです。

下部にスクロールすると、サービス特徴の記載があり、ユーザーの目線から申し込みフォームが外れないレイアウト設計となっています。

フルスクリーン型

ガルダ湖ホテル

出典:ガルダ湖ホテル

ガルダ湖ホテルの公式HPでは、背景画像にホテル周辺の動画流れるフルスクリーン型を採用しています。

常に絶景の映像が背景で流れているため、ユーザーに与えるインパクトが非常に多く、イメージも湧きやすいので「予約獲得」といったCVに繋がりやすいサイトレイアウトと言えます。

Mountain Standard Vail

出典:Mountain Standard Vail

Mountain Standard Vailは、アメリカのコロラドにあるレストランのwebサイトです。

次々に、お店のメニューの料理がフルスクリーンのスライドショーで入れ替わっていきます。

背景を動画ではなく、スライドショーにすることでサイトも重くならないといったメリットもあります。

グリッド型

publik

出典:publik

publikは、グリッド型を採用したECサイトです。

各商品をグリッドで分けることによってユーザーは直感的に商品を選択することが可能です。

上部のメニューでカテゴリーを選択し、メインコンテンツで商品を選ぶという、最もスタンダードなグリッド型のレイアウトといえます。

Nick Jones

出典:Nick Jones

Nick JonesのHPはグリット型でも、トリッキーなデザインになっています。

各グリットをクリックすると反転し、色見やレイアウトが変わる設計になっており、ユーザーを飽きさせないグリット型のレイアウトといえます。

サイトレイアウトの参考になるギャラリーサイト

続いてサイトレイアウトの参考になるギャラリーサイトについて紹介します。

Web Design Clip

出典:Web Design Clip

Web Design Clipは、日本国内のwebサイトが多いギャラリーサイトです。

更新頻度も高いため、日本国内のwebサイトから勉強したい人には、ぴったりのサイトです。

I/O 3000

出典:I/O 3000

I/O 3000は、日本国内、海外のサイトが集められているギャラリーサイトです。

「カラー」「カテゴリ」「タグ」からwebサイトを探すことが可能です。

他のギャラリーサイトでは、中々見ることができないwebサイトを多く取り扱っています。

bookma! v3

出典:bookma! v3

bookma! v3は、PCとスマホに表示されるデザインを比較しながらサイトレイアウトを探せるギャラリーサイトになっています。

レスポンシブデザイン重視の方には、ピッタリのギャラリーサイトになります。

siteInspire

出典:siteInspire

siteInspireは、ロンドンのデジタルスタジオが運営する、海外のサイトが集められたギャラリーサイトです。

優れた最先端のデザインが多いのが特徴で、「スタイル」「タイプ」「カテゴリー」と詳細な検索をすることも可能です。

AWWWARDS

出典:AWWWARDS

AWWWARDSは、世界中の開発者やデザイナーを応援する海外のギャラリーサイトです。

AWWWARDSはユーザーの投票によって掲載されるサイトが決定するため、非常にデザイン性が高いサイトが多いのが特徴です。

サイトレイアウトを工夫してCVを獲得するコツ

サイトレイアウトを工夫して、CVを獲得するための3つのコツを紹介します。

サイトレイアウトには、CVに繋がりやすい3つのデザインの法則があります。

これらの法則を取り入れて、レイアウトを考えてみましょう。

グーテンバーグの法則

グーテンバーグの法則とは、現在スタンダードになっている新聞のレイアウトデザインの基礎を生み出した、エドムンド・C・アーノルドのデザインをweb上に落とし込んだものです。

ユーザーは、webページを開いた時に、左上→右上→左下という順番で視線が移動し、最終的に右下に落ち着くというものです。

例えば、左上にはキャッチコピーなど掴みを掲載し、右下にはアクションボタンを設置することでCV率が上がるとうことです。

Fパターンの法則

Fパターンの法則とは、ユーザーがwebサイトを訪れる時の、目線の動きのことを指します。

ユーザーがwebページのコンテンツを読む際、平均で全文章量の28％しか読まれていないと言われており、これは、ユーザーの大半がwebページの全体を流し読みをしているからと言われています。

このときのユーザーの目線が「F型」となるため、サイトレイアウトを考える際は、小見出しのデザインをユーザーの目が止まるようなデザインにする、各見出しの文章の冒頭をインパクトのあるものにすると有効と言われています。

0.2秒ルール

webサイトを見たユーザーは、まず2.6秒で全体を見て、その後で個々のパーツが魅力的かどうかを、0.2秒で判断しているという研究結果があります。

ユーザーが目を止めやすいと言われている、サイト内のパーツは下記の通りです。

• Webサイトのロゴ
• メインナビゲーションメニュー
• 検索ボックス
• SNS（へのリンク
• コンテンツ画像
• 文章

ユーザーを引きとめるには、これらの要素に0.2秒で判断ができるデザインの工夫する必要があるということです。

実際にサイト作成に取り掛かる際は、テンプレートサイトを利用すると便利です。

下記記事を参考にして、自社に合ったHPテンプレートを探してみましょう！

関連記事:ホームページテンプレートサイト11選【HPテンプレートの全てが分かります】

まとめ

サイトレイアウトについて紹介しました。

自社でサイト作成をおこなう場合は、自社の目的を明確にし、目的にあったサイトレイアウトを選択するようにしましょう。

ネット上には、参考となる多くのギャラリーサイトもあるのでそちらも参考にしましょう。

自社だけでは、難しい場合は是非弊社までご相談下さい！

アドトラへの無料相談はこちら！

TOPへ戻る