Webサイト（ホームページ）を構成しているのパーツの基本用語をまとめました。
サイトのどの部分を何と呼ぶかがわかるようになります。業界では当たり前でも、一般の方やWeb初心者にとってはわからないこともありますので、参考になれば嬉しいです。
目次
Webサイトを構成するページやパーツ
Webサイトを構成する各種ページやパーツについて、以下の3つのグループに分類してご紹介いたします。
- ページの種類
- サイトナビゲーション
- コンテンツ関連
複数のページと、ユーザーを案内するナビゲーション、細部の各種コンテンツによってWebサイトが構成されていると思っていただければ大丈夫です。
ページの種類
Webサイトを構成する複数のページ。ここでは基本的なページの種類を指す用語を解説いたします。
トップページ
文字通り、Webサイトの表紙となるページです。ちなみに、多くの方にWebサイトとホームページはほぼ同じように認識されていますが、厳密には、トップページのことをホームページといいます。
下層ページ
トップページ（＝ホームページ）からリンクするページを下層ページといいます。トップページ以外を下層ページとしても間違いではありません。企業サイトなら、企業情報や事業案内などのみが掲載されているページなどです。
Webサイトはトップページと複数の下層ページから成り立っています。
アーカイブページ
主にトップページ以外の、下層ページの一覧ページのことをアーカイブページといいます。単一のページをまとめて一覧化したページです。複数の単一記事へリンクできるブログアーカイブページや、商品画像が複数並んでいる商品アーカイブページなどがあります。
詳細ページ
単一のページのことを「詳細ページ」や「メインページ」と呼ぶことがあります。ブログ詳細ページなら、記事の本文が書かれているページ（当ページもブログ詳細ページです）。商品詳細ページなら、ひとつの商品について紹介されているページのことです。
Webサイトで階層化されているページの最小単位のページともいえます。
サイトナビゲーション
サイトナビゲーションとは、Webサイトの案内図として用いられることが多いパーツです。
ヘッダー
ヘッダーに厳密な定義はありませんが、サイト上部のエリアをヘッダーといいます。当サイトの場合は下記箇所です。サイトやページの概要を伝えるためにあり、テキスト以外にも画像が設置されることもあります。
トップページに限らず、下層ページでもこの辺りのエリアをヘッダーと呼びます。
BLOGと表示されており、ブログのアーカイブページであることが伝わります。
グローバルナビゲーション
ヘッダーには、一般的に「グローバルナビゲーション」というメニュー項目があります。当サイトでは下記箇所です。
グローバルメニューや、ナビメニューと呼ばれることもあります。また、ここに表示されているメニュー項目は親メニューとも呼ばれます。トップページ、下層ページを問わず全ページ共通で同じものを表示するのが一般的です。
Webサイト全体のナビゲーションになる役割があります。
サブメニュー
メニュー項目のサブとして展開するメニューがサブメニューです。子メニューと呼ばれることもあります。
当サイトの場合、グローバルナビゲーションのメニュー項目にカーソルを合わせて表示される上記箇所です。
メガメニュー
メガメニューは、下層ページへリンクを複数種類、包括的に表示できるメニューです。当サイトでは下記箇所です。
通常のサブメニューよりも情報量が多く、画像やアイコンを使うこともあるため、複数の下層ページの全体像が伝わりやすいという利点があります。
メガメニューについて、さまざまな実例と共に解説している下記記事も参考にご覧ください。
2019/06/05*情報を更新いたしました。 2020/05/02*動画解説を更新いたしました。 最近、国内ウェブサイトでもよく目にするようになったメガメニュー。メガメニューは、一般的なグローバルメニューのドロップダウンより広く領域がとられています。その為、多くの情報をひと目でわかりやすく...
ハンバーガーメニュー
ハンバーガーメニューとは、主にスマホやタブレットサイズで使われることの多い、三本線のメニューです。ハンバーガーのような形がその名の由来です。
当サイトでは下記箇所です。
また、タップすると展開する右側のメニューをドロワーメニューと呼びます。
フッター
フッターとは、一般的にサイトの全ページに共通して表示されているページ最下部のことです。
Webサイトの下層ページへのリンクや外部リンク等が網羅されていることが多いです。ここの各種項目は「フッターメニュー」とも呼ばれ、グローバルナビゲーション内で表示しきれていない項目や広告などが設置されている傾向もあります。コピーライト（著作権表示）なども一般的にはフッターに表示されています。
フッターについて詳しく知りたい場合は、こちらの記事もご覧になってみてください。
「フッターは見られない。」 「見られたとしても細かくは見ていない。」 「だから、適当でいい。」 あなたは「フッター」に対してこのような勘違いをしていませんか。ヘッダーは作り込んでいるのに、フッターで手が抜かれているWebサイト（ホームページ）は珍しくありません。もちろんフッターを抜くと、サ...
コンテンツ関連
ページの種類やナビゲーションに加え、サイトの細部を構成するコンテンツは色々あります。ここでは最低限知っておきたい基本的なコンテンツ関連の名称をご紹介いたします。
ファビコン
サイト内のコンテンツといえるかは微妙ですが、ブラウザのタブなどに表示されるアイコンのことをファビコンといいます。
WordPressにおいては、以下の記事で解説している方法で簡単に設定可能です。
2021/4/30 情報を更新いたしました。 ブラウザタブやブックマークしたサイトにロゴのようなものが表示されるのを見たことがありませんか？このアイコンを「ファビコン（favicon）」といいます。 スマホなど他のデバイスでもファビコンはブラウザ内で使われます。 ...
カラム
カラムとは、メインコンテンツの列数と思っていただいてOKです。コンテンツの大枠のレイアウトに対して使われます。
当サイトの場合、下記のブログアーカイブページは1カラムです。
一方で、ブログ詳細ページである当ページは2カラムです。目次が表示されている右側のエリアをサイドカラムやサイドバーと呼びます。
パンくずリスト
パンくずリストとは、ユーザーが閲覧しているページの現在置を示す階層的なリンクの一覧のことです。
当サイトのパンくずリストは、上記箇所です。ページのカテゴリーが表示されていることが一般的で、階層が伝わるようになっています。
上記例の場合は、全ブログアーカイブページの中の「AI,Webデザイン」カテゴリーの中の「ドラッグ&ドロップだけで画像編集できるAIツール「ClipDrop」の使い方」という記事であることを示しています。
ページ上部に表示されていることが多いです。
アイキャッチ画像
アイキャッチ画像とは、ユーザーの注意を惹きつけるための画像のことです。「eye catch image」が語源と思われますが、これは和製英語で、英語圏では「Featured Image」と呼ばれます。
アイキャッチ画像は、基本的に詳細ページの冒頭部分に設置されています。
また、各所の詳細ページへのリンクにも同じ画像が表示されるのが一般的です（トップページやアーカイブページ、サイドバーなど）。
アイキャッチ画像がその他の箇所に縮小表示されているとき、それらをサムネイルと呼ぶこともあります。
アイキャッチ画像については、こちらの記事で詳しく解説しています。
ブログやWEBサイトのアイキャッチ画像の選定は重要です。セットされているアイキャッチひとつでサイトの印象やクリック率も変わります。 このページではアイキャッチ画像の役割、選び方や作り方など、アイキャッチ画像に関わる記事をまとめていますので、ぜひ参考にご活用ください。 アイキャッチ...
ページネーション
ページネーションとは、「前のページ」や「次のページ」などに移動するための機能のことです。ページングやページャーとも呼ばれます。
当サイトでは下記箇所です。
当ページ（詳細ページ）の本文下部にもありますし、
上記のようにアーカイブページにも別の形で表示されています。
まとめ
Webサイト（ホームページ）を構成しているパーツの基本用語をご紹介いたしました。
そもそものパーツの名称を知っていなければ、その先の理解も難しくなります。クライアントやチームに初心者の方がいる際は、基本知識として共通認識できるようにしておきましょう。
コメント