ホームページを構成するパーツの名前

ボタン、バナー、アイコン、ホームページは色んな要素で構成されていますが、日々お客さまと打ち合わせしていると、人によって各パーツの呼び方が違うことが結構あります。

例えば僕たちが「ボタン」と呼んでいるものを「バナー」と呼ばれる方もいらっしゃいますし、逆に言うと僕らが「バナー」と呼んでいるものをその方は「ボタン」だと認識してしまうわけです。

お客さまは知らなくて当然ですし、できるだけお客さまの使う単語に合わせて頭の中で変換しながら会話をするので問題はないのですが、統一できているとよりスムーズかなと思い、具定例と簡単な解説を交えながらまとめてみようと思います。

では早速まいりましょう。

 

ヘッダー

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

 

グローバルメニュー

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

 

ハンバーガーメニュー

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

 

KV（ケーブイ）

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

 

フッター

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

 

ボタン

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

 

バナー

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

 

図版

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

 

画像

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

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

サムネイル

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

 

 

テキスト

まさに今書いている文章ですね。

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

 

見出し

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

 

テーブル

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

 

タブ

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

 

アコーディオン

開閉式のリンク要素。クリックすると情報が出てくる折りたたみ式の部分。詳しい内容を少しずつ見せてくれます。

 

モーダルウィンドウ

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

 

イラスト

これはみなさんわかりますね。「絵」です。

 

 

アイコン

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

 

パンくずリスト

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

 

ページネイション

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

 

 

ラジオボタン

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

 

プルダウンメニュー

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

 

チェックボックス

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

 

 

 

 

favicon（ファビコン）

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

 

 

 

 

いかがでしたか？あなたの使う呼称と同じでしたでしょうか？

ひとまず主要な要素はこんなものかなと思いますが、また思いついたら随時追記していきたいと思います。