コラム

 公開日: 2016-02-23  最終更新日: 2016-05-13

ホームページレイアウトの基本を知る!

ホームページのレイアウトは、その目的や用途に応じて、それぞれにあったレイアウトというものが存在します。例えば、商品やサービスの認知度向上やイメージアップが目的であれば、ビジュアルメインのレイアウトに、ECサイトではビジュアル以上に商品の探しやすさ・買いやすさを追求したレイアウトに、問合せ・資料請求を増やすことが目的の場合、その一点に特化したシンプルなレイアウトに、というふうに目的や用途に応じてレイアウトも変わってきます。

実は、目的に応じてよく利用されるレイアウトのパターンが存在します。まずは、目的が同じ有名なホームページを参考に、そのレイアウトが採用されている意味を理解することが重要です。レイアウトでオリジナルを追求しすぎ奇をてらったレイアウトにしてしまうと、ユーザビリティが低い、使い勝手の悪いホームページになってしまいますので、注意が必要です。特別な事情がない限り、目的に応じた最適なレイアウトを採用しつつ、商品やサービスに合ったデザイン面で差別化を計るなど、独自性を追求したホームページを作成していきます。

レイアウトを決める前に知っておきたい4つの構成要素

例外はありますが、ホームページのレイアウトは、基本4つの要素から構成されています。「ヘッダー」「コンテンツ」「サイドバー」「フッター」の4つです。

「ヘッダー」とは、ホームページの画面上段部分の領域です。ヘッダーには、会社名・サイト名やロゴなどを入れるのが一般的で、お店の看板のような役割を担っており、各ページ共通したものになります。タイトルやロゴ以外に、横並びのメニューを設置するのも定番です。

ヘッダーは、ホームページを表示したときのファーストインプレッション(印象)にも影響しますので、パッと見て良いイメージが伝わり、何のホームページであるかが一目でわかるものにする必要があります。

「コンテンツ」は、ページの内容である本文を表示させる領域です。
そして「サイドバー」においては、縦並びのメニュー(サイドメニュー)を設置します。トップページから訪れたユーザーに目的のページヘ誘導するためや、ページ間の移動をスムーズに行えるようにする事が目的です。そのため、サイドメニューはわかりやすさが重要になってきます。

最後に「フッター」ですが、画面下部に表示される領域です。コピーライトなどの著作権表示やプライバシーポリシーページヘのリンクなど、メインコンテンツには該当しない情報をフッターに記載します。ページ下部で目に止まりにくいため、あまり重要な要素を入れませんが、例外として、ECサイトなどはお支払い方法や送料などのショッピング案内を設置するなど、重要な要素が入ることもあります。なお、フッターにメニューを設置することもありますが、ヘッダーメニューと比較して、定番ではありません。

ホームページに見られる目的別レイアウトパターン

冒頭にも申し上げましたが、目的に応じてよく利用されるレイアウトのパターンが存在しますので、次にこのパターンを紹介していきます。

■プロモーションサイト(商品やサービスの認知度向上)
主に、商品やサービスの認知度向上や、イメージアップを目的したビジュアルメインのレイアウトです。大企業の商品プロモーション用サイトであれば、ブランドイメージの向上を兼ねていることもあり、中小企業さまの場合、問合せ増加の目的も兼ねていることがあります。 

レイアウトの特徴として、「サイドバー」を設置せずに「コンテンツ」部分の横幅を広げることで、インパクトを大きくしている点です。また、認知度向上という観点から写真を多用しているケースが多く、Javascriptを使用し、写真が入れ替わるなどの動的表現を取り入れているケースも多く見られます。

レイアウトパターン2
参考サイト:http://bloom-maruya.com/

■ECサイト(商品の販売)
商品の販売による売上向上を目的とした、ユーザビリティ重視のレイアウトです。基本レイアウトに則り、「ヘッダー」「フッター」「コンテンツ」「サイドバー」全ての要素をバランスよく配置します。他のレイアウトパターンではあまり活躍しない「フッター」も、ショッピング案内を表示するなど、重要な要素として使われます。
「サイドバー」を右側に設置するケースもありますが、基本は左側に設置します。

レイアウトパターン1
参考サイト:http://hm-gift.com/

■店舗サイト(店舗紹介・誘導)
店舗といっても、飲食店、美容室、クリニック、薬局など業種は様々です。他のタイプと異なり、業種も多種多様ですのでレイアウトパターンにバリエーションがあります。コンテンツページが少ない場合、サイドバーを取り、ヘッダーメニューのみの場合もありますが、コンテンツページが多い場合、ユーバビリティの観点からサイドバー(メニュー)を設置していることもあります。

飲食店や美容室などは、比較的TOPページに1枚の大きなお料理や店舗の写真などでビジュアルを表現しているケースが多く見られ、サイドバーがないプロモーションサイトのパターンに近いものが多いです。クリニックなどは、院内写真やスタッフ写真などを中心に、シンプルなレイアウトから、ビジュアルに特化したものまで、クリニックの特色に合わせて様々です。薬局などは、健康情報などの情報発信をしている場合があるため、ビジュアルよりも情報の見つけやすさという観点から基本レイアウトに沿ったレイアウトが好まれます。

参考サイト:http://charle-kg.com/

■コーポレートサイト(会社の紹介)
会社のコーポレートサイトは、企業を取り巻くステークホルダーに対して、会社情報に関連した情報の発信、および企業ブランドの確立が目的です。このタイプも店舗サイト型同様、業種によって多少レイアウトにバリエーションはありますが、多くの場合、シンプルなレイアウトが好まれます。
ただし、中小企業さまの場合、コーポレートサイトとプロモーションサイトを兼ねている場合もあり、そのようなケースでは、レイアウトのパターンも広がりを見せます。

