発注前に押さえておきたいウェブデザイン用語集
今回は 発注前に押させておきたいウェブデザイン用語集 ということで、ウェブデザインを発注する方が事前に知っておくとよい用語をまとめてみました。
これらの用語を事前に押さえておくと、単純にデザインの議論がスムーズになるだけでなく、制作会社との信頼関係を早期に構築できることに繋がります。
これからウェブサイトの発注をしようと考えている方はぜひチェックしてみてください。
以下のグループに分けてご紹介していきます。
- サイト構造
- ページ内エリア
- ページ内パーツ
- 視覚効果
- その他
では早速最初の単語から。
サイト構造
サイトマップ
サイトマップ （ site map / sitemap ）とは、ウェブサイトのページ構成案を表した図です。 サイトの基本設計フェーズで、サイトの目的・ターゲットに合わせた動線計画の一貫として作成します。 人間にとってわかりやすいツリー構造にすることが一般的です。
近い名前のものに「 XML サイトマップ」がありますが、これは通常のサイトマップとは完全な別物です。 XML サイトマップは検索エンジンがサイトを巡回しやすくするためにサイト運営者が用意する XML ファイルのことです。
ディレクトリマップ
ディレクトリマップ （対応する英語なし）とは、ウェブサイトのページ構成を詳細に表現した表です。 サイトマップに対して、各ページのパス（≒ URL ）やタイトル、 CSS ファイルやメディアファイル等の情報を付加したものになります。 サイトの詳細設計フェーズで、導線を具体化するために SEO 等の詳細を考慮して作るものです。
ちなみに、日本では「ディレクトリマップ」という言葉を耳にしますが、英語圏ではあまり使われない気がします。
ホームページ
ホームページ （ home page ）とは、ページの集合としての「ウェブサイト」の中で「出発点」「ルート」にあたるページのことです。 例えば Yahoo! JAPAN のウェブサイトで言うと https://www.yahoo.co.jp/ がホームページにあたります。 別の呼び方として「トップページ」や「フロントページ」と呼ばれることもあります。 ナビゲーション設計の文脈等では短縮して「ホーム」と呼ばれることもあります。
日本では「ホームページ＝ウェブサイト」という認識が一般に広まっていますが、本来「ホームページ」と「ウェブサイト」はまったくの別物です。
下層ページ
下層ページ （ child page / subpage ）とは、サイトマップの中で、ホームページと、ホームページからリンクをたどって直接行けるページを除いた、個別のページのことです。 ホームページを一番上に持ってきて、その下に次のページ、さらにその下にその他のページを、という形でサイトマップを描くと下の方に来ることから、「下層」と呼ばれているようです。
ページ内エリア
ヘッダー
ヘッダー （ header ）とは、ページ内の最上部に配置されたサイト内共通領域のことです。 最小限の構成はサイトロゴとメインメニューで、サイトによって検索ボックスやアカウントメニュー、言語切替ウィジェット等を配置したりします。
ページ上部に配置されることが多いですが、左側や右側に配置されることもあります。 最近は、よほど特殊なデザインのサイトで無いかぎり、サイトにはヘッダーを設ける形が一般的です。
フッター
フッター （ footer ）とは、ページ内の最下部に配置されたサイト内共通領域のことです。 企業サイトの場合は、コピーライト表記、プライバシーポリシー、会社概要等が置かれることが一般的です。
メインコンテンツエリア
メインコンテンツエリア （ main content area ）とは、各ページの固有のコンテンツが配置される領域のことです。 ヘッダーやフッターが複数のページで共通しているのに対し、メインコンテンツエリアは他のページとの重複が無いことが一般的です。 別の呼び方として「メイン」「メインカラム」「コンテンツカラム」等と呼ばれることもあります。
ちなみに、「カラム」というのは、パソコンが主流の時代に「メイン」と「サイド」の 2 列構成が一般的だったときによく使われたことばです。 スマートフォンやタブレットが主流となりレスポンシブデザインが一般的になった近年ではあまり使われません。
サイドバー
サイドバー （ sidebar ）とは、メインコンテンツエリアの左右どちらかに配置される補助的なコンテンツ領域のことです。 一般には、サブのナビゲーションメニューや検索ボックス、関連記事、キャンペーンバナー等がよく置かれます。 別の呼び方として「サイド」「サイドカラム」等と呼ばれることもあります。
ページ内パーツ
ウィジェット
ウィジェット （ widget ）とは、主にサイドバーに配置される小さなパーツのことです。 HTML ファイルに手を加えなくても、 CMS の管理画面で設定を変更すれば、配置や設定を自由に変更できるもののことを指します。
人気の高い（特に日本で人気の高い） CMS WordPress （ワードプレス）ではこの機能に「ウィジェット」という名称がそのまま使われています。 日本のブログサービスにおける「ブログパーツ」と同等の意味合いのことばです。
ロゴ
ロゴ （ logo ）とは、サイトあるいはブランドのアイコンとなるマークのことです。 ウェブデザインではロゴ画像のことを省略して「ロゴ」と呼ぶことがあります。 特にウェブにかぎった単語ではないので、これ以上の説明は不要でしょう。
コピーライト
コピーライト （ copyright ） とは、一般には著作権のことですが、ウェブデザインの文脈では「 © ○○ All rights reserved. 」といった著作権表記のことです。 コピーライトを表示するほとんどのサイトではフッターの最下部に配置されます。
ただ、慣習として企業サイトにはコピーライト表記を付けることが一般的ですが、関連する国際条約のルールに則して厳密に言うと、実はコピーライト表記をしてもしなくても大差無い、とのことです。
ナビ
ナビ （ navigation ）とは、ウェブサイト内を移動するためのパーツのことです。 省略せずに「ナビゲーション」と呼ばれることもあります。 ナビの例としては、ヘッダー内のホームページへのリンク、メインメニュー、パンくずリスト、フッターメニュー、ページャー、検索ボックス等があります。
サイト全体に共通したナビのことを「グローバルナビ」、個別のページやカテゴリに固有のナビのことを「ローカルナビ」と呼んだりします。
メニュー
メニュー （ menu ）とは、ウェブサイト内のページに対するリンク集のことです。 「ナビゲーションメニュー」と呼ばれたりもします。 複数ある場合は「メイン・サブ」「ヘッダー・サイド」等と使い分けることもあります。 大きく、フラットな単階層のメニューと、ツリー構造になった複数階層のメニューがあります。
メニューアイテム
メニューアイテム （ menu item ）とは、メニュー内の各リンクのことで、リンクのラベル（「リンクアンカー」）と URL 情報のペアです。 「メニュー項目」と呼ばれることもあります。
ハンバーガーボタン
ハンバーガーボタン （ haumburger button ）とは、メニューの表示・非表示を切り替えるための三本線アイコンのボタンのことです。 日本語のサイトでは、ヘッダー内か右下に配置されることが一般的です。 見た目がハンバーガーに似ている（？）ためにこう呼ばれるそうです。 文章の中では「ハンバーガーメニューボタン」と書かれていることもあります。
パンくずリスト
パンくずリスト （ breadcrumb / breadcrumb trail ）とは、ウェブサイトの起点となるホームページから現在のページまでの経路を表すナビゲーションパーツのことです。 本来的な意味は「ユーザの閲覧履歴」のようですが、現在ではホームページから現在のページまでの経路を指す意味で使われることが多いようです。
「パンくず」という名前の由来はもちろん童話『ヘンゼルとグレーテル』です。 「パンくず」「パンくずナビゲーション」「ブレッドクラム」等と呼ばれることもあります。
メインイメージ
メインイメージ （ main image ）とは、ページ内の最も目立つ位置に置かれた、ページ全体を代表する画像のことです。 特に、ホームページやランディングページ等、パッと見の第一印象が重要なページでよく使われます。 日本では「キービジュアル」「メインビジュアル」と呼ばれることもあります。
スライドショー
スライドショー （ slide show / slideshow ）とは、同一のスペース内に複数枚の画像を一定時間で切り替えて表示するパーツのことです。 スライドショーを利用すると、見た目はスッキリさせたまま少ないスペースに多くの情報を掲載することができます。 スライドショー内の各画像は「スライド」「スライド画像」等と呼びます。
バナー
バナー （ banner ）とは、キャンペーンの告知や広告のためにページ内に差し込まれた画像のことです。 キャンペーンページや外部の（広告主の）ウェブサイトへのリンクが付けられることが一般的です。 正確には「バナー画像」ですが、近年は「バナー」と省略して呼ばれることの方が多いようです。
検索ボックス
検索ボックス （ search box ）とは、ウェブサイト内検索を行うためのテキスト入力フィールドのことです。 ヘッダーやフッターに設置されることが一般的です。 似た意味合いのことばに、「検索フォーム」「検索フィールド」等があります。
言語切替ボタン
言語切替ボタン （ language selector / language switch ）とは、ウェブサイトの表示言語を切り替えるためのパーツのことです。 複数の言語で表示可能ないわゆる「多言語サイト」で利用されます。 見た目がボタンの場合は「ボタン」ですが、単純なリンクやドロップダウンリストになっていることもありその場合は「ボタン」とは呼びません。
トップに戻るボタン
トップに戻るボタン （ back-to-top button / "Back to top" button ）は、ページの最上部にワンクリックでスクロールするためのボタンのことです。 ボリュームが多く縦に長いページが多いウェブサイトで設置すると利便性が向上します。 ページの最上部を「ページトップ」と呼ぶことがあるので、「ページトップに戻るボタン」と呼ばれることもあります。
ソーシャルボタン
ソーシャルボタン （ social button ）とは、 Twitter や Facebook 等の SNS サイトでのシェアをかんたんに行えるボタンです。 各種 SNS サイトのものを一箇所にまとめる形が一般的です。 「シェアボタン」と呼ばれることもあります。
タブ
タブ （ tab ）とは、タブ形式で表示されたリンク集です。 ページのメインコンテンツエリアまたはその一部で、関係の近いページへのリンクをまとめたり、要素数の多いエリアをグループに分けて表示したりするのに使われます。 クリックされて現在その内容が表示されているタブを「アクティブタブ」と呼んだりします。
ページャー
ページャー （ pager ）とは、複数のページに分かれている記事一覧等において、ページ切り替えに使われるナビゲーションパーツです。 最初と最後のページと、前後数件のページへのリンクが表示され、現在のページはラベルだけでリンクが付いていない形が一般的です。 ページャー機能やページ分けすることを「ページネーション」と呼んだりします。
フォーム
フォーム （ form ）とは、テキストや選択ボックスの形で人が情報を入力するための一式のパーツのことです。 企業サイトでは「問い合わせフォーム」「申し込みフォーム」等のパターンが多いでしょうか。 「フォーム」という単語はさまざまな意味を持つため、あいまいさを避けるために「ウェブフォーム」という呼び方がされることもあります。
視覚効果
ライトボックス
ライトボックス （ Lightbox ）とは、縮小された画像をクリックすると、ページ全体が暗くなり、全面に大きな画像が表示される視覚効果あるいは機能のことです。 もともとは JavaScript （ジャバスクリプト）の定番ライブラリの名称ですが、名前が一般化し、そのライブラリを使わない場合でもこの視覚効果を指す意味で「ライトボックス」と呼ばれます。 画像・動画を多数扱ったギャラリーページ等でよく使われます。
その他
レスポンシブデザイン
レスポンシブデザイン （ responsive design ）とは、スマートフォン・タブレット・パソコン等さまざまなスクリーンサイズの端末に対応したページレイアウトを提供する手法のことです。 技術的には、プログラムと HTML は共通のまま、 CSS （スタイルシート）だけを使って各端末での見栄えを切り替えることを言います。
スマートフォンやタブレット等のいわゆる「モバイル端末」の数がパソコンの数を上回るようになってからは、ウェブサイトはレスポンシブデザインで作るのが普通で、特定の端末だけを想定して作ることはむしろ稀です。
ワイヤフレーム
ワイヤフレーム （ wireframe ）とは、ウェブページ内の要素の配置に関する案を示すスケッチです。 ワイヤフレームの目的は、ウェブページの中身について WHAT と WHERE を決めることです。 つまり、「どんな要素をどこに配置するか」そして「ページの訪問者がどんなことができるようにするか」を決めることです。 WHAT と WHERE に集中するため、原則ワイヤフレームには「フォント」や「色」等の装飾に関する情報は含めません。
ワイヤフレームはウェブページのデザインにおける「戦略」であり大変重要なものですが、正しく利用するには作成者と評価者の双方に一定のリテラシーが求められます。 そのため、実際のウェブデザインの現場ではなおざりにされる傾向があります。
おわりに
ということで、発注前に押させておきたいウェブデザイン用語集、でした。 それぞれの説明はごくかんたんなものになっているので、詳しく知りたい方はぜひ Google 等で検索する等して調べてみてください。
ウェブサイトの制作発注を検討している方のご参考になれば幸いです :)