ホームページを構成するパーツの名前。「バナーとアイコンの違いって？」にお答えします

ボタン、バナー、アイコン、ホームページはさまざまな要素で構成されていますが、日々お客さまと打ち合わせしていると、人によって各パーツの呼び方が違うことが結構あります。例えば、こちらが「アイコン」と呼んでいるものを「バナー」と呼ばれる方もいらっしゃいますし、逆にこちらが「バナー」と呼んでいるものを「アイコン」だと認識してしまう方もいます。業界用語・専門用語の部類なので、お客さまが知らなくて当然ですが、使う言葉を統一できているに越したことはありません。本記事では、ホームページを構成する主要なパーツの名前と役割を、具体例とあわせて解説します。「バナーとアイコンの違いって何？」という方はぜひ参考にしてください。

この記事のポイント

• ホームページは、ヘッダー・フッター・ボタン・バナーなど多数のパーツで構成されている
• 「ボタン」と「バナー」、「イラスト」と「アイコン」など、混同されやすいパーツがある
• それぞれのパーツには役割があり、正しく使い分けることでわかりやすいサイトになる

この記事が向く人・向かない人

向く人

• 制作会社との打ち合わせで使われる用語がわからず困っている方
• 「このパーツの名前は何というのか」を調べたい方
• Webデザインの基本的なパーツ名を覚えたい方

向かない人

• 実装方法・コーディング方法など技術的な詳細を求めているエンジニアの方

ページ全体を構成する主なパーツ

ヘッダー

ホームページの頭の部分。ロゴやメニューを並べることが多い部分です。

グローバルメニュー

グローバルナビゲーションとも言います。「グロナビ」と略したりもします。ヘッダーの中にある、全ページ共通で使用するメインメニューのことです。

ハンバーガーメニュー

三本線で表される折りたたみ式のメニュー。スマホでの閲覧時に使用することが多いです。名前の由来は、見た目がハンバーガーに似ているからです。

KV（ケーブイ）

KeyVisualの略。ページ冒頭に配置するメインイメージのことです。「ヒーローイメージ」と呼ばれることもあります。特にトップページのKVをMV（MainVisual）と呼んだりします。

フッター

ホームページの最下部。サイトマップのようにメニューを並べたり、会社の連絡先等を掲載することが多いです。

「ボタン」と「バナー」はどう違うのか？

ボタン

バナーに比べて、装飾がなく小ぶりなクリック要素です。

バナー

ボタンに比べ装飾やつくりこみが多く、画像化したクリック要素です。なかでも、ウィンドウに対し特定の位置に固定されて表示するバナーをフローティングバナーと呼びます。

画像・テキスト系のパーツにはどんなものがあるのか？

図版

情報を図解化・図式化したものです。

画像

写真はもちろんのこと、デザインパーツを画像化させたものです。前述した図版やバナーも、そういう意味では画像に分類されます。

関連記事：ホームページの写真撮影もおまかせください

サムネイル

画像のなかでも、クリックした先のページにどんなものが掲載されているのか連想させるもの。あるいはクリックした先のページの内容を象徴する画像です。商品一覧ページ、ブログ記事一覧ページ、実績一覧ページなどに羅列する画像が、わかりやすい例でしょうか。「サムネ」と省略して呼んだりもします。

テキスト

まさに今書いている文章のことです。バナーや図版といった画像化された文字とのわかりやすい見分け方は、選択やコピーできるかどうかでしょうか。

見出し

テキストのなかでも、各セクションのタイトルやコピー、どんな内容の情報が書かれているのかおおよその想像をさせるものです。原則としてベースのテキストよりもサイズを大きくします。

テーブル

表組みのことです。会社概要や沿革、料金表などに比較的よく使用します。

クリックすると変化する要素にはどんなものがあるのか？

タブ

画面遷移することなく、その場で一部の領域のみ切り替える際に使用するボタンのことです。

