いくつ知ってる？ホームページに設置されている機能の名称22選

日々ホームページを運用していると、自社のホームページについては大体熟知できていると思うようになりますが、ホームページ全体の機能についてまでしっかり把握できているでしょうか。

Web担当者であれば詳細な機能まで知らなくても問題無い場合が多いのですが、「パンくずリスト」や「OGP設定」等、ホームページ上の機能が理解出来ていなければ改善チャンスをみすみす見逃してしまう可能性があります。

今回は、ホームページ上に設置されている主要機能について解説します。
例に挙げた用語の意味がわからなかったという方はぜひチェックしてみてください。

▼ディレクターとデザイナーで読みたい資料

マーケ思考のデザイナーは強い！ 提案型デザイナーのススメ

リード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向けての資料です。成果を出すデザインにするために心がけたいポイントを制作前、制作中、提出と修正、公開後の効果検証まで一連の流れに沿ってまとめています。

1.アイコン

アイコンとは機能やコンテンツ内容を図形で表したものを指し、このようにメニュー表示に使われるのが一般的です。

2.ファビコン

ファビコンとは、Webブラウザでホームページを開いた際、タブ部分に表示されるアイコンを指します。
タブブラウザ（1つの画面で複数のページが開けるブラウザ）で複数のタブを開いた時に、ファビコンはページを判別する際の目印となります。

3.エントリーフォーム

「入力フォーム」や「お問い合わせフォーム」とも呼ばれます。
ユーザーの何かしらの情報を入力していただいて情報を取得できる機能を指し、ほとんどの場合、エントリーフォームがコンバージョンポイントとなっています。
エントリーフォームは入力が簡単であればあるほどコンバージョン率が高くなるため、取得したい情報と入力の簡易性のバランスを見ながら設定する必要があります。
ちなみにferretでは、極力会員登録の手間を省くため、メールアドレスとパスワードのみの登録でコンバージョンできるよう設定した他、FacebookやTwitterに既にアカウントをお持ちの方はそこから連携させるだけで登録することも可能にしています。

4.カーソル

指示や操作の対象を指し示すための機能です。
マウスで操作されることも多いので「マウスポインタ」と呼ばれる場合もあります。
なにかしらの操作ができる対象は、カーソルを合わせると色が変わる下線が惹かれる等の変化が起きる仕様にしなければユーザーにどのような操作が可能なのかを伝えることができません。
また、カーソルでクリックできる範囲があまりにも小さいと、クリック出来ないユーザーは諦めてしまう可能性もあります。

5.マウスオーバー

ホームページ内の画像やテキストにカーソルを載せた時に、色や画像が変わる仕様をマウスオーバーと呼びます。
ユーザーに「クリックできる」と認識してもらえるような仕様でなければ意味がなく、クリック率にも影響する部分です。

6.TOPページ

ホームページの階層の最上部に位置するページをTOPページと呼びます。
Google検索エンジンのクローラーは、まずTOPページに入り、そこから各ページを巡回してインデックス（検索エンジンへの登録）していきます。

7.下層ページ

TOPページ以外のページを下層ページと呼びます。
ホームページは基本的にツリー構造となっており、頂点にTOPページがあり、そこから下層ページが枝分かれするように存在します。

8.カラム

ホームページデザインにおけるカラムは縦の区切りを指しており、サイドメニューを1カラムか2カラム設置し、メインコンテンツで1カラムの2～3カラム構成が一般的です。
あまり分割し過ぎると1つ1つのカラムが見づらくなってしまうため、そこもバランスが重要です。

画像共有サイトのPinterestは6カラムの構成を採用しており、一画面で閲覧できる画像の量を大幅に増やしています。

https://jp.pinterest.com/

9.カルーセル

カルーセルとはくるくる回転する様子を表す言葉で、ホームページにおいては、画像が横にスライドする機能を指します。ホームページのTOPページによく利用される技術です。

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

ページ上部に設置されるメニューで、全ページに表示されます。
ホームページ内の主要コンテンツを入れ込むもので、メニューを詰め込み過ぎると情報が見づらくなってしまいます。

11.コンテンツ

コンテンツは「中身」という意味で、ホームページ内にあるあらゆる情報の総称です。
一般的にはテキスト情報を指す場合が多く、ホームページ内の記事そのものを指す場合や、テキストのみを指す場合もあります。

12.サイトマップ

サイト全体の構造がわかる図を指します。
また、Search Console（旧ウェブマスターツール）においては、Googleのクローラーにインデックスさせたいページのリストを指します。

13.サムネイル

サムネイルとは、一覧表示用に縮小した画像を指します。
本記事への誘導を目的としているため、ほとんどの場合リンクが付けられており、サムネイルをクリックするとリンクに飛ぶ仕様に自動生成されます。

