ざっくりホームページ制作関連 用語辞典 その1:ページのパーツ編

ざっくりホームページ制作関連 用語辞典 その1:ページのパーツ編

こんにちは。デザイナーのかわさきです。

6月に入って急に蒸し暑くなりましたが、私の席は例年クーラーの効きが異常に良く、みんなが暑いと言っている中寒さに震えるという贅沢な悩みを抱えております…。
誰か室内の空調を均等に効かせる方法などご存知でしたら教えてください><

さて、ホームページの制作でやりとりをしている時、「この言葉ってどういう意味だろう?これはなんて伝えたらいいのかな?」と思われることはないでしょうか?

と、言うわけで「ホームページ制作に関する用語」を出来る限り分かりやすく、超ざっくりとご説明してみようと思います。

第一弾として今回は「ページのパーツ編」をお送りします!
修正の指示を出すときなどにお役に立てば幸いです。

今回解説するパーツ

webページには色々なレイアウトや構成がありそれぞれ独自の見せ方をしているように見えますが、基本的にはある程度構造が決まっており、決まったパーツを様々な見せ方で展開しています。

今回はマグネッツのサイトを見本にご説明します。

01

ヘッダー

サイトの頭に当たる部分です。

サイトを開いた時必ず見える位置なので、多くのサイトではサイトの名称・お問い合わせ先の電話番号などが記載されています。

グローバルナビゲーション

各ページに共通して表示される、サイトの主なページへのリンクを集めたメニューのこと。

webサイトによっては膨大なページを保有することがありますが、グローバルナビゲーションはそれぞれをまとめたページヘのショートカットとして機能します。

サイトを開いた時にわかりやすい、ヘッダーの下に位置することが多いです。

メインビジュアル(MV)、キービジュアル

webページで一番目立つ位置に配置されたイメージのこと。

サイトやページを視覚的に表した写真やイラスト、また、キャッチコピーなどを掲載したものが一般的です。

以前はFlashを使用したアニメーションなど動きのあるイメージを使用しているサイトが多かったですが、近年はJavaScriptを使用して、スライドやフェードアウトなどの動きをつけるサイトが増えています。

バナー

英語では「banner」、そのまま訳すと旗や垂れ幕という意味になります。

webサイトでの意味合いは画像を使用したリンク用の画像のことになります。
主に広告や他のサイトの紹介、そのサイト内で目立たせたいコンテンツへの誘導などに使用されます。

一般的に広告に使用されることが多いため、バナー=広告 という認識があり、実は目立たせているのに逆にクリック率が低いことが多い…という悲しい現実もあります…。

ボタン

クリックを促すために視覚的にデザインを施したリンクのこと。

ぷっくりとした視覚効果をつけたり、マウスを上にした際に見た目を変えたり(ホバーアクションといいます)、「ここは押せる!」と分かりやすくデザインするのが一般的です。

フッター

サイトの足に当たる部分です。

主にコピーライトやテキストのグローバルナビゲーション(フッターリンクとも呼びます)など、基本的に全ページ共通で定形の情報を掲載します。
ページの先頭に戻りやすいよう「トップへ戻る」といったボタンを配置しているサイトも多いです。

コピーライト

サイトの著作者情報です。基本的にサイトのフッターに掲載されます。

書かないと無断転載OKとなる…ということは決してありませんが、サイトの著作者をわかりやすくするため、また、サイトの無断転載を抑止する意味で入れられます。

一般的に
「© Magnets Co.Ltd.」
「Copyright (C) 2014 Magnets Co.Ltd. All Rights Reserved.」
といった風に、記載します。

ページタイトル

一般的に下層ページ(トップページ以下のページ)ではそのページのタイトルやカテゴリーを分かりやすいように表示します。見出しの一部とも言えます。

メインビジュアルを兼ねて画像を使用したものやテキストのみでシンプルに示したものなど、様々です。

パンくずリスト

下層ページで上層ページヘのリンクを掲載したナビゲーション。

基本的にどのページでも同じ位置にあり、今現在どのカテゴリーのどのページを見ているのかを分かりやすく表示しています。
各ページの名称間は「>」で区切られていることが多いです。

カラム

英語では「column」=「縦の列」の通り、webページの縦区切りのこと。

縦区切りのの数によって1カラム、2カラム、3カラム…と呼びます。一般的なサイトは2カラム(メインカラム、サイドカラム)で区切られていることが多いです。

メインカラムにはそのページの主なコンテンツ内容、サイドカラムにはそのページと同じカテゴリーに属するページヘのリンク、お問い合わせへのリンクや電話番号などサブ的な情報が入ることが多いです。

最近はスマートフォンでの表示にも対応しやすく、大きなビジュアルなどを使用して印象的なページをつくりやすい1カラムのサイトも増えてきています。

見出し

本文の頭に来るタイトルです。

webコンテンツは「見出し」→「テキスト」の組み合わせで構成されており、文脈が変わる場合は見出しを入れて区切ります。
入れ子の構造になることもあり、その際は「見出し1」「見出し2」「見出し3」…と言った風に強弱をつけます。本や論文と同じと考えると分かりやすいですね。

テキスト

メインとなるコンテンツ部分です。「テキスト」と書いてはいますが、画像や動画などが入ることもあります。

以上、なんともざっくざくでお送りしました

本当はドメインやサーバーなど、インターネットに関連する情報もまとめてお送りしようと思ったのですが予想以上に長くなりそうだったので分けさせていただきました。こちらが好評なようでしたらまた続きを書きたいと思います。

改めて用語について考えてみると、自分でも勉強になりますね。

一部呼び名について、世界共通ではない箇所もあるので、「うちではそう呼ばないよ!」という部分があるかもしれませんがその点はご了承ください。

こんな用語がわかりにくいなどありましたら、リクエストお待ちしております。

同じカテゴリー(WEB制作・デザイン)の記事