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

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

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

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

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

 

ヘッダー

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

ヘッダーのサンプルイメージ

 

グローバルメニュー

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

グローバルメニューのサンプルイメージ

 

ハンバーガーメニュー

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

ハンバーガーメニューのサンプルイメージ

 

KV(ケーブイ)

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

KV(ケーブイ)のサンプルイメージ

 

フッター

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

フッターのサンプルイメージ

 

ボタン

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

ボタンのサンプルイメージ

 

バナー

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

バナーのサンプルイメージ

 

図版

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

図版のサンプルイメージ

 

画像

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

画像のサンプル

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

サムネイル

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

サムネイルのサンプルイメージ

 

 

テキスト

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

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

 

見出し

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

見出しのサンプルイメージ

 

テーブル

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

テーブルのサンプルイメージ

 

タブ

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

タブのサンプルイメージ

 

アコーディオン

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

アコーディオンのサンプルイメージ

 

モーダルウィンドウ

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

モーダルウィンドウのサンプルイメージ

 

イラスト

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

イラストのサンプルイメージ

 

 

アイコン

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

アイコンのサンプルイメージ

 

パンくずリスト

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

パンくずリストのサンプルイメージ

 

ページネイション

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

ページネイションのサンプルイメージ

 

 

ラジオボタン

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

ラジオボタンのサンプルイメージ

 

プルダウンメニュー

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

プルダウンメニューのサンプルイメージ

 

チェックボックス

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

チェックボックスのサンプルイメージ

 

 

 

 

favicon(ファビコン)

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

favicon(ファビコン)のサンプルイメージ

 

 

 

 

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

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

 

Webサイト制作・運用でお悩みの方はご相談ください
この記事をシェアする
x
facebook
line
pockets
pockets

お問い合わせ CONTACT

数あるWebサイト制作会社からアットノエルを見つけてくれた方へ。
Webサイト制作会社・パートナーを変える必要はもうありません。
「もっと早く出逢いたかった」そうおっしゃっていただけるのがわたしたちの誇り。
「御社のWeb事業部」として、企画から制作、改善、運用まで、総合的にサポートいたします。