知ってる？
ショピマって
ホームページ制作会社のニュース・ブログ
ホームページ制作に役立つことから、スタッフの素顔まで。
2021.03.04
「ホームページ制作を考えているけど、何から相談したら良いかわからない」と悩んでいませんか？ホームページのレイアウトの基本を知ることが糸口となるかもしれません。レイアウトの基本を知ることで、ホームページのどこに何を掲載するかといった相談をしやすくなります。また、レイアウトについて考えることが、ホームページ制作の目的や目標を見つめ直すきっかけにもなります。
この記事では、知っているとスムーズにホームページの相談・制作ができるレイアウトの基本をご紹介します。
目次
レイアウトとは、物の配置のことです。「部屋のレイアウトを考える」といったように、レイアウトは配置を決めることを指します。部屋のレイアウトを考えるときは、家具や家電などの配置を決めます。同じように、ホームページのレイアウトは文章・画像・タイトル・ボタンなどの配置を指します。ホームページのレイアウトを考えるときは、どこに文章を配置するか、画像と文章の間隔はどれくらいか、などホームページを構成する要素の配置を決めていきます。
レイアウトと似た言葉に、デザインがあります。レイアウトはデザインに含まれるものです。デザインとは、配色やフォント、どのような画像を使うかなど、すべての要素を含めて、美しさや機能性のあるものを作り出すことです。デザインのなかで、レイアウトは構成要素の配置を決めることにあたります。
ホームページの目的は企業や個人によってさまざまですが、どのような目的であってもホームページのレイアウトは重要です。レイアウトは、ホームページの見やすさや使いやすさに影響するためです。レイアウトによって、ホームページを訪れた人が受ける印象や行動が変わります。また、Googleなどの検索エンジンのランキングにも影響する場合があります。結果として、レイアウトはホームページへのアクセス数や購買率などに影響します。
ホームページのレイアウトは見やすさに影響します。ホームページを訪れる人にとって見やすいレイアウトは自然に感じられるため、あまり意識されませんが、見にくいレイアウトになると問題が生じます。見にくいレイアウトの問題は、良い文章や画像があってもそれらがホームページを訪れた人に評価されないことです。見にくいと、わかりやすいはずの文章もわかりにくいと感じ、きれいな画像も異様に感じてしまいます。見やすいレイアウトなら、伝えたいことを正確に伝えられます。自社のブランドイメージや商品の魅力などを正確に印象づけられます。
また、レイアウトにはトレンドがあります。「このホームページは新しい感じがする」や「このホームページはちょっと古そうだな」と思ったことがあるかもしれません。レイアウトにも流行り廃りがあります。たとえば、10年前に作られたレイアウトのホームページは古い印象を受ける可能性があります。レイアウトによって、新鮮に感じるかどうかの印象も変わってきます。
訪れた人に良い印象を持ってもらうことが目的のホームページもありますが、ECサイトなどでは商品やサービスを買ってもらうことが目的です。ECサイトで商品やサービスを買うときは、表示された商品を見て、ボタンをクリックしたり、必要な項目を入力したりすることで、購入に至ります。そのとき、商品の説明と画像の関係やボタンの配置などのレイアウトが直感的なら、自然に購入してもらえます。逆に、直感的なレイアウトでないと、「このホームページは使いにくい」と感じ、購入の妨げになってしまうことがあります。
ECサイトが見やすく、使いやすいレイアウトで作られていれば、訪れた人が購入に至る割合が高まりやすくなります。
ホームページのレイアウトはGoogleなどの検索エンジンで検索したときに検索結果として表示されるランキングに影響します。
Googleなどの検索エンジンは、検索するユーザーにとって欲しい情報がスムーズに得られるホームページをランキング上位に持っていきたいと考えられて作られています。ユーザーの欲しい情報がひと目でわかるレイアウトのホームページはGoogleなどの検索エンジンの評価も高くなるのです。
また、近年スマートフォンが普及していることから、Googleはスマートフォンに対応しているホームページを推奨しています。パソコンで見るときもスマートフォンで見るときも見やすいレイアウトでホームページを作ることで、検索エンジンの評価も高くなります。
ホームページ制作会社や自社の制作担当者とスムーズに相談するための基本を解説します。レイアウトに関する用語やレイアウトのパターンを知ることで、ホームページの制作について相談しやすくなります。
ホームページで用いられるパーツの名称を知っておくと、制作会社や自社の制作担当者とのコミュニケーションがスムーズになります。ホームページのパーツの位置と役割をご紹介します。
ヘッダーは、ページの一番上に表示される箇所を指します。大抵のホームページは、ヘッダーの内容はどのページでも共通です。
ヘッダーには目線が集まりやすいため、重要な情報を置きます。たとえば、以下のような情報を置きます。
ナビゲーションは、ヘッダーのすぐ下や、メインコンテンツの左または右に表示される箇所を指します。ヘッダーのすぐ下に表示されるナビゲーションはグローバルナビゲーションと呼ばれます。メインコンテンツの左右に表示されるナビゲーションはサブナビゲーションやサイドバーと呼ばれます。
ナビゲーションの役割は、ホームページを案内することです。書籍の目次のように、目的のページにたどり着けるように案内します。書籍の目次にはページ番号が書かれていますが、ホームページのナビゲーションにはリンクを貼ります。
メインコンテンツは、ページの中程に表示される箇所を指します。ページの本体であり、主役である文章や画像などが配置されます。
フッターは、ページの一番下に表示される箇所を指します。大抵のホームページでは、フッターの内容はどのページでも共通です。
ページをスクロールしていって最後に表示されるため、最後に目線が誘導される箇所です。そのため、お問い合わせなど、訪れた人に行動を促すページへのリンクや情報を載せることがあります。
また、ホームページ全体に関わってくるページへのリンクや情報を載せることもあります。たとえば、以下のような情報です。
ホームページのパーツを組み合わせてレイアウトができます。1からレイアウトを考えるということは少なく、レイアウトにはパターンがあります。各々のパターンとその特徴をご紹介します。
シングルは1つ、カラムは縦の列という意味です。シングルカラムレイアウトは、ヘッダー・ナビゲーション・メインコンテンツ・フッターを1列に並べたシンプルなレイアウトです。
パソコンと比べると画面サイズが小さいスマートフォンやタブレットでも見やすく表示できます。また、シンプルなレイアウトであるため、閲覧する人がメインコンテンツに集中しやすくなります。
マルチは複数、カラムは縦の列という意味です。マルチカラムレイアウトは、ページを2列以上に分割してパーツを配置するレイアウトです。メインコンテンツの左または右にナビゲーションを配置する2カラムレイアウトやメインコンテンツの左右にナビゲーションを配置する3カラムレイアウトなどがあります。
シンプルさより、情報の量を重視したレイアウトです。
フルスクリーン型レイアウトは、写真や動画などのメインコンテンツをブラウザの幅いっぱいに表示させるレイアウトです。余白がないシングルカラムレイアウトともいえます。
インパクトのあるホームページになります。一方で文章は読みにくくなりがちです。シングルカラムレイアウトと同じようにスマートフォンやタブレットにも対応しやすいレイアウトです。
グリッドとは縦横に線を引く格子のことです。グリッド型レイアウトは、ページを格子状に分割し、ブロックにコンテンツを配置するレイアウトです。
多くの情報や画像を見せたい場合に使われるレイアウトです。
パソコン、タブレット、スマートフォンなどはそれぞれ画面サイズが異なります。レスポンシブデザインとは、ホームページのデザインを画面サイズごとに調整することを指します。
レスポンシブデザインを実現するためには、画面サイズごとにデザインを調整するようにホームページを設定します。画面サイズごとに1からホームページを作る必要がありません。
たとえば、パソコンでは2カラムレイアウトで表示し、タブレットやスマートフォンなどではシングルカラムレイアウトで表示するといったことができます。
ホームページは紙媒体と違って、画面をスクロールしながら見ます。スクロールしてもヘッダーやナビゲーションなどの重要な情報を表示させたいケースがあります。そのような場合、ヘッダーやナビゲーションをスクロールしても動かないよう固定させられます。また、下へスクロールしているときはヘッダーを表示させず、上へスクロールしているときはヘッダーを表示させるというような設定もできます。
良いレイアウトは原則にしたがっています。ホームページの構成要素である文章・画像・タイトル・ボタンなどを配置するうえで役に立つ、レイアウトの4原則をご紹介します。
レイアウトにおける整列とは、複数の要素をそろえて並べることを指します。整列の目的として、整えて美しく見せることや、そろえてグループを作ることが挙げられます。整列されていないと、要素がバラバラで整わず、要素間の関係性がわかりにくくなります。整列させるには、補助線があるかのように要素を配置します。
レイアウトにおける近接とは、関係のあるもの同士を近づけて、関係のないもの同士を遠ざけることを指します。近接の目的として、グループを作ることが挙げられます。近接が意識されていないと、要素間の関係がわかりにくくなります。近接を効果的に使うポイントは、関係する要素の余白は小さく、関係しない要素の余白は大きくとることです。
レイアウトにおける反復とは、要素を繰り返すことを指します。反復の目的として、統一感を出すことが挙げられます。反復が意識されていないと、どの要素が同等でどの要素が同等でないかがわかりにくくなります。反復を効果的に使うポイントは、同じレベルのものは同じように繰り返すことです。
レイアウトにおける対比とは、複数の要素を並べて、差を明示することを指します。対比の目的として、複数の要素に強弱をつけることが挙げられます。対比が意識されていないと、どの要素が重要なのかわかりにくくなります。対比を効果的に使うポイントは、情報の優先度を明確にし、その優先度にしたがって目立たせることです。
ホームページのレイアウトについて相談する前に行っておくと話し合いがスムーズに進む準備の仕方をご紹介します。
ホームページを制作する目的を設定しましょう。ホームページの目的は、商品やサービスの認知度を上げることや売上を伸ばすことなどさまざまです。
目的はホームページ制作全般に関わってきますが、レイアウトを決めるときにも重要になります。たとえば、目的によって強調したい情報が変わり、それにしたがってレイアウトも変わってきます。
自社のイメージに近いホームページを集めましょう。ホームページを集めるときは、「なんとなくこのホームページが良い」と、直感的に思ったホームページをピックアップします。ピックアップしたレイアウトやデザインがなぜ良いのかは、言語化できなくても大丈夫です。制作会社や制作担当者と共有できれば十分です。
レイアウトに限らず、ホームページ制作を依頼する前に準備しておきたいことはこちらの記事をご参照ください。
ホームページのレイアウトの基本について解説しました。レイアウトの基本を押さえることで、ホームページについて相談する足がかりになります。また、レイアウトはホームページを訪れた人の印象や行動に影響する重要なデザインの要素です。
弊社では、レイアウトのご相談を含めたホームページ制作を1からサポートいたします。ホームページ制作についてご相談がございましたら、お気軽にお問い合わせください。
