【初心者向け】目的別にわかるホームページのレイアウトの基本|現役デザイナーが解説】【2024年最新版】ホームページにもデザインの「流行」というものがあります。パソコンからスマホへといったデバイスの変化、通信回線の改善など、その時々により最適なデザインは移り変わっていきます。大事なのは「ユーザーにわかりやすい情報をしっかり、届けられるか」という点。トレンドに流されず、レイアウトの基礎を抑えて丁寧にデザインすることが重要です。サイトリニューアルしたいが、どんなデザインにすればいいの?見やすいホームページデザインってどんなもの?サイトのレイアウトってどうやって決めるの?という悩みをお持ちの初心者Web担当者向けに、現役デザイナーがホームページのレイアウトの基本を丁寧に解説します!本記事だけで、ホームページのデザインやレイアウトの基礎をおさえることができますので、ぜひご覧ください。ホームページのデザインをプロに任せたい方へレイアウトの基礎知識デザインの4原則についてレイアウトについて知る前に、まずはデザインにおける基本中の基本であるデザインの4原則について知っておくと良いでしょう。「良いデザイン」には原則があり、それは以下の4つの項目で説明できます。「近接」とは関連する項目をグループ化するという意味です。名刺では、その人の連絡先となる住所や電話番号・メールアドレスなどがまとめられ、周りには空白が作られます。それぞれの項目が近づくことによって、「連絡先」のグループとして情報がまとめられ、視線がそこに止まりやすくなります。<名刺の例>レイアウトを考える際は、なるべく表示する情報を組織化し、独立した個別の要素を作らないようにすると、整理されてみやすい表現をすることができます。画面上に多くの情報が表示されているとき、きれいに整列せずにそれぞれの要素がバラバラに並んでいると、どこからそのページを読めばいいのか混乱をしてしまいます。近接で要素と要素をグループ化できたら、それを綺麗に整列してあげましょう。<バラバラの要素→整列>中央揃え・左揃え・右揃え・均等揃えなどが存在します。同じページ内では2種類以上の文字揃えを用いるのは、目線が混乱するため避けましょう。反復とは「ルール」「一貫性」とも言いかえられます。見出しの見た目がそれぞれ違うと、それが共通したレベル感をもった見出しなのか、違うレベル感の見出しなのか判別が付きません。同じレベル感の見出しは一貫性を持たせて同じ文字サイズ・フォント・色・装飾を使うべきです。<見出しを反復に>コントラストの法則コントラストは特定の要素に強さや重みを付けて際立たせたり、逆に目立たぬように抑えたりすることで、読者の目をその箇所に引き寄せる方法です。<コントラストをつける>例えば見出しのフォントを変えてみただけで強弱が生み出され、目を引くデザインになっています。おもしろみをもたせることで、より興味が惹かれる効果を演出するのがコントラストです。人間の視線の動き(Z型・F型・N型)人間が文章を読む時、大きく2つのパターンで動きを説明することができます。この視線の動きを知ることで、より読みやすいレイアウトを意識することができます。Z型とは?横書きで多くの要素が配置されたものを見ると、人は自然に左上から右下へ視線を移動させます。斜めに読むのではなく、左上から右上へ、そして真ん中を斜めに読んで、左下から右下に移動するという感じです。図に表すとこうなります。<Z型>このように「Z」の文字に似た線を描く形で視線を移動するため、このようなレイアウトにおける視線の誘導を「Z型」と呼んでいます。N型とは?Z型は横書きの場合でした。縦書きになると、人は右上から左下に視線を移動させます。右上から右下、真ん中を斜めに呼んで、左上から左下に移動するという感じです。図に表すとこうなります。<N型>このように「N」の文字に似た線を描く形で視線を移動するため、このようなレイアウトにおける視線の誘導を「N型」と呼んでいます。F型とは?F型はパソコンやスマートフォンで情報を閲覧する際に、最も用いられる視線誘導の型です。みなさんはこの文章を読んでいるときも、自然とF型のような視線の移動をしているかと思います。タイトルを見る(左から右に)、そして次の行から本文を読み始める(一段下がって、左から右に)という動作を繰り返すため、Fの形に視線を移動することになります。コントラスト)や視線誘導(Z型・N型・F型)はホームページだけではなく、名刺・ポスター・バナーなど、あらゆる場面で役に立つ知識です。こちらの書籍は非デザイナー向けにこういったデザインに関する基礎知識が学べる内容になっています。ノンデザイナーズ・デザインブック>【無料】ホームページのレイアウトについて相談するホームページに用いられるパーツの名称ホームページのレイアウトを考える上で、ホームページ内に用いられるパーツの種類と名称を知っておくのが重要です。誤った名称でデザイナーやエンジニアに伝えてしまうと、コミュニケーションのすれ違いが発生してしまうので、しっかりと把握しておきましょう。ヘッダーどのページにも共通で設置し、サイトのロゴやお問い合わせ・資料請求のボタンなど重要なアクションを促すものが配置されることが多いパーツです。スクロールをしても常に表示しておく「固定ヘッダー」のようなテクニックもあります。ナビゲーション日本語でいうと「目次」ですが、人によって「メニュー」と呼んだりすることもあります。開発用語的には「ナビゲーション」のほうが一般的になります。大きな目次を「グローバルナビゲーション」、小さな目次を「サブナビゲーション」と呼称することもあります。コンテンツページ内のメインとなる要素、例えばニュースの記事やブログの文章が置かれる部分です。基本的にホームページへの訪問者はこの内容を目当てで訪れますので、コンテンツが見えやすいようにヘッダーやナビゲーションを一時的に隠したりすることもあります。サイドバーコンテンツの隣に、カテゴリ一覧や関連の記事一覧、広告バナーなどを設置したりする際にとるエリアをサイドバーと呼んでいます。フッターページの一番下にあるコピーライトなどを記載する箇所をフッターと呼びます。フッター内にナビゲーションを設置することもあり、それをフッターナビゲーションと呼びます。ここに企業情報や運営元などをしっかり書くことで、コンテンツの信頼性をアピールするということもあります。ホームページのヘッダー・ナビゲーション・コンテンツ・サイドバー・フッターなどの基本のパーツの役割については、制作開始前にデザイナー・エンジニアとよく確認しておくと良いでしょう。【無料】ホームページのレイアウトについて相談するホームページに用いられるレイアウトの種類いよいよ本題の「レイアウト」の話です。ここからはホームページでよく用いられるレイアウトについて紹介します。カラムについてホームページのレイアウトにおいて、情報を整理して見やすくするために、要素と要素の「段組み」を行うことがあります。雑誌などを見ると写真と文章が見やすい位置にそれぞれ配置されており、このようにホームページでも最適な位置に配置をする必要があります。この段組みのことを、ホームページ制作の現場では「カラム」と呼び、カラムがいくつ組み合わさっているかによって、「シングルカラムレイアウト」「マルチカラムレイアウト」というような呼び方をつけています。シングルカラムレイアウト<シングルカラム>すっきりと縦長で1列に段組みされたレイアウトを「シングルカラムレイアウト」と呼びます。近年はスマートフォンでの訪問者が増え、余計な情報は表示しない縦長のシングルカラムレイアウトのサイトが増えてきました。集客したユーザー向けに商品の説明などをする「ランディングページ」などは、コンテンツを読むのに集中させることができるシングルカラムレイアウトが適しています。マルチカラムレイアウトマルチカラムレイアウトはコンテンツの脇にサイドバーを設置するというような、2~3列に分かれたレイアウトです。情報量が多い、もしくはポータルサイト・検索サイト・ニュースメディアのような回遊性をユーザーに提供するようなサービスは、マルチカラムレイアウトで作られることが多いでしょう。2カラムレイアウトコンテンツの左にサイドバー、もしくは右にサイドバーを設置したレイアウトです。<2カラムレイアウト>3カラムレイアウトコンテンツの左右にサイドバーを設置したレイアウトです。<3カラムレイアウト>レスポンシブウェブデザインにおけるシングルカラム・マルチカラムレイアウトの切り替えマルチカラムレイアウトはスマートフォンで表現がしづらいため、レスポンシブウェブデザインで実装をする際は、PCはマルチカラム・スマホはシングルカラムというように表示を分岐させることが多いです。この分岐はCSSのメディアクエリという手法で実現ができますので、比較的容易に実現できます。レイアウト自体もフレックスボックスプロパティというものを使うと、複数の画面サイズに対応してカラム数を変えるような実装をすることができます。カード・タイル型のレイアウト引用:PinterestPinterestのような写真をメインに取り扱うようなサイトの場合、上記であげたシングルカラム・マルチカラムとも違う、カードやタイルをならべたようなレイアウトを採用していることがあります。シングルカラム・マルチカラムよりもテクニックが求められるレイアウトですが、写真やイラストなどの素材がきちんと用意できて、それを際立たせたいという場合は非常に有効な手法になります。飲食店や観光地の紹介など、文章では伝えられない雰囲気を写真で伝えたいような場合はおすすめです。逆にニュースメディアやオウンドメディアなど、文章が主なコンテンツになるようなサイトの場合、導入は難しいでしょう。ブロークングリッドレイアウト規則性のある境界線をあえて無視したレイアウトをする手法のことを「ブロークングリッドレイアウト」または「ノングリッドレイアウト」と呼びます。自由で開放的・オリジナリティなどを出したいような場合はこのような手法が用いられます。大きな写真・イラストなどを使って、まるで紙の雑誌のようなレイアウトを組むことで、表現の幅を広げてインパクトをもたせます。非常にオリジナリティがあるサイトが作れるレイアウトですが、運用上コンテンツの追加や差し替えが多いようなサイトは、規定の画像サイズや文字数を満たそうとして保守のコストが大きく膨らんでしまう可能性があります。ブランドの紹介サイト(2019年春...などのワンシーズン分だけ)や、期間限定のキャンペーンサイトなど、一定期間公開したあとは更新せずに終了するようなホームページなどで利用するのに有効です。【無料】ホームページのレイアウトについて相談するスクロール時の動き方ホームページは、雑誌やチラシのような印刷物と違って、ユーザーのアクションに合わせてレイアウトを変更することができます。スクロールしたときにどのようにヘッダーやフッターの配置を移動させるようなテクニックが多く用いられます。スクロール時に特殊な動きを加えたレイアウトについて紹介します。ヘッダーを固定したレイアウトヘッダーを固定したレイアウトスクロールをしたときに、ヘッダーがそのままの位置で表示されるレイアウトです。することで、サイトのロゴやナビゲーションが常に表示された状態となり、スクロール後もナビゲーションからすぐに他のページに回遊するようなインターフェースが提供できます。この動きはCSSのみで実装ができるので、比較的実装の難易度は低いでしょう。このようにスクロールしたあとにヘッダーが表示され、そのまま固定で表示されるというパターンもあります。これには実装難易度が少しだけ上がります。サイドバーを固定したレイアウト<サイドバー固定>スクロール後に、サイドバーが同じ位置に固定された状態のレイアウトです。これもCSSだけではなくJavaScriptを使って実装をする必要があり、少しだけ実装難易度が上がります。広告バナーを固定して表示することがありますが、広告の中には不自然に固定された表示方法はユーザーの体験を阻害するというので、掲載対象外になってしまうことがありますので注意しましょう。問い合わせボタンを固定したレイアウトスマートフォンの画面サイズが大きくなるにつれて、大事なボタンは画面の右下(右利きの人の親指が届く範囲)に設置することが多くなってきました。ツイッターの投稿ボタンは右下にあります。出典:https://twitter.com/右下にチャット型の問い合わせを表示するようなものもあります。出典:https://faq.uniqlo.com/ホームページのデザインは要素を重ねて立体的に見せることができるため、このように大事な要素を目に止まりやすい場所・触りやすい場所に固定して表示することができます。【無料】ホームページのレイアウトについて相談する実際のレイアウトの参考事例シングルカラムレイアウトPayme出典:https://payme.tokyo/スクロールをしたときに、アニメーションで遊び要素をもたらしています。ナビゲーションからはページ遷移ではなく、ページ内スクロールで該当の内容が見れるようになっているのも特徴です。NP掛け払い出典:https://np-kakebarai.com/スクロール時のアニメーションの表現のほか、上スクロールしたときにだけ隠れていたヘッダーが表示されるインタラクション要素があります。画像とテキストをはっきりとわけ、コントラストの強い見出しを置くことで視線を誘導しています。Clova公式サイト出典:https://clova.line.me/左右に余白をとって、コンテンツを真ん中(最大横幅1180px)に寄せています。画面幅を縮めると、ほとんどの要素が横幅が縮まる・サイズが小さくなるようになっており、ナビゲーションは折りたたまれてハンバーガーメニューにしまわれます。更新が多そうなサイトなので、複雑なレイアウトにはせずに更新がしやすいデザインになっています。出典:https://tabelog.com/検索結果一覧は左側に検索条件・右側に店舗一覧が表示される2カラムレイアウト、店舗詳細は左側にコンテンツ・右側に予約カレンダーが表示される2カラムレイアウトになっています。店舗詳細の予約カレンダーはスクロールをしても固定で表示されるようになっており、下の方にスクロールしてコンテンツを読んでいってもすぐに予約ができるような工夫がされています。出典:https://zozo.jp/トップページは左側にナビゲーション・中央にコンテンツ・右側にバナーやコンテンツ一覧の3カラムレイアウトになっています。商品ページは左側に商品写真・右側に商品情報と購入ボタンが設置されています。商品ページについてはECサイトの鉄板ともいえるレイアウトで、大体のECサイトがこのようなレイアウトを導入しています。出典:https://epark.jp/予約ができる施設は左側にコンテンツ・右側に予約カレンダーが表示されていますが、スクロールすると下から予約ボタンが表示されるのが特徴です。恐竜ワールド出典:https://mukawaryu.com/恐竜の化石の写真が一覧表示されており、マウスカーソルを乗せるとホバーアニメーションが起きます。クリックするとカードが拡大され画面遷移のトランジションが発生します。Webサイトというよりはアプリケーションのような動きになっています。UP!zine出典:https://big-up.style/zine/写真素材が多く用意できる場合はこのようなブログ型のニュースメディアでもカード・タイル型のレイアウトを用いることができるでしょう。【無料】ホームページのレイアウトについて相談するレイアウト別にサイトを探せる参考サイト良いレイアウトを知るには、良いレイアウトのサイトを見るのが一番です。有志の方が良質なデザインのホームページをまとめた「ギャラリーサイト」がありますので、ぜひ参考にしてみてください。MUUUUU.ORG出典:https://muuuuu.org/縦長のサイトに特化したWebデザインのギャラリーサイトです。カテゴリーの中のデザインから、レイアウトの特徴を選択して絞り込むことができます。SANKOU!出典:https://sankoudesign.com/更新頻度の高いWebデザインのギャラリーサイトです。カテゴリーから1カラム・2カラムなどを選択して絞り込むことができます。3000出典:https://io3000.com/国内だけでなく海外のサイトも多く取り扱われているWebデザインのギャラリーサイトです。page」などを選択して絞り込むことができます。【無料】ホームページのレイアウトについて相談するホームページレイアウトの比較ここまで紹介したホームページのレイアウトを比較してみましょう。コラム:デザイントレンドに敏感になりすぎる必要はない2010年代後半、少しだけブロークングリッドレイアウトが流行りました。毎年のように「○○デザインが流行」「20XX年は○○レイアウトが来る」といった感じで、ファッションなどのようにデザインのトレンドというものがあります。トレンドも重要ではありますが、大事なのはユーザーにとって見やすいサイトであることであり伝えたいメッセージが伝わることです。日本語は英語と違い、文字だけでデザインを見せるのがなかなか難しい言語でもあります。流行のデザインはキャンペーンサイトのような一時的に公開されるようなサイト制作に取り入れ、ずっと使い続けるWebサービスやコーポレートサイトでは、更新のしやすさやユーザーの使いやすさを重視したデザインを心がけましょう。そんな悩みに応えるべく、Web幹事で料金シミュレーターを用意しました。サイトの用途(採用サイトなど)ページ数デザイン機能ホームページの制作に関する8問に選択するだけで、たった60秒で制作料金が分かります。料金の算出は無料なので、ぜひご利用ください。【無料】ホームページ料金シミュレーターを使うホームページのレイアウトまとめレイアウトはホームページのデザインの中でも非常に重要な役割を果たします。レイアウト次第で、ページの読了率や回遊率などは大きく変わります。いろいろなサイトを参考に、作っていくホームページにぴったりなデザインを考えていきましょう。ホームページのデザインをプロに任せたい方へ制作会社をなかなか探す時間がない・制作会社の違いが分からないという方は、ぜひWeb幹事にご相談ください。Web幹事は、あなたに最適な制作会社を「人力で」マッチングするサービス。2015年にWeb制作会社を設立し、3年間で上場企業を含む50社以上制作に携わらせていただきました。ホームページ制作のオンライン相談窓口「Web幹事」は、35,000件を超える豊富な相談実績と幅広い知識で、お客様のあらゆるニーズにお応えします。初心者の方でも安心してご相談ください!あなたの目的や予算に合わせて最適な会社をご紹介させていただきます。ご相談はもちろん無料。紹介された会社に必ず発注する必要はありません。ホームページのレイアウトとは何ですか?ホームページにおけるレイアウトとは、写真・テキストを適切な位置に配置し、視覚的に分かりやすくすることです。レイアウトによってユーザーが情報を受け取りやすくなったり、ページを操作しやすくなったりするため、ホームページの効果を最大限に引き出すための重要な作業といえます。ホームページのレイアウトで注意すべきポイントはありますか?ユーザーにわかりやすい構成にすることが大切です。モバイルフレンドリーなデザインやスクロール時の動きなども考慮しましょう。ホームページ制作の相場ガイドブックを無料でプレゼントします!!ホームページの相場に関するガイドブックを無料でプレゼントいたします!・コーポレートサイト・ランディングページ・ECサイト・オウンドメディア・採用サイトの相場の情報を徹底解説。相場を理解するためのポイントやホームページを業者に依頼する前の準備方法も合わせて解説。ホームページを依頼したいが、相場が分からず心配という方はぜひダウンロードしてください。gloops/Goodpatch/Toretaを経て独立。子育てしながら、無料で学べるデザイン学習サイト「chot.design」やってます。N高Webデザイン講師。