無料お見積りBLOG
ブログ
マウスオーバーって何？｜ホームページの機能紹介
＜こちらの「記事」は、下記のような疑問のお役立ち情報としてご参照ください＞
※操作説明や機能説明は申し訳ございませんが行っておりません…
・ホームページにはどんな機能があるの？
・「マウスオーバー」って何？
ホームページは様々な機能をもったパーツで構成されています。
今回はそんなホームページの各機能を画像付きでわかりやすくご紹介します。
※2021年8月16日現在の情報です
※参考画像には弊社WWGのブログページを使用しております。
実際に各機能の挙動を確認したい場合は下記ページをご参照ください。
https://wwg.co.jp/blog
※画像はクリックすると別タブで拡大表示されます。
目次
1.様々な機能
①グローバルナビゲーション
グローバルナビゲーションは上図の赤枠部分のように、ページ上部に設置されるメニューのことで、ホームページ内の全ページに表示されるのが特徴です。
ホームページのコンテンツの中でも特に重要な項目を入れますが、あまり数が多くなると見にくくなってしまうので、バランスを考えながら何をグローバルメニューに含めるか吟味するのがよいデザインだと言えます。
②ハンバーガーメニュー
上図の赤枠の部分のように、メニューを展開する際に使う「≡」のような縦並びの3本線のことを、その形がハンバーガーのように見えることから「ハンバーガーメニュー」と呼びます。
特にスマートフォンなどの幅が小さい画面では、ナビゲーションメニューを表示するだけのスペースが確保できないので、ページ制作時にスマートフォンで見た場合に、ハンバーガーメニューになるように設定をすることもあります。
ハンバーガーメニューは、タップした時だけグローバルメニューが表示される仕組みになっているため、スマートフォンなどのモバイル端末で見る際の邪魔にならないという利点があります。
③パンくずリスト
今見ているページが、ホームページ全体のどの部分に位置するのかを示すリストのことをパンくずリストと言います。
※例：「TOP > コラム > ホームページデザインについて」
ホームページの制作実績を探しているユーザーが、Google検索からとあるホームページ制作会社の「配色について」のコラムにアクセスした場合を考えてみます。
その際、画面上部に「TOP > コラム > ホームページデザイン > 配色について」のようなリストがあった場合、どのような効果が期待できるでしょうか。
このパンくずリストがあることで、ユーザーに「今はコラム内のページにいて、制作実績はTOPページからアクセスできそうだ」というようにイメージしてもらいやすくなると考えられます。
また、制作実績のページを見たユーザーが、その後「配色について」のページをもう一度見たいという場合にコラムからたどっていけばよいとわかります。
このように、ユーザーが様々なページを移動する際に、どのメニューからアクセスすればよいのか迷わずに済むのがパンくずリストのメリットだと言えます。
2.マウスオーバーについて
ここまでホームページ全体の構造を把握するのに役立つ機能を紹介しました。
次に、ユーザーのクリックなどの行動を促す機能として「マウスオーバー」をご紹介します。
マウスオーバーは、画像やアイコン、テキストにマウスカーソルをのせた際に、画像や色が変わる仕組みのことです。
①アイコンに使う場合
まずは、アイコンの色が変わる例をご紹介します。
ブログ一覧のページで「COLUMN（コラム）」の上に、マウスカーソルをのせます。
「COLUMN」の部分がオレンジ色に変わりました。
このように色が変わることで、ユーザーにクリックできる部分だと認識してもらえるため、クリック率の向上が期待できる点がマウスオーバーの特徴です。
②画像に使う場合
今度は画像に対してのマウスオーバーを見ていきます。
上図のブログ一覧のページで「ワード・エクセルだけじゃない！｜Microsoftの便利なソフト」というタイトルのサムネイル画像があります。
そこにマウスカーソルを合わせると、画像が少し拡大されました。
このマウスオーバーも、アイコンの色変更と同じように、画像が拡大することでクリックできる部分だと視覚的にわかりやすくしています。
それに加え、人は動きのあるもの興味を示しやすい傾向があるため、このような動きを加えることで、クリックしてもらいやすくなる点もマウスオーバーの大きなメリットだと言えます。
3.まとめ
今回はホームページの機能について詳しく調べてみました。
まとめると、
グローバルメニュー、ハンバーガーメニュー、パンくずリストは、ユーザーが「ページ全体の構造を把握するのに役立つ機能」です。
それに対してマウスオーバーは、ユーザーがクリックする可能性が高くなるという点で、クリック先のページを見てもらえるように「ユーザーの行動を促すための機能」だと言えます。
当記事がホームページの機能について深く知るきっかけになれば幸いです。
ライター：井上
WWGではホームページ制作・リニューアルに関するさまざまな相談をサポートさせて頂いております。お気軽に下記までお問い合わせください。
愛知 県内から 名古屋 を中心にホームページ制作を行っている会社
株式会社WWG（ダブルダブルジー）
愛知県名古屋市中村区名駅5-16-17 花車ビル南館5F
TEL： 052-485-6846
※ ホームページ制作や活用サポートのお問い合わせはコチラから
おすすめの記事
人気の記事
おすすめ記事
アーカイブ
- 2023年 12月 (13)
- 2023年 11月 (10)
- 2023年 10月 (10)
- 2023年 9月 (9)
- 2023年 8月 (9)
- 2023年 7月 (10)
- 2023年 6月 (9)
- 2023年 5月 (10)
- 2023年 4月 (8)
- 2023年 3月 (9)
- 2023年 2月 (7)
- 2023年 1月 (9)
- 2022年 12月 (10)
- 2022年 11月 (7)
- 2022年 10月 (6)
- 2022年 9月 (6)
- 2022年 8月 (6)
- 2022年 7月 (4)
- 2022年 6月 (4)
- 2022年 5月 (5)
- 2022年 4月 (5)
- 2022年 3月 (10)
- 2022年 2月 (10)
- 2022年 1月 (11)
- 2021年 12月 (12)
- 2021年 11月 (13)
- 2021年 10月 (13)
- 2021年 9月 (13)
- 2021年 8月 (14)
- 2021年 7月 (14)
- 2021年 6月 (14)
- 2021年 5月 (13)
- 2021年 4月 (13)
- 2021年 3月 (18)
- 2021年 2月 (12)
- 2021年 1月 (14)