14.バナー

ホームページ上に表示されるリンク付きの画像をバナーと呼びます。
ホームページの両端や上部など、メインコンテンツを取り囲むように設置されます。
広告用のバナーには他サイトへ誘導するリンクが貼られ、インプレッション（表示回数）やクリックされるごとに課金が発生します。

15.タグ

タグとは元々「付箋」という意味で、Web制作においてはHTMLにタグコードを書き込むことによって、文字装飾やリンク挿入などの指示を与えることができます。
また、タグの中でもtitleタグなどはSEOにおいても非常に重要な役割を果たします。

16.テーブル

ここでのテーブルは「表」を指します。
記事内に表を挿入するときは、HTMLやマークダウンなどでテーブルを組む必要があります。

17.テキスト

Web上に表示可能な文字情報をテキストと呼びます。意味を持つ文字の羅列を指し、日本語や英語などの一般的な言語に加え、Ruby等のプログラミング言語の表記もテキストと呼ばれます。

18.ドメイン

ホームページのURLの、「http://(もしくはhttps://)」以降の表記をドメインと呼びます。
インターネット上でのホームページの住所を示すのはIPアドレスという９桁の数列ですが、それをコンピュータではなく人間にとって理解しやすく表記したのが「ドメイン」です。
以前は英語のみで構成されていましたが、現在は日本語ドメインも登場しています。

19.バグ

ホームページの表示が崩れたり動作がうまくいかない等、システムに何かしらの不備を総称してバグと呼びます。

20.パンくずリスト

パンくずリストとは、今閲覧しているページは、ホームページ内のどの位置にいるのかをわかりやすくするために表示されるリストです。
パンくずリストは内部リンクとしてカウントされるため、適切に設置すればSEOの効果も見込めます。

21.ポップアップ

ホームページ上で特定の操作を行った際に、最前面に飛び出すように表示されるウィンドウを指します。
ポップアップが出ている間は元の画面の操作ができない仕様になっている場合が多く、決済の確認やエラー表示など、慎重に行う必要のある操作の直前に利用されることが多い機能です。

22.Flash

Adobe社が開発したアニメーション作成ソフトです。
静的なコンテンツが主流だった時代に、動的でインパクトのあるFlashはリッチコンテンツとして一時期流行しましたが、動作が重くなる原因になることが多く、iPhoneがFlash対応しない仕様ということもあり少し敬遠されがちな技術となっていました。
さらに、先日Googleも、GoogleChromeに、Flashコンテンツの動作を停止する機能を実装しました。

参考：
GoogleChromeがウェブページ上にあるメイン以外のFlashコンテンツを停止する機能を公開 - GIGAZINE

まとめ

ホームページの機能を知ることは、サイト改善を行ううえではもちろん、制作陣とのコミュニケーションを取る際にもとても重要になります。

ホームページを運用してくなかで細かなデザインを修正することは幾度と無くありますが、修正を依頼する時、修正箇所の名称や機能を知らなければ依頼内容が曲解されてしまう可能性があります。
できるだけスムーズに依頼できるようにするためにも、制作側との共通言語を持つことは重要です。

ちょっとした機能の改善の蓄積が、大きな成果に繋がっていきます。
自社ホームページの機能を隅々まで理解したうえで、どこに改善点が潜んでいるかを探しましょう。

Web制作についてさらに知る

コンテンツマーケティングの基本と実践のポイントが学べる本8選

ブログを開設したものの、当初想定していた成果が出せず、運用に課題を感じているWeb担当者もいるのではないでしょうか。コンテンツマーケティングが改善する手段として活用できるでしょう。今回は、コンテンツマーケティングの基本と運営のポイントが学べる書籍を11冊まとめました。実施する目的の決め方、コンテンツのネタ探しや、集客のノウハウなどが学べるでしょう。

デザイナーとエンジニアに聞いた！一緒に働くWebディレクターに求めたい「10」の知識とスキル

プロジェクト全体のディレクションを行うWebディレクターの仕事は、進捗管理、人選、スケジュール調整、品質管理と多岐に渡ります。また、それどころか場合によっては取材・撮影までかかわることも珍しくなく、仕事内容が幅広く、1人ひとり業務の管理・進行方法も異なるので周囲の人たちと上手くいかない場面に遭遇することも少なくありません。 そこで今回は、一緒に働くケースの多いデザイナー職の方に、Webディレクターに持ち合わせていてほしい「10個」の知識とスキルをご紹介します。

▼ディレクターとデザイナーで読みたい資料

マーケ思考のデザイナーは強い！ 提案型デザイナーのススメ

リード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向けての資料です。成果を出すデザインにするために心がけたいポイントを制作前、制作中、提出と修正、公開後の効果検証まで一連の流れに沿ってまとめています。