ホームページ（Webサイト）のパーツは、ホームページを構成するひとつひとつの要素であり、ホームページの使いやすさや機能にも関わる重要な部分です。
ホームページのパーツ名を「共通言語」として知っておくと、自分でホームページやWebサイトを作成するときだけでなく、例えばデザインを共有したり、誰かにデザインを依頼する際にもコミュニケーションが取りやすくなるので便利です。
そこで、この記事では、ホームページ（Webサイト）のパーツについて、初めての方にも分かりやすく解説していきます。
- ホームページのパーツとは？
- ホームページパーツの種類
- ホームページパーツの作成方法
この記事を読むことで、ホームページを構成する、それぞれのパーツの名称や役割が、簡単に理解できるようになります。
初心者向けに分かりやすく解説しているので、ぜひ、ホームページやブログ制作の参考にしてみてください。
実際に、Webサイトを制作していきながら勉強していくと、各パーツ名の意味や役割への理解が深まります。
この辺りは、CMSで人気のWordPressを使いながらWebサイトのデザインをしていくと身に付きやすいので、実際に経験しながらの進行をおすすめします。
関連記事：レンタルサーバー徹底比較！WordPressおすすめサーバーを解説
ホームページのパーツとは？
ホームページのパーツとは、ホームページを構成する各パーツのこと。
各パーツの名称と意味を理解しておくことで、例えば、自分でWebサイトを構築する際、コーディングをするにしても、CMSが提供する機能の分からないところを調べるのに役立ちます。
Web制作会社に依頼をしたり、内部施策をする上でも共通認識で通じるように「単語」を覚えておくのは、とても役立ちます。
各パーツ素材のデザインですが、インターネット上でもフリー素材がダウンロード出来ます。
またWordPressテーマ（テンプレートのようなもの）を使用していれば、テーマ毎にホームページパーツが搭載されているので、あとは自由にアレンジをするだけで、自分好みのホームページが簡単に作れます。
便利な「WordPressテーマ」については、以下の記事にて詳しく解説しています。
関連記事：WordPressテーマでおすすめできる有料版と無料版を比較しながら実例を用いて紹介
ホームページで使われるパーツの種類
ホームページで使われるパーツの種類は数えきれないほど、たくさんあるのですが、共通して使われるパーツは絞られます。
例えば、ヘッダーやメインコンテンツ、フッター、そのほかにもグローバルナビゲーションと呼ばれる、全ページに共通して表示されるメニューも、基本的なホームページのパーツに含まれます。
この他にも、よく使われるホームページ（Webサイト）のパーツとして、アイキャッチ、サイドバー、パンクズリスト、バナー、スライダー、サイト内検索窓、SNSのシェアボタン、コンバージョン（CV）用ボタンなど。
ページトップボタン、ページネーション、コピーライト、ファビコン、アコーディオン、タブメニュー、パララックスなどの機能があります。
以下、ホームページの代表的なパーツ機能をまとめてみました。
- ヘッダー
- メインコンテンツ
- フッター
- グローバルナビゲーション
- アイキャッチ
- サイドバー
- パンくずリスト
- バナー
- スライダー
- サイト内検索窓
- SNSのシェアボタン
- コンバージョン（CV）用のボタン
- ページトップボタン
- ページネーション
- コピーライト
- ファビコン
- アコーディオン
- タブメニュー
- パララックス
それぞれの内容を順に見ていきましょう。
ヘッダー
ヘッダーとは、ホームページの各ページ上部にある領域のことです。
一般的な意味としてはデータや文書の冒頭に付加される情報の位置を指します。
ホームページのトップにあるため、次に紹介するメインコンテンツと合わせて、重要な役割を担います。
LP（ランディングページ）の場合、後に解説するCV(コンバージョン用)のボタンを配置したりすることもあります。
メインコンテンツ
メインコンテンツ（メインコンテンツエリアとも言います）は、ホームページ（Webサイト）やブログなどにおいて、メインとなるコンテンツを表示する部分のこと。
トップページやサービスページなどはユーザーが注目する部分なので、メインコンテンツエリアにどのような要素を盛り込むか、構成やデザインレイアウトなど、綿密に計画を立てる必要があります。
フッター
フッターは、サイトマップやソーシャルネットワークへのリンクなどを掲載することで、Webサイトや会社全体の情報を整理するなど、重要な役割を担っています。
また、フッター部分にサイトマップやガイドを設置することで、ナビゲーションとして機能し、回遊率を高めることができます。
フッターは読みやすさを優先すると良いのですが、Webサイト全体の構造を示すため、ヘッダーほどコンパクトにする必要はありません。
実際にフッターがあることで、訪問者を最短距離で目的のページに誘導し、離脱を防ぐことができるので、フッターを上手に活用したいところです。
なお、フッターはヘッダーと異なり、ページの一番下にあるため、クリックが行われた時点でページ全体を閲覧した、サービスやサイトに関心の高いユーザーであることが想定できます。
このため、フッター部分に次のアクションを促すCV（コンバージョン）用のボタンを配置することで、潜在顧客の見落としを防ぐ効果が期待できます。
グローバルナビゲーション
グローバルナビゲーションは、Webサイトすべてのページで共通して使用できるメニューのことです。
ユーザーにウェブサイトの概要を伝え、必要な情報を見つけやすくするものです。
また、ページの各階層から、必要なコンテンツにアクセスできるようにすることで、ユーザーの利便性を高める役割も担っています。
アイキャッチ
アイキャッチは広告において、見る人の注意を引きつける画像や映像など、モチーフや広告文章を指しています。
文章や動画などの内容を示すのに使われ、アイキャッチのキャッチコピーや完成度が集客にも大きく関わってきます。
関連記事：アイキャッチの作り方について実例をもとに分かりやすく解説
サイドバー
サイドバーとは、Webサイトの画面の端に配置されるメニューや表示のこと。
サイドバーは、情報量の多いWebサイトを訪れたユーザーが、膨大な情報の中でも迷うことなく、目的の情報にたどり着けるようにするための便利なツールです。
実際、サイドバーがあることで、ユーザーは欲しい情報を簡単に見つけることができます。またユーザーの次の興味を1つの画面で捉え、Webサイトに長く滞在させることができるため重要な役割を果たします。
このほかにも、サイドバーはお問い合わせフォームと併用することで、コンバージョン（CV）率を高めることができます。
関連記事：カラムとは？Webサイトの構成で重要なカラム数について分かりやすく解説
パンくずリスト
パンくずリストとは、Webサイトを利用するユーザーが、視覚的に探しやすいようにするためのツールです。
基本的には、ウェブページ上でリンクが階層的に並んでおり、ウェブページの上部に表示されるパターンが多いです。
バナー
バナーとは、一般的にはインターネット上で表示される画像広告が、イメージしやすいと思います。
Webサイトや無料アプリ画面の下部に表示される「四角い画像リンク広告」のことを指しているのですが、そもそもバナーとは文字通り「旗」「旗印」という意味があります。
スライダー
スライダーとは、複数のスライドを次々と表示させ、複数の情報を一つの領域で表現するスライドショー機能のことを指します。
Webサイトのメインビジュアル部分など、複数のコンテンツや商品、写真などを提示するのに使われています。
サイト内検索窓
サイト内検索は、別名を検索ボックスや検索窓と呼ばれるパーツのこと。サイト内検索があることで、ユーザーが探している情報をすぐに見つけることができるというメリットがあります。
実際にサイト内検索によってユーザーは知りたいコンテンツにたどり着きやすくなり、ユーザーエクスペリエンスが向上します。
また、ユーザーが求めるコンテンツが表示されていなくても、検索されたキーワードをもとに新しいコンテンツを作成し、改善することができる便利な機能です。
SNSのシェアボタン
SNSのシェアボタンとは、サイト内に設置されたX（旧Twitter）やインスタグラム、LINEなどのシェアボタンのことをいいます。
自分のWebサイト内にあるコンテンツページを拡散したりしてもらえるように設置したり、情報共有してもらうのに役立つ機能です。
関連記事：SNSでシェアされた時のOGP画像キャッシュ更新方法をわかりやすく解説
コンバージョン（CV）用のボタン
コンバージョン（CV）ボタンとは、ランディングページ（LP）などのWebサイトを訪れたユーザーに対して、問い合わせや商品購入などの特定の行動を促すボタン機能のことです。
ユーザーに特定の行動を促すことから、CTA（Call to Action）ともいいます。
ページトップボタン
ページトップボタンとは、ブログやホームページなどのトップページ（HOME）にリンクする機能で「ホームに戻る」ボタンのことをいいます。
最近では、サイト閲覧をしていると、オーバーレイで
- 目次
- 閲覧中のページトップに戻る
- ホームページへ戻る
上記のほかにも色々機能を付けることが出来ますが、クリック１つで目的の位置へ遷移できるようになっていたりします。
ページネーション
ページネーションとは、日本語で「ページ分割」を意味します。
Webにおいては、検索結果の一覧など。
内容の多いページを複数のWebページに分割し、各ページへのリンクを整理してアクセスしやすくするために使用されます。
コピーライト
コピーライトとは著作権のことをさします。
著作権を保護するための裏付けと、著作権そのものを保護するために使用されます。
そもそも著作権は、対象物の創作によって自動的に発生し付与されるものです。
その権利を得るために特別な手続きはありませんが、創作した作品に著作権表示を行うことが一般的となっています。
特に、Webサイトが有名になってきた場合などは、特許庁へ商標登録の申請をして知的財産として権利を取得し「®」を付加することも重要です。
関連記事：ブログに商標は必要か？商標登録のメリットとデメリットを解説
ファビコン
ファビコンとは、もともとはお気に入りアイコンの略称で、Webサイトに設置するアイコンのことです。
主にアドレスバーやブラウザーのタブ、スマートフォンでウェブサイトの「ホーム画面」に表示されるアイコンにファビコンを使用します。
当ブログ（ユニコブログ®）も、「右を向いた青いたてがみのユニコーンのマーク」がアイコンで表示されているのが分かると思います。
ファビコンは、必ずしも設置する必要はありませんが、設置することで得られるメリットは多くなってきました。
例えば、タブを開いている場合、ユーザーはそのタブがどのページであるかを認識しやすくなります。
最近は検索結果でもファビコンが出てきます。
また、筆者の場合はWebブラウザにタブ固定して、作業ごとにウィンドウを分けているのですが、そんな時にもファビコンが視覚的に機能してくれて、流れ作業のように進める事ができるのですごく重宝しています。
また、このようなファビコンでページを認識すると、そのページを覚えてもらい安くなり、何度も訪問してもらうなど、リピート率を高める効果が期待できます。
アコーディオン
アコーディオンメニューは、サイト上のナビゲーションメニューのひとつです。
項目をクリックしたりタップしたりすることで、隠れた詳細をアコーディオンのように閉じたり、開いたりして表示することができます。
タブメニュー
タブメニューとは、タブをクリックすることで、表示するコンテンツを切り替えることができる機能です。
タブメニューを使うことで、多くのコンテンツを表示できるというメリットがあります。
パララックス
パララックスとは、Webサイトに立体感や遠近感を与え、高いデザイン性を実現するためのデザイン用語です。
Webデザインにおいて、画面のスクロールに合わせて個々の要素の速度や配置を変化させることが可能です。
パララックスにより、奥行きのある立体的なデザインを実現し、より洗練された印象のWebサイトにできます。
またWebサイトのイメージアップやインパクトのあるページを作ることができます。
その他のホームページに関連する項目
本章ではタイトルやカラムなど、ホームページのパーツ以外にも、知っておくと役立つホームページ関連の項目や用語を紹介します。
| サイトタイトル | 各ページの上部に表示される記事のタイトルや件名のこと |
| カラム | Webサイトの段組のこと（例：2カラム、3カラムレイアウトなど）。 関連記事：カラムとは？Webサイトの構成で重要なカラム数について分かりやすく解説 |
| 階層 | フォルダの層のことで、ディレクトリ構造やツリー構造と呼ぶことも。 |
| ファーストビュー | Webページで最初に目に入るエリアのこと |
| クロージング | ビジネスの最終段階で、商談を成約に結びつけること。CV（コンバージョン）が問い合わせの時は、最後、クロージングをするためのプロセスを作り、その後のUX/CXを高めていくための改善を行っていきながら、自社の製品やサービスを長く使ってもらえるようにする工夫をしていきます。 |
このような用語を知っていることで、ホームページの仕組みがさらに詳しく理解できます。
ホームページのデザインやレイアウトを考える際、参考にしてみてください。
ホームページのパーツ設定で注意したいポイント
ホームページのパーツですが、ユーザーから見て使いやすいパーツ構成が設計されていることが重要です。
実際、乱雑なデザインでは、Webサイト全体の構造がまったく見えません。
また、構造が見えないと、ユーザーだけでなく、Webサイトを作る側にとっても作業がしづらくなってしまいます。
どこまで細かく整理するかは、個人の好みにもよりますが、データを開いてすぐに大まかな構造が把握できるように整理しておきましょう。
すべてのパーツが適切に配置されていれば、デザイン面だけでなく、ユーザーや管理者にとっても非常に効率的なものになります。
関連記事：WEBデザインの勉強で役立つおすすめの書籍を紹介【初心者向け】
ホームページのパーツ作成の方法
ホームページのパーツ作成ですが、自分でコーディングしたりプログラミングして作る事も可能ですが、自分で定期的に面テンスしていくのはかなり大変です。
なので、WordPressテーマに最初から実装されている機能を使用したり、オリジナルのパーツを作成したい場合には、画像編集ソフトやアプリなどを使用します。
またアレンジをする場合には、画像や素材が必要になってきますが、こうした素材については、フリー素材や、有償で購入をして、著作権について利用規約範囲内での使用が許可されている画像やイラストなどを使うと便利です。
筆者の場合、Webサイトのデザインはなるべくシンプルにするようにしています。
最近、よく利用しているWordPressテーマの情報を公開していますので、こちらもお役に立てば幸いです。
- WordPressテーマでシンプルなサイトデザインが出来るお気に入りのテーマについて実例を交えて紹介
- 画像素材サイト10選！各サービスの料金と特徴を徹底比較
- 使いやすいレンタルサーバーを実際に利用してみた中から紹介【初心者向け】
特に画像素材やフリーのイラスト素材のダウンロードサイトでは、アイコンやボタン、バナーなどそのまま使える素材も多いですし、またCanvaのような画像編集ツールを使うことで、さらに魅力あるホームページパーツが作れます。
ホームページ全体の印象を変更したいのであれば、メインコンテンツの背景を変更したり、コンテンツ内に動的な要素を取り入れていくのもありです。
特に、メインコンテンツ部分の色や背景を変えると、サイト全体の見た目が一新されます。
以下の記事は、ホームページのアイキャッチ画像の作り方について解説していますが、その中で画像編集アプリを紹介しているので、よろしければチェックしてみてください。
関連記事：アイキャッチの作り方について実例をもとに分かりやすく解説
ホームページ（Webサイト）で使われる用語を覚えると便利です
凄く当たり前な目次で恐縮ですが、今回は「ホームページのパーツ」について、解説をしました。
ホームページに利用できるパーツは、Webサイトを運営する環境に応じて、それぞれページやコンテンツを使いやすくする、便利な機能が多く備わっています。
- ホームページのパーツは、ホームページを構成する要素
- ヘッダーやフッター、メインコンテンツなど、表示される全てがパーツ
- パーツ名を知っていると、ホームページ制作、第三者との確認や共有に役立つ
ホームページやブログのイメージにマッチする、便利なパーツや機能をレイアウトし、訪問者が使いやすいページ作りを進めていきたいですね。
ホームページのパーツに関連した記事
当ブログ（ユニコブログ®）では、Webサイトの運営に関する情報ノウハウや、情報発信に関する多くの情報をブログ記事形式で公開しています。
合わせて、これらの記事もお役に立てば幸いです。
