ホームページを構成する必須パーツ12選｜名称と役割を解説
更新日 2024年8月9日（公開日 2022年10月12日）
クオリティの高いホームページは、ホームページを構成する各パーツ（要素）が自然に組み合わされて構成されています。ユーザーが使いやすいようにホームページのパーツを構成することで、初めてプロフェッショナルなホームページが作成できるのです。
この記事では、ホームページを構成するさまざまな要素（パーツ）の名称や目的をひとつひとつ詳しく説明していきます。初めての Web デザインで失敗しないために、ホームページ構成の基本と、ホームページを構成する必須パーツの名称を押さえましょう。
目次
1. ヘッダーとメニュー
2. メインビジュアル
3. コンテンツ
4. フッター
5. ロゴ
6. CTA ボタン
7. サイドバー
8. ブログ
9. 入力フォーム
10. Web ホスティング
11. ドメイン名
12. SEO
すぐにでもホームページの作成に取り掛かりたいという人は、Wix のホームページ作成ツールをお試しください。実際にホームページを作りながら、パーツについての理解を深めましょう。本記事を参考に、機能的なホームページをデザインしましょう。
＼思い通りのデザインをノーコードで実現／
ホームページを構成するページの種類
ホームページを構成するパーツを解説する前に、まずはページの種類を紹介します。ページによって必要なパーツは異なるため、実際にどのようなページを作成する必要があるのか明確にしましょう。
トップページ
トップページは、 Web サイトの「入り口」となる重要な部分です。このページは訪問者が最初に目にし、全体の印象を決定づけます。通常、階層構造を持つウェブサイトの最上位に位置し、他のページへのナビゲーションの中心です。
トップページは Web サイトの「顔」であり、デザインや構造にこだわることが不可欠です。色使いやフォント、レイアウトはすべて、ブランドのアイデンティティを反映します。また、ユーザーが心地よく感じるビジュアルを心掛けることも大切です。
さらに、ユーザーが必要な情報にスムーズにアクセスできるよう、明確な導線を示すことも重要です。これは、明確なメニューやリンクの配置を含み、訪問者が求める情報に簡単にたどり着けるようにします。制作者側が見せたい情報ではなく、ユーザーが見たい情報へ誘導することを心掛けましょう。効果的なトップページは、訪問者が興味を持ち、さらにサイト内を探索したくなる魅力を持っています。
下層ページ
ウェブサイトを構成する上で、トップページと同じくらい重要なのが下層ページです。下層ページは、企業やサービスに関する詳細な情報を提供する場であり、ユーザーの理解を深め、最終的な目標であるコンバージョンに繋げるための重要な役割を果たします。
代表的な下層ページの種類と役割
会社概要ページ: 企業理念や事業内容を詳しく説明し、企業への信頼感を高めます。
お問い合わせページ: ユーザーからの問い合わせに対応し、スムーズなコミュニケーションを図ります。
ブログページ: 最新の情報や役立つ情報を発信し、ユーザーとのエンゲージメントを高めます。
プライバシーポリシーページ: 個人情報の取り扱いについて説明し、ユーザーの安心感を高めます。
特定商取引法に基づく表記ページ: ネット通販を行う場合は、必ず設置しなければならない法定ページです。
ビジネスホームページで掲載するべき項目はこちらの記事で詳しく紹介しています。合わせてお読みください。
ホームページを構成する基本パーツ
さて、これら Web ページを構築するホームページのパーツを詳しく解説します。これらのパーツは、Web デザインにとって必要不可欠ですので、名称を覚えて、デザイン参考事例が正しく検索できるようになりましょう。また、サイト全体を正しく機能させるために必要であり、パーツを効果的に組み合わせることで、ホームページの構成が形成されます。
01. ヘッダーとメニュー
ヘッダーとは、ホームページの上部にあるエリアを指します。サイトを訪れたとき、最初に目にするのがこの部分です。多くの場合、ブランドロゴとヘッダーメニューが表示されています。ヘッダーメニューは、サイト内の案内としての役割を果たし、訪問者が求める情報を見つけやすくするための Web デザインパーツです。ここから、商品詳細や会社情報などのページに移動できます。
ヘッダーの基本は重要なページを表示することですが、ホームページの種類によってメニューを工夫できます。たとえば、ネットショップを運営している場合、販売する商品の種類によってヘッダーをカテゴリー分けすると、より見やすくなります。非営利団体のホームページであれば、ヘッダーに寄付募集ページへのリンクを設けるのもよいでしょう。ヘッダーに適切なメニューを設定し、訪問者が使いやすく、目的を達成できるようにデザインすることがポイントです。ホームページの成功と失敗は、この設定によって決まると言っても過言ではありません。
02. メインビジュアル
ヘッダーのすぐ下には、画像や動画を設置します。ヘッダーとメインビジュアルは、ホームページの最初に表示されるエリア（ファーストビュー）を構成します。この２つが、サイトの第一印象を決める要素となります。特に、メインビジュアルが与える印象は、訪問者の行動を大きく左右します。訪問者がホームページに留まるのか、数秒後に離脱してしまうのかは、メインビジュアルがいかに信頼感やプロフェッショナリズムを伝えられるかにかかっていると言えます。
その観点から、ここに設置するビジュアルは、ブランドや会社の本質を伝えるものでなければなりません。商品やサービスの画像、ブランドのイメージが伝わるビジュアルなど、サイト全体との関連性を持たせることが重要です。プロフェッショナルな印象を与えるために、トップページに一番ふさわしいと思われる画像を選んでください。プロの写真家による商材写真の使用がおすすめです。まWix が提供するフリー画像や動画素材から、サイトに使えるビジュアル素材があるかどうかもチェックしてみましょう。
03. コンテンツ
すべてのサイトにはコンテンツが含まれています。ホームページのコンテンツはさまざまです。一般的にコンテンツとは、ブランドやサービスを説明する文章や、ボタンに配置される一言の文字といった、サイト上の文字情報を意味します。
ボタンやメニューに添えられる短い言葉のコンテンツは、小さな要素に思えるかもしれません。しかし、このコンテンツこそがサイトの存在目的なのです。「今すぐ購入する」「カートに追加」などの言葉を駆使して、訪問者を顧客にコンバートできるからです。
ホームページを訪れた人にブランドや会社のことをよく理解してもらえるよう、時間をかけて慎重にコンテンツを工夫しましょう。
04. フッター
フッターとは、サイトの最下部のエリアのことです。サイトマップが設置されていることが多く、サイト内の他ページへのリンクが含まれています。返品ポリシーやよくある質問ページなど、ヘッダーには記載できなかった情報もサイトマップの一覧で紹介でき、必要な情報がどこにあるのかを一目で把握できます。
また、顧客がサイトオーナーに問い合せをしたい場合や、実店舗を探すときのために、フッターに基本的な連絡先を記載する場合もあります。このような情報の掲載は、ビジネスの成功に非常に有効です。
さらに、SNS に誘導するため、SNS のアイコンを用いたシェアボタンをフッターに設置することもできます。これにより、SNS 上のフォロワーを獲得し、ブランドの認知度向上とビジネスの成長に繋げられます。
ホームページの追加要素
上記のような要素を盛り込んだホームページは、すでに完成されたサイトと言えます。しかし、さらにレベルアップを図りたい場合は、以下の要素の追加をおすすめします。特に、ビジネスサイトや企業サイトを制作している場合にぜひ検討しましょう。企業サイトに入れるべき6つの要素は、こちらのおすすめ記事でも詳しく紹介しています。
05. ロゴ
ブランド構築に欠かせないロゴは、ホームページでも定番の要素です。ロゴはブランドや会社を象徴するもの。ロゴによって、既存顧客と潜在顧客の両方がブランドや会社を認識し、記憶できます。
ロゴは通常、ホームページのヘッダーの左側上部にあります。このロゴをクリックすると、訪問者はサイトのトップページに戻ることができます。ロゴを作成してサイトに簡単に埋め込むには、カスタムロゴを自動的に作成できるロゴジェネレーターが便利です。
06. CTA ボタン
CTA（call-to-action）とは、顧客がサイト上で次のステップに進み、セールスファネルを通過していくのを誘導する短いテキストのことです。通常、CTA はボタンとして表示され、「今すぐ始める」「購入する」など、アクションを表す言葉が含まれています。CTA のテキストは、顧客に特定の行動を取るように促し、ボタンをクリックするとどういうステップに進むのかをわかりやすく伝えるものです。
CTA は、実際にサービスを利用したり、商品を購入したりという訪問者の行動を喚起するもので、ホームページの重要な要素です。このボタンを設置しない場合、売上が減少したり、訪問者が Web サイトでの目的を完了せずにページを離脱する確率が高くなる可能性があります。
07. サイドバー
多くのホームページでは、画面の横にサイドバーと呼ばれる縦長のバーを設置し、リンクや情報を表示しています。サイドバーは、サイトのもう一つのナビゲーションとして機能し、訪問者が必要な情報を見つけるのに便利な要素です。ヘッダーの情報と比べると、優先順位の低い内容が表示されます。
一般的に、サイドバーにはサイト内の他のコンテンツへのリンク、メールマガジンの登録方法、広告などが含まれます。このスペースを広告に活用すると、ホームページのマネタイズに繋がり、ビジネスを成長させることにもなります。また、このスペースで商品を宣伝しておくと、訪問者が商品ページをチェックする前の段階であらかじめ商品を確認できます。
しかし、ページが縦長の場合は、サイトバーが使いづらい場合もあります。パーツを固定してメニューを表示する「アンカー」の設定方法もご覧ください。
08. ブログ
ブログは、ビジネスに関連するさまざまなトピックについての記事や投稿をまとめたものです。最近では、企業が自社サイトにブログを追加することが、より一般的になってきています。ブログは単独のサイトとしても立ち上げられますが、既存のホームページの一部として追加すれば、企業のマーケティングツールとしても機能します。
ホームページへのブログの追加は、いくつかの目標を達成するために効果を発揮します。まず、顧客に商品や業界のより幅広い情報を提供できます。それによって、顧客を育成し、彼らのビジネスへの理解を深められます。
また、ブログはホームページに多くのトラフィックをもたらします。さまざまなトピックを深く掘り下げておくと、人々が Google 検索しようとする内容への答えを提示できます。たとえば、提供しているサービスと間接的な関係しかないトピックについての記事でも、ブログで十分な情報を提供することにより、商品やサービスを必要としていないユーザー層の潜在的な興味を引き出し、新たな顧客層として取り込むことができます。
コミュニティブログを運営するなら、登録済み会員のみがアクセスできる会員限定ページを追加することをおすすめします。会員限定ページは他にも、ユーザー投稿型サイトや、ファンコミュニティの運営にも応用できます。
09. 入力フォーム
入力フォームは、一般的に情報収集のために使用されます。ホームページに埋め込み、さまざまな用途に合わせて活用できる要素です。たとえば、問い合わせフォームを設置すると、訪問者がサイトから直接問い合わせられるようになります。また、登録フォームのように訪問者の情報を集めるフォームは、見込み顧客の獲得に役立ちます。
フォームを設置する際は、使用するフォームの種類によって、サイト内の設置場所に十分配慮しましょう。一般的に、問い合せフォームをトップページに設置するのは、少し積極的すぎるアプローチと言えます。別のウェブページや、サイトの下の方など、埋め込む場所を検討してください。
ヒント：要素のレイアウト
ホームページに含める要素が決まっても、それらをどうレイアウトすべきか悩むところです。ホームページのレイアウトにはさまざまなパターンがあります。それぞれの利点を考慮し、すっきりと見やすいホームページを保ちましょう。
最も一般的なホームページのレイアウトは、トップページと、読者が探している情報を掲載する複数の下層ページから構成されています。もうひとつの選択肢としては、シングルページのホームページデザインがあります。これは、すべての情報をスクロール可能な縦長ページに配置するものです。このレイアウトには、訪問者が探しているものすべてを一度に見つけられるというメリットがあります。このレイアウトを採用する場合、各セクションを明確に区別しましょう。また、ヘッダーにページ内リンクを設置することで、各セクションへのナビゲーションをスムーズにできます。
レイアウトを工夫したい場合は、「カラム」機能もお試しください。ホームページのコンテンツを横並びに分割し、写真や動画、問い合せセクションなど、さまざまなパーツを見やすく表示できます。
ホームページを構成するその他の要素
ホームページそのものに含まれる要素ではありませんが、サイトを確実に稼働させるために必要不可欠なものがあります。ホームページの作成を始めるにあたり、少なくとも以下の３つの要素については、十分に理解しておくことをおすすめします。
10. Web ホスティング
Web ホスティングとは、簡単に言うと、ホームページがオンラインの状態でいるための場所です。見た目ではわかりませんが、すべてのホームページはサーバーのスペースにアクセスし、保存されます。サーバーはデータの格納庫のような存在です。ネットワークに接続され、他のコンピューターにファイルやデータなどの情報を提供するメインのコンピューターを指します。サーバーは、ホームページがオンラインにあり、ユーザーが検索したときにアクセスできることを保証します。
Wix なら、無料 Web ホスティングが組み込まれているので、ホームページを作成して公開すると、自動的に信頼性の高いマルチクラウドホスティングシステムでホスティングされるようになります。つまり、外部のホスティング会社を探すことも、ホスティングサービス料を支払うことも心配する必要はありません。
11. ドメイン名
ホームページの作成を考えたとき、ドメインという言葉を耳にしたことがあるでしょう。ドメインとは、簡単に言えばホームページのオンライン上の住所のことです。会社名やブランド名と同じであることが多く、ユーザーがアクセスするときに目にするため、記憶に残るドメイン名であれば印象づけることができます。たとえば、あなたのブランドが「Rosa」であれば、ドメイン名は「rosa.org」や「rosa.com」などが考えられます。
ユーザーにホームページを簡単に見つけてもらい、覚えてもらえるよう、ぜひ個性あるドメイン名を取得してください。たとえば、何かについて検索したいとき、もっと情報を知りたいとき、何を思い浮かべますか？ 多くの人が最初に思いつくのは、google.com ではないでしょうか。このように、人々に幅広く認識され、すぐに思い出してもらえるドメイン名というのは、ホームページをより大きな成功へと導いてくれます。
12. SEO
SEO（サーチエンジン最適化）とは、検索エンジンで自分のサイトが検索されやすいように調整することです。検索エンジンがホームページをよく認識できるように、サイトのコンテンツ、画像、デザイン、構造などを最適化するのです。認識結果により、Google は関連する検索クエリに対応するホームページを表示します。
SEO は、さまざまな側面を包含する複雑な世界です。SEO に不慣れな人には、Wix SEO Wiz の利用をおすすめします。このツールを活用すると、Google にインデックスされやすいサイトを構築できます。また、どのようにサイトを最適化すべきか、実行に移しやすい施策の提案を行い、上位表示の達成を助けるツールとなっています。
まとめ
ホームページを構成するパーツ名称や要素を理解すると「パーツごとにデザインの参考を調べられる」「ホームページで追加してみたい機能を探しやすくなる」といったメリットがあります。
本記事で紹介したパーツ名称と要素は、どんなホームページでも使える、必要な機能です。お持ちのホームページにまだない機能があれば、ぜひ追加を検討してみましょう。初めてホームページを作成する人は、ホームページを作成する手順と基礎知識についての記事もおすすめです。
Wix は無料でホームページの作成ができるサービスを提供しています。料金プランから、ご自身のニーズに合ったサブスクリプションの選択も可能です。機能性に優れたホームページ制作プラットフォームをぜひお試しください。
＼思い通りのデザインをノーコードで実現／
編集者：Miyuki Shimose
SEO & ブログコンテンツマーケター