アコーディオン

開閉式のクリック要素。クリックすると追加で情報が表示される折りたたみ式の要素です。コンテンツのボリュームが多く冗長な印象を避けたい場合、コンパクトにまとめたいときに使用します。

モーダルウィンドウ

ボタンやバナーをクリックした際に開くウィンドウのことです。

「イラスト」と「アイコン」はどう違うのか？

イラスト

いわゆる「絵」です。

アイコン

イラストをよりシンプルにしたり、デフォルメしたものです。メインの要素として使うというよりは、わかりやすく伝えるための装飾として、ボタンに小さく添えることが多いです。

ナビゲーション系のパーツにはどんなものがあるのか？

パンくずリスト

見ているページがそのサイトのどの階層に位置するのか示したものです。童話「ヘンゼルとグレーテル」で、主人公が森で迷子にならないようパンくずを置きながら歩いていったエピソードに由来します。

ページネイション

ページャーとも言います。ブログやお知らせ等のページで使用する、次のページへ進むボタンやリンクのことです。

フォームで使われるパーツにはどんなものがあるのか？

ラジオボタン

フォームに使用する選択肢パーツです。ひとつしか選択させたくない場合に使用します。

プルダウンメニュー

同様に、フォームでひとつしか選択させない場合に使用します。ラジオボタンとは異なり、クリックしないと選択肢がわからないため、選択肢が多い場合等、コンパクトにまとめたいときにおすすめです。

チェックボックス

こちらもフォームに使用する選択肢パーツです。複数選択を可能にしたい場合に使用します。

その他覚えておきたいパーツ

favicon（ファビコン）

ブラウザのタブやブックマーク等に表示されるアイコンです。コーポレートサイトであれば会社のロゴマークを使用することが多いです。Googleの検索結果にも表示されます。

よくある質問

Q. KV・MV・ヒーローイメージは同じものですか？

A. はい、基本的には同じものを指します。KV（KeyVisual）はページ冒頭に配置するメインイメージの総称で、そのうちトップページのものを特にMV（MainVisual）と呼ぶことがあります。また「ヒーローイメージ」という呼び方をされる方もいます。どれも同じ要素を指す呼び方の違いですので、打ち合わせの際はお互いの認識をすり合わせておくと安心です。

Q. ボタンとバナーの違いは何ですか？

A. ボタンは装飾がなく小ぶりなクリック要素、バナーは装飾やつくりこみが多く画像化されたクリック要素です。バナーの中でも、特定の位置に固定表示されるものをフローティングバナーと呼びます。

Q. バナーとアイコンの違いは何ですか？

A. バナーは装飾やつくりこみが多い画像化されたクリック要素で、単体でメインの訴求として使われることが多いです。一方アイコンは、イラストをよりシンプルに・デフォルメしたもので、メインの要素というよりボタンなどに小さく添える装飾として使われることが多い、という違いがあります。

Q. イラストとアイコンの違いは何ですか？

A. イラストはいわゆる「絵」で、アイコンはイラストをよりシンプルに・デフォルメしたものです。アイコンはメインの要素というより、ボタンなどに小さく添える装飾として使われることが多いです。

Q. これらのパーツ名は制作会社との打ち合わせで覚えておく必要がありますか？

A. 必須ではありません。専門用語なのでお客さまが知らなくて当然です。アットノエルでもお客さまの使う言葉に合わせて会話しますが、共通言語として知っておくと、打ち合わせがスムーズになる場面はあります。

まとめ

ホームページはヘッダー・フッター・ボタン・バナーなど、多くのパーツで構成されています。特に「ボタンとバナー」「イラストとアイコン」は混同されやすいため、違いを知っておくと制作会社との打ち合わせがスムーズになります。

ひとまず主要な要素を紹介しましたが、また新しいパーツについては随時追記していく予定です。ホームページ制作についてのご相談は、まずはお気軽にご連絡ください。