ホームページの制作をデザイン会社に依頼したけれど、担当者が話している用語がさっぱりわからなくてお困りではありませんか。用語集1は「ホームページのデザインや構成に関わる用語」と「ホームページの表示場所、表示方法に関わる用語」の2部構成でご紹介します。この用語を知っておけば「イメージと全然違う！」というトラブルを避けられますよ。
目次
ホームページのデザイン、構成に関わる用語
サイトマップ
階層
ワイヤーフレーム
カラム
デザイン、デザインカンプ
コーディング
グローナルナビ
ファーストビュー
レスポンシブデザイン
LP
ブログ
ホームページの表示場所、表示方法に関わる用語
ヘッダー、フッター、サイドバー
メインビジュアル
スライドショー
アコーディオンメニュー
サムネイル画像
ラジオボタン
チェックボックス
セレクトボックス
見出し、リード、本文
パンくず
ホームページのデザイン、構成に関わる用語
サイトマップ
ホームページ全体の構造を示すためのもの。階層ごとに、ページタイトルや内容や仕様を記載します。ホームページの地図のようなもので、ユーザー向けのサイトマップと、クローラー向けのサイトマップがあります。
「サイトマップをお送りします。ページ数をご確認ください」のように使われます。
階層
ホームページはクリックしてページ遷移しますね。階層とは、その深さのことです。同じジャンルのカテゴリは同じ階層にまとめます。階層があまり深い構成は、目的ページにたどり着くまでに時間がかかるので好まれません。目安は「トップページから3クリック以内で到達できるかどうか」です。ほとんどのページは3階層以内に収めるとよいということです。
家電メーカーのホームページで例えると、下記のようなイメージになります。
第1階層 トップページ
↓
第2階層 カテゴリページ（冷蔵庫、洗濯機、テレビなど）
↓
第3階層 洗濯機のページ
「第二階層に、新しく新着情報のページを追加してください」のように使ってみましょう。
ワイヤーフレーム
ホームページ上で「何を、どこに、どれくらいの大きさで」配置するのかを決める設計図です。デザインに入る前の大雑把なラフです。メニューやボタンの位置を入れ、ここで動線を確認します。
「ワイヤーフレームのメニューに追加したいものがあります」のように使ってみましょう。
カラム
段組みのことで、ホームページのレイアウトの基礎を決めるものです。ホームページの用途や情報量などによりカラム数が決められます。最近ではビジュアルを大きく見せられるシングルカラムが人気ですが、たくさんの商品ページを楽に行き来させたいなら2カラムがいいですし、3カラムはブログでは定番の形状です。
「お客様の用途ですと、2カラムがおすすめです」のように使われます。
デザイン、デザインカンプ
実際に完成した時の見た目の通りに、ロゴ、メニューボタン、バナー、画像、見出しなどをデザインしたもの。この段階で文章まで完成している場合と、ダミー文章で提出される場合があります。文章は修正が効くので、これが提出された段階では、デザインのみを見ましょう。
「デザインカンプをお送りします。カラーやテイストをご確認ください」のように使われます。
コーディング、コーダー
CSS、HTML、JavaScript、PHPなどのプログラミング言語を使い、ソースコードを記述していくことをいいます。デザインカンプは、デザイン用のソフトを使って作った「見た目の設計図」です。これをWebブラウザで見られるようにしていくのがコーディングです。この作業をする人のことをコーダーと呼びます。
「コーディングに入ります。これ以降のデザイン変更は受けかねますので最終確認をお願いします」のように使われます。
グローナルナビ
ホームページ上に置かれるメニューのことで、基本的に全ページに共通表示されるもののことをいいます。「グロナビ」と略したりします。
「ターゲットが高齢者なので、グロナビはもう少し大きく目立たせたいです」のように使ってみましょう。
ファーストビュー
ユーザーがホームページに訪問したときに最初に目に入る部分のことをいいます。ファーストビューを2〜3秒見て、人はページに留まるかどうかを決めるので、ここはとても大事なところ。
「このファーストビューはちょっと古いし情報が少ないと思います」のように使ってみましょう。
レスポンシブデザイン
ユーザーが使用するデバイス（パソコン、タブレット、スマートフォンなど）の画面サイズに応じて、見やすい表示に自動的に切り替わるデザインのことをいいます。PCサイトとモバイルサイトを別に作らなくても、同じURLでサイトを見られます。
「この見積もり、レスポンシブですよね？」のように使ってみましょう。
LP（ランディングページ）
LP（エルピーと読みます）とは、広い意味ではユーザーが最初に訪問したページのことをいいますが、ホームページ制作では商品やサービスの説明、問い合わせや購入までが、1ページで完結しているページを指します。健康食品やダイエット商材の名前で検索してみると、検索上位に出てくるのはLPばかりです。やってみてください。
「このページをLPにすると、見積もりはいくら変わりますか？」のように使ってみましょう。
ブログ
簡単に時系列で記事を投稿できる仕組みのこと。ブログ＝芸能人ブログなどの「日記」をイメージされるかもしれませんが、デザイン次第では日記以外にもたくさんの用途があります。例えば、お客様事例、お客様の声、メディア情報、セミナー情報、イベント情報など。ブログを入れておくと、運用を制作会社に丸投げせずに自分で記事更新ができます。
「ブログは2種類欲しいです。最新情報と事例で使い分けたいです」のように使ってみましょう。
ホームページの表示場所、表示方法に関わる用語
ヘッダー、フッター、サイドバー
ヘッダーはホームページの画面上部に表示されている部分、フッターは画面下部に表示される部分、サイドバーは画面左右に表示される縦長の部分をいいます。
「会社情報はフッターにまとめるので、ページはなくていいです」のように使ってみましょう。
メインビジュアル
ホームページの主役となるイメージ画像のことをいいます。トップページのファーストビューに置いた一枚画を指すことが多いです。
「メインビジュアルを、もっと知的な感じに変更したいです」のように使ってみましょう。
スライドショー
画像や文章などを、連続して切り替え表示させる機能のことをいいます。昔はメインビジュアルをスライドにする例が多かったので「最近は流行らない。ダサい」と言われていますが、実はそんなことはありません。紙芝居のようなスライドだけではなく、おしゃれなスライドショーの見せ方もあります。たとえば下のサンプルのようなのです。
「推したい商品がどうしても絞れないので、画像2点をスライドにしたいです」のように使ってみましょう。
アコーディオンメニュー
ナビゲーションメニューのひとつで、選択した項目がアコーディオンのように広がって詳細なメニューを表示することをいいます。
「メニューがごちゃついているので、アコーディオンにしたいです」のように使ってみましょう。
サムネイル画像
ページを開かなくても「どのような写真」なのかがわかるように縮小された画像のことをいいます。
「サムネイルを正方形にしたいです」のように使ってみましょう。
ラジオボタン
選択入力ツールのひとつで、中抜きの円形ボタンのことをいいます。
「問い合わせフォームにラジオボタンをつけたいです」のように使ってみましょう。
チェックボックス
ラジオボタンと同じく選択入力ツールのひとつで、中抜きの四角いボックス形のボタンのことをいいます。「規約を読み、同意しましたか？」といった注意を促すものや、複数選択させる時に用いられます。
「チェックボックスで複数選べるようにしたいです」のように使ってみましょう。
セレクトボックス
チェックボックスと同じく洗濯入力ツールのひとつで、選択肢の表示がプルダウン形式やリスト形式になっているものをいいます。
「自由選択は書きにくいと思うので、セレクトボックスにしたいです」のように使ってみましょう。
見出し、リード、本文
見出しは本文の前に置く、文章の内容を示すもの。見出しはキャッチコピーも兼ねます。リード（導入文）は記事の概要文のことをいい、見出しの下、本文の手前に置きます。本文は本文です。
「事例の見出しはお客様名を入れるので、長くなる可能性があるので、40文字のフォーマットにしてください」のように使ってみましょう。
パンくず
ユーザーがどのページを閲覧しているのかがひと目でわかるようにした表示のことをいいます。『ヘンゼルとグレーテル』でグレーテルが帰り道がわかるようにパンをちぎって道に置いたエピソードが名前の由来です。迷子を防ぐナビです。
「パンくずが間違っているので修正してください」のように使ってみましょう。
