webサイトのデバッカーの方や少しweb制作に関わる方に向けてwebサイトを構成するパーツの名称をまとめました。効率的なコミュニケーションに役立てたら幸いです。
1 ほとんどのwebサイトで必ず使われるパーツの名称15選
1.ヘッダー(header)
ほとんどのWebページで一番上にある、一般的にロゴやナビゲーション、ハンバーガーメニューなどを含むエリアです。どのページでも共通したヘッダーが使われます。
2.ロゴ(logo)
会社のロゴがよく使われます。ヘッダーやフッター、ファビコンによく使われます。
3.グローバルナビゲーション、ジーナブ(gnav)
各ページへの導線となるリンクを集めた主要なナビゲーションメニューのことです。PCでは横並びで、スマホではよくハンバーガーメニューの中にあります。ジーナブと呼ぶことが多いです。(ジーはglobalのg)
4.ハンバーガーメニュー
グローバルナビゲーションをスマホでもうまく表示するためによく使われます。定番は三本線です。PCサイトでもスマホ同様ハンバーガーメニューを採用しているサイトも多いです。
5.メインビジュアル、キービジュアル(MV)
トップページにあり、サイトの顔となるエリアです。MV(エムブイ)、またはキービジュってよんだりします。
6.アイキャッチ(サムネ)
各ページを象徴する画像です。ブログやコラムには必ずと言っていいほど設定してあります。サムネイルと混同しがちですが、ほとんど同じです。サムネイルは記事をシェアしたりすると表示されるような比較的小さい画像のことを指しますが、ほとんどの場合アイキャッチ画像がそのまま使われます。
7.シェアボタン
SNSのシェアボタンです。各ページにOGPタグというものを設定してシェアした時の表示をデザインできます。
8.ページャー、ページネーション
一覧ページなどでよくみられる次のページに行くためのリンクです。
9.パンくずリスト
表示中のページがサイトのツリー構造のどの位置にあるのかを表したものです。今ではサイト制作では必須項目です。英語ではbreadcrumbsと表記します。童話『ヘンゼルとグレーテル』で、主人公が森で迷子にならないように通り道にパンくずを置いていった、というエピソードに由来しています。
10.サイドバー
複数カラム形式のサイトで使われるサイドにあるコンテンツエリアです。サイドコンテンツとも呼ばれたりします。
11.カテゴリー、タグ
投稿記事でよく使われる、記事を分類するためのものです。Twitterのハッシュタグのような役割を持ちます。
12.バナー(banner)
広告や関連する外部サイトへのリンクによく使われます。
13.フッター(footer)
サイトの最下部にあるエリアです。フッターナビゲーションやコピーライトがあります。最近のサイトではYoutubeのような無限スクロールを採用するサイトも多いため、サイドバーの一番下などに表示されている場合もあります。
14.フッターナビゲーション
フッターにあるナビゲーションのことをいいます。グローバルナビゲーションと比べてより簡素なことが多いです。プライバシーポリシーや利用規約、サイトマップなどを入れることが多いです。
15.コピーライト
Webページの権利者をここで表記しています。画像の無断利用やテキストを丸々転載するのはやめましょう。
2 知っていて損はないコンポーネントの名称22選
スライダー
画像や記事をスライドさせて表示します。有名なプラグインにslickがあります。
カード
Pinterestに代表されるカード型UIです。スライダーの中やブログの一覧表示に使われます。
タブ
ブラウザのタブと同意です。タブを切り替えてデザインを入れ替えます。
テーブル
表形式でデータなどを項目別に整理したいときに使われます。
リスト
画像やテキストを使って箇条書きで並べられます。
グリッドレイアウト
インスタグラムのような四角形を隙間なく並べたレイアウトのことを言います。
プログレスバー
処理に時間がかかる際に進捗状況を視覚的に表示してくれるものです。
ポップアップ
画面手前に出てくる小さいウィンドウのことです。ファイルを削除した時に出る「本当に削除しますか？」の確認もポップアップです。
テキストリンク(アンカーリンク)
リンクのついたテキストのことです。アンカーとはイカリ(錨)を意味しリンクに使うタグをaタグと言います。
CVボタン(コンバージョン)
ユーザーに最終的に押して欲しいボタンのことです。(サイトのゴールとなるボタン)
テキストフィールド
ユーザーがテキストを入力できるエリアのことを指します。
プレイスホルダー
ユーザーがテキストフィールドに入力する際の指標となる例文。
フォーム
必要な項目を選択したり入力できるように作成された入力欄です。お問い合わせページに使われます。
ラジオボタン
複数の項目から1つを選択したい時に使われます。
チェックボックス
複数の項目から複数選択したい時に使われます。1つ選ぶ場合はラジオボタンと呼びます。
セレクトボックス
複数の選択肢から1つを選択するときに使われます。スマホなどでよく使うイメージがありますね。
アコーディオン
メニューによく使われ、折り込まれたサブメニューが開閉して表示、非表示されます。
プルダウン
「よくあるお問い合わせ」に使われるようなコンテンツが下から出てくるようなものです。
ホバーエフェクト
マウスカーソルを要素の上に置いた(ホバー)した時の動き(効果)のことを言います。
ツールチップ
マウスカーソルを対象にホバーすると周辺に表示される対象の説明や注釈のことです。
アイコン
リストやメニューなどに使われることが多いです。五輪のピクトグラムもアイコンの一種と言えます。
ファビコン
タブにあるタイトル横の画像やアプリのサムネイルに使われる画像のことです。一般的にロゴが使われます。
最後に
web制作に携わる人たちの業種は多岐にわたります。デザイナーならデザイナーの、プログラマーならプログラマーの、それぞれ違う呼び方をすることも少なくはありません。正確な名称を覚えることも大切ですが、その時々で柔軟に対応していくことも大切かなと感じます。