■ランディングページサイト(資料請求・商品購入)
資料請求・商品購入に特化したタイプです。一般的には商品やサービスのホームページとは別に作成されます。ランディングとは本来「着地」という意味で、リスティング広告を出稿する場合、広告から誘導するページをランディング(着地)ページにすることで、資料請求・商品購入獲得の件数に大きく影響を与えます。

レイアウトの特徴として、主に「1ページ + フォーム」だけで作成することが多く、ブログのようにページが下に長く、スクロールさせることが前提のレイアウトとなっています。レイアウトは「コンテンツ」のみで、サイドバーなどはありません。プログラム上「ヘッダー」「フッター」領域は存在しますが、他レイアウトパターンのように、原則メニューを配置して他ページヘ誘導するような役割は担っていません。

レイアウトパターン3
参考サイト:https://elastinplus.com/
※プロモーションサイトとランディングページのハイブリッド型

このように、ホームページの目的に合わせ、適したレイアウトがそれぞれあります。このレイアウトパターンは、絶対的なものでありませんが、その目的にそのレイアウトが好まれるのには理由がありますので、そのことを考慮し、レイアウトを決める事が重要です。

ホームページ制作からWebコンサルティングまでお気軽にご相談ください!

ホームページ制作から公開後に重要となるWebを活用した集客支援、運営アドバイスを行っています。個人・大手係らず初心者にもわかりやすい提案と手厚いサポートで成果へ導いていきます。

◆ 電話:099-227-7841
◆ メール:下記、お問合せフォームからご連絡ください。

■ ホームページ制作・リニューアルに関するお問合せ・ご相談フォーム
  ┠ Fridaではホームページの新規作成、リニューアル、及び各種ご相談を受け付けております。
■ ホームページ制作御見積ご依頼フォーム
  ┠ ホームページ制作の無料お見積も承っております。
■ SEO、LPOなど各種Webコンサルティングのご相談フォーム
  ┠ 電話サポート30分2回まで無料でお受けいただけます。
お問合せ

………………………………………………………………………
〒892-0824
鹿児島県鹿児島市堀江町1-17 K&Kビル2F
営業時間:9:00~18:00
定休日:土・日・祝
ホームページ制作に関するHP:http://frida-studio.com
WEBコンサルに関するHP:http://nagahamamaya.com

この記事を書いたプロ

有限会社Frida(フリーダ) [[[ホームページ http://frida-studio.com/    http://nagahamamaya.com]]]

Webコンサルタント 長濱まや

鹿児島県鹿児島市堀江町1-17 K&Kビル2F [地図]
TEL:099-227-7841

  • 問い合わせ

このコラムを読んでよかったと思ったら、クリックしてください。

「よかった」ボタンをクリックして、あなたがいいと思ったコラムを評価しましょう。

1

こちらの関連するコラムもお読みください。

<< 前のコラム 次のコラム >>
最近投稿されたコラムを読む
 
このプロの紹介記事
有限会社Frida 代表取締役 長濱まやさん

誰もが「やりたいことをカタチに」できるお手伝いを(1/3)

 WebやSEOといったIT関係の言葉は、少し敬遠されがちですよね。「インターネットってわからない。パソコンって難しい。」そういう先入観を持っている人たちの苦手意識までちゃんと面倒を見てくれる人を見つけました。長濱まやさん。有限会社Frid...

長濱まやプロに相談してみよう!

鹿児島読売テレビ マイベストプロ

ホームページを活用した集客や活動支援

会社名 : 有限会社Frida(フリーダ)
住所 : 鹿児島県鹿児島市堀江町1-17 K&Kビル2F [地図]
TEL : 099-227-7841

プロへのお問い合わせ

マイベストプロを見たと言うとスムーズです

099-227-7841

勧誘を目的とした営業行為の上記電話番号によるお問合せはお断りしております。

長濱まや(ながはままや)

有限会社Frida(フリーダ)

アクセスマップ

このプロにメールで問い合わせる
プロのおすすめコラム
知っておきたいネットショップ運営代行のメリット・デメリット
イメージ

ネットショップの運営代行を利用することで多くのメリットが生まれます。プロのノウハウを借りながら、費用削減や...

[ ネットショップ ]

ネットショップにおける集客方法とそのポイント・コツ!
イメージ

ネットショップには、楽天市場などの「ショッピングモール型」と独自運営の「自社ECサイト」があります。黙ってい...

[ ネットショップ ]

一般的なネットショップにおける売上向上施策
イメージ

売上を向上させるためには、ユーザーにとっての使い勝手が良いサイトであることが大前提です。売上と直比例の関係...

[ ネットショップ ]

ネットショップ制作前に知っておきたい重要なポイント
イメージ

ネットショップ開業にあたり、知っておかなければならないポイントがあります。取り扱う商品によっては、保健所や...

[ ネットショップ ]

失敗しないネットショップ開業方法や開業先
イメージ

ネットショップ開業の方法には、いくつかの選択肢があります。中でも手続きが簡単で、初心者におすすめなのがBASE...

[ ネットショップ ]

コラム一覧を見る

コラムのテーマ一覧
スマホで見る

モバイルQRコード このプロの紹介ページはスマートフォンでもご覧いただけます。 バーコード読み取り機能で、左の二次元バーコードを読み取ってください。

ページの先頭へ