個人ではホームページ制作、SEO対策、広告運用という3つに対応できるスキルを持ち、Web集客に悩む方に対して包括的になコンサルティングを行う。「CVが獲得できるサイトレイアウト設計が知りたい」この記事を読んでいるということは、上記のようなお悩みがあるのではないでしょうか?これから自社サイトを立ち上げる際のサイトレイアウトについて紹介しています。サイトレイアウトは、CVを獲得する上でも非常に重要です。サイトレイアウトの基本を理解した上で設計をしないとCVを獲得するのは難しくなるので、本記事では、レイアウトの基本と参考になるサイトを紹介しています。サイトの目的がまだ明確に決まっていない方は、下記記事を参考にしてサイト設計から始めましょう!関連記事:ホームページ作成のコツ【サイト設計をしてプロ並のHPを作ろう!】ホームページ開設方法と手順・正しい企業HPの作り方について知りたい方は以下の記事を参照してください。まとめサイトレイアウトの基本まず、サイトを作成する上で、サイトの内で使われる部分について理解しましょう。ヘッダヘッダーは通常、webサイトの上部(または上部のナビゲーションメニューのすぐ下)の位置に設置されています。多くの場合、ロゴまたはwebサイト名が含まれています。ナビゲーションバーナビゲーションバーには、訪問者がwebサイトをナビゲートするのに役立つリンクのリストが含まれています。コンテンツwebサイトのメインとなるコンテンツです。一般的なレイアウトは、次のいずれか(またはそれらを組み合わせたもの)になります。1列(モバイルブラウザでよく使用されます)2列(タブレットやラップトップによく使用されます)3列(デスクトップでのみ使用)フッターフッターはページの下部に配置されます。多くの場合、著作権や連絡先情報などの情報が含まれています。続いてサイトレイアウトの代表的な種類について紹介します。それぞれ向いているサイトやメリット・デメリットがあるので、自社に合ったものを選定しましょう。シングルカラムレイアウトシングルカラムは、縦一列で設計されたレイアウトです。ユーザーがサイトを訪問した際に、目線をメインコンテンツに持って行きやすいので、メインコンテンツの注目度が高まるレイアウトです。シングルカラムに向いているサイトLPキャンペーンサイトシングルカラムのメリットメインコンテンツに集中してもらえるスマートフォンでの表示の際に崩れにくいデメリット情報量が多いサイトには向かないサイトをくまなく見てもらいたい時には向かないマルチカラムレイアウトマルチカラムサイトは、サイトの全体の内容が分かるようにサイドバーなどを配置したレイアウトになります。マルチカラムが向いているサイト情報量が多いサイトECサイトポータルサイトマルチカラムのメリット多くの情報を見てもらえるユーザーの離脱率が軽減できるマルチカラムのデメリット情報量が多くメインコンテンツが見られにくいレスポンシブウェブデザインが困難フルスクリーン型フルスクリーンレイアウトは画面全体に画像や動画を表示させるレイアウトです。ダイナミックな訴求が可能なので、ユーザーにインパクトのあるサイトという印象付けをしたい場合に効果的です。フルスクリーンが向いているサイト企業サイト旅行系・飲食・ファッションなどフルスクリーンのメリット大きなインパクトを与えられるレスポンシブとして機能しやすいフルスクリーンのデメリットナビゲーションの中身が見えない制作のハードルも高めグリッド型グリッド型とは、コンテンツをグリッド(格子)のように並べることで、統一感のある整えられた印象のデザインを作るレイアウトです。狭いスペースに多くの情報を詰め込めるため、情報量が多いサイトなどに採用されています。続いては、紹介したサイトレイアウトの種類別に実際のHPで使われている例を紹介します。シングルカラムレイアウトスターバックス出典:スターバックススターバックスの公式HPは、シングルカラムレイアウトで設計されています。スターバックスのメインコンテンツは常に新商品が並びます。シングルカラムレイアウトのメリットである、メインコンテンツの集中を最大限に生かしたサイトレイアウトになっています。トリバゴ出典:トリバゴ旅行予約サイトのトリバゴの公式HPは、シングルカラムレイアウトの中でも非常にシンプルな設計をしています。無駄なデザインは、一切省き「ユーザーに検索させる」といったCVのみに特化したサイトレイアウトといえます。出典:ファイブミニ大塚製薬のファイブミニの公式サイトでは、左側に固定のメニューを設置したマルチカラムレイアウトで設計されています。製品情報やヒストリーやユーザーの声など情報量が多いながらも、コンテンツがコンパクトにまとめられており、マルチカラムレイアウトのデメリットをカバーしたレイアウトといえます。AIアナリスト出典:AIアナリストAIアナリストのHPでは、メニューバーは上部に設置し、CVである申し込みフォームを右側に固定設置した、マルチカラムレイアウトです。下部にスクロールすると、サービス特徴の記載があり、ユーザーの目線から申し込みフォームが外れないレイアウト設計となっています。フルスクリーン型ガルダ湖ホテル出典:ガルダ湖ホテルガルダ湖ホテルの公式HPでは、背景画像にホテル周辺の動画流れるフルスクリーン型を採用しています。常に絶景の映像が背景で流れているため、ユーザーに与えるインパクトが非常に多く、イメージも湧きやすいので「予約獲得」といったCVに繋がりやすいサイトレイアウトと言えます。Vailは、アメリカのコロラドにあるレストランのwebサイトです。お店のメニューの料理がフルスクリーンのスライドショーで入れ替わっていきます。背景を動画ではなく、スライドショーにすることでサイトも重くならないといったメリットもあります。グリッド型publik出典:publikpublikは、グリッド型を採用したECサイトです。各商品をグリッドで分けることによってユーザーは直感的に商品を選択することが可能です。上部のメニューでカテゴリーを選択し、メインコンテンツで商品を選ぶという、最もスタンダードなグリッド型のレイアウトといえます。JonesのHPはグリット型でも、トリッキーなデザインになっています。各グリットをクリックすると反転し、色見やレイアウトが変わる設計になっており、ユーザーを飽きさせないグリット型のレイアウトといえます。サイトレイアウトの参考になるギャラリーサイト続いてサイトレイアウトの参考になるギャラリーサイトについて紹介します。Clipは、日本国内のwebサイトが多いギャラリーサイトです。更新頻度も高いため、日本国内のwebサイトから勉強したい人には、ぴったりのサイトです。3000は、日本国内、海外のサイトが集められているギャラリーサイトです。「カラー」「カテゴリ」「タグ」からwebサイトを探すことが可能です。他のギャラリーサイトでは、中々見ることができないwebサイトを多く取り扱っています。v3は、PCとスマホに表示されるデザインを比較しながらサイトレイアウトを探せるギャラリーサイトになっています。レスポンシブデザイン重視の方には、ピッタリのギャラリーサイトになります。siteInspire出典:siteInspiresiteInspireは、ロンドンのデジタルスタジオが運営する、海外のサイトが集められたギャラリーサイトです。優れた最先端のデザインが多いのが特徴で、「スタイル」「タイプ」「カテゴリー」と詳細な検索をすることも可能です。AWWWARDS出典:AWWWARDSAWWWARDSは、世界中の開発者やデザイナーを応援する海外のギャラリーサイトです。AWWWARDSはユーザーの投票によって掲載されるサイトが決定するため、非常にデザイン性が高いサイトが多いのが特徴です。サイトレイアウトを工夫してCVを獲得するコツサイトレイアウトを工夫して、CVを獲得するための3つのコツを紹介します。サイトレイアウトには、CVに繋がりやすい3つのデザインの法則があります。これらの法則を取り入れて、レイアウトを考えてみましょう。グーテンバーグの法則グーテンバーグの法則とは、現在スタンダードになっている新聞のレイアウトデザインの基礎を生み出した、エドムンド・C・アーノルドのデザインをweb上に落とし込んだものです。いう順番で視線が移動し、最終的に右下に落ち着くというものです。左上にはキャッチコピーなど掴みを掲載し、右下にはアクションボタンを設置することでCV率が上がるとうことです。Fパターンの法則Fパターンの法則とは、ユーザーがwebサイトを訪れる時の、目線の動きのことを指します。ユーザーがwebページのコンテンツを読む際、平均で全文章量の28%しか読まれていないと言われており、これは、ユーザーの大半がwebページの全体を流し読みをしているからと言われています。このときのユーザーの目線が「F型」となるため、サイトレイアウトを考える際は、小見出しのデザインをユーザーの目が止まるようなデザインにする、各見出しの文章の冒頭をインパクトのあるものにすると有効と言われています。0.2秒ルールwebサイトを見たユーザーは、まず2.6秒で全体を見て、その後で個々のパーツが魅力的かどうかを、0.2秒で判断しているという研究結果があります。ユーザーが目を止めやすいと言われている、サイト内のパーツは下記の通りです。文章ユーザーを引きとめるには、これらの要素に0.2秒で判断ができるデザインの工夫する必要があるということです。実際にサイト作成に取り掛かる際は、テンプレートサイトを利用すると便利です。下記記事を参考にして、自社に合ったHPテンプレートを探してみましょう!関連記事:ホームページテンプレートサイト11選【HPテンプレートの全てが分かります】まとめサイトレイアウトについて紹介しました。自社でサイト作成をおこなう場合は、自社の目的を明確にし、目的にあったサイトレイアウトを選択するようにしましょう。ネット上には、参考となる多くのギャラリーサイトもあるのでそちらも参考にしましょう。個人ではホームページ制作、SEO対策、広告運用という3つに対応できるスキルを持ち、Web集客に悩む方に対して包括的になコンサルティングを行う。