ページナビゲーション「ウェブサイトのユーザビリティ」

ページナビゲーション「ウェブサイトのユーザビリティ」


弊社株式会社ファンフェアファンファーレは、ホームページ(ウェブサイト)の新規ご制作をはじめ、この「ページナビゲーション」の設置や工夫といったサイトのカスタマイズやホームページ運営にかかるご相談など様々なWeb制作サービスを提供させていただいております。今回は、ページナビゲーションの設置やカスタマイズによって、ウェブサイトのユーザビリティを向上させることについてお伝えします。

情報の信頼性 SEOのその前に」で少しお伝えさせていただきましたが、サイトのCMS化によるオウンドメディア構築、CMSのカスタマイズ、静的サイトのカスタマイズのご依頼の比重が高まってきました。

ホームページ(ウェブサイト)の大事なポイントは「情報の信頼性」という面もありますが、ユーザビリティ(ウェブユーザーにとっての使いやすさ)も大切だと考えております。

ウェブサイトのレスポンシブ化によるスマートフォン最適化もその一例です。

ウェブサイト・ホームページにとってもっと大事なのはサイトの中身、つまり「コンテンツ」ですが、ユーザビリティ・サイトの操作性も外すことのできない大切な要素の一つです。ページナビゲーションの工夫はユーザービリティ向上の要素の一つです。

サイトのページナビゲーション

ホームページ・ウェブサイトのページナビゲーション

サイトカスタマイズとして、よくご依頼いただくのがナビゲーションの設置です。ご依頼いただく「サイトのページナビゲーション」は、サイト内での各ページヘの「ナビ」の役割を示す、リンクが設置されたナビゲーションです。

ページナビゲーションのカスタマイズ WordPressカスタマイズ

このナビゲーション機能は、ホームページ(ウェブサイト)のレイアウト面にも、ユーザビリティにも大きく影響を及ぼしますが、サイト内のコンテンツ同士の関連性、移動の容易性は、サイトユーザーにとっては非常に重要になります。

ホームページ制作において、サイトのメインコンテンツのグローバルナビゲーションも重要ですが、コンテンツ内部のリンクや前後ページ、関連ページへのリンクもユーザーにとっては良い工夫だと考えております。

このナビゲーションやコンテンツ内部のリンクは、SEOの観点からも、クローラビリティ(検索ボットの巡回のしやすさ)向上に貢献します。

ナビゲーション設置の手間

ナビゲーションの設置にあたり、静的サイトの場合は、各HTMLに記述していく必要がありますが、phpを利用したウェブサイトや、WordPressなどのCMSの場合、一括で設定ができるため、サイトボリュームが増大した場合は、かかる労力に差が出てきます。

一見大したカスタマイズではなさそうな、ページ間を移動するためのナビゲーション・内部リンクの設置も、ホームページ(ウェブサイト)の基本仕様とページ数によっては膨大な手間がかかるケースがあります。

サイトのユーザビリティ向上

サイトのユーザビリティ向上という意味では、まずは、ブラウザの「戻る」ボタンをなるべく使わずに済むサイトの構造が理想的です。

また、各ページへ3クリック以内に到達できるようにする工夫などが理想的なリンク構造の指針としてよくウェブの話題になっています。

できれば自動で、トップやカテゴリ、前後のページや関連ページなどへのリンクが表示されるようにサイトの構造を設計したほうが、運用は楽になります。そういった面で、ページナビゲーションが自動で挿入されるCMSの導入を推進させていただいております。

ユーザービリティの基本は、ユーザーの操作性向上やサイト内のページ移動を楽にすることになりますので、前後ページへのナビゲーションだけでなく、関連記事の紹介などもユーザービリティの向上のひとつとして考えることができます。

ページナビゲーションの工夫でユーザビリティを向上させるメリット

ページナビゲーションをしっかり設置したり、ページナビゲーションを工夫することでホームページのユーザビリティを向上させることのメリットは、ホームページの操作性・閲覧性の向上によるPV数の増加やユーザーのストレス軽減、離脱率の低下です。

同時にページナビゲーションをうまく設置することでクローラビリティも向上するため、検索エンジンがホームページ内をクロール(巡回)しやすくなり、ページ発見や更新の反映などがされやすくなるというメリットもあります。

手動で施す関連記事へのリンク

ホームページに手動で施す関連記事へのリンク

WordPress(ワードプレス)などのCMSでは、自動で関連記事を計測し、ページに反映する機能などがあります(要カスタム)。それは一つの機能として十分に利用価値があるものの、できれば、手動でコンテンツ内部に関連記事などへのリンクを施すほうが良いでしょう。

前後ページやカテゴリページのページ番号順のナビゲーションなどは問題がありませんが、コンテンツページから、関連するコンテンツページへと移動するためのコンテンツ内リンクは、関連性の高いものであるほうが理想的なため、なるべく手動でリンクを施すほうが良いでしょう。

直接リンクとカスタムフィールド

ページ内部に直接他のページへのリンクを記述するほか、ワードプレスであれば、カスタムフィールドという特殊なメタデータを設定できる仕組みがあり、そのデータを本文下部に表示させるようにテーマをカスタマイズすることも可能です。

このカスタムフィールドの仕組みを利用すれば、本文部分であるコンテンツカラム以外にもリンクを設置したりすることができます。

リンクの下線を示すかどうか

リンクの下線を示すかどうか

クリックすると、該当ページにジャンプする「ハイパーリンク」という機能は、ホームページ(ウェブサイト)の最大の強みです。

一般的にはリンク箇所はテキスト色を変更するデザインが多いのですが、デザイン面を考えて、文章などに使用される一般的なテキストと同一色にしているケースが有ります。

それでも、このリンク自体は、テキストリンクであれば、同一色であっても、初期値では該当箇所に下線が記されるようになっています。

下線を消す場合の工夫

このリンクの下線は、CSSで装飾を無くすこともできますが、同一色で下線を消すと、ユーザーはリンクか否かの判断ができないため、リンクの下線を消す場合には、リンクが施された箇所のテキスト色に若干の工夫が必要になります。

しかしながら、サイト内のテキスト色を様々なものに設定している場合は、リンクか否かの判断がつきにくい場合があります。

カーソルポインタやタイトル属性

マウスを当てた時にカーソルのビジュアルが変更されるため、リンクであることがなんとなくわかり、そして、title設定で、マウスを当てた時に説明が表示される仕組みを使って、何とかリンクであることがわかる、という方法もあります。

しかしこの仕様は、PCからの閲覧では、今でも意味があるものの、マウスを用いないタブレットやスマートフォンからのサイトアクセスの際は、機能しないという実情があります。

スマートフォンへの配慮

こういった場合は、CSSの設定でスマートフォンからの閲覧時にだけ、リンク下線を示すという方法もあります。仮にデザイン性を重視してリンクの下線を消した場合でも、スマートフォン表示の際には下線を示すという配慮です。

以前であれば、あまり問題視されなかったこのケースのユーザビリティの問題も、スマートフォンなどの普及や検索エンジンのモバイルフレンドリーアップデートにより、レイアウトだけでなく、こうしたユーザビリティの面での様々な細かいポイントまで、気を配りながら設計する必要が生じてきています。


「ページナビゲーション「ウェブサイトのユーザビリティ」」のカテゴリ Web制作・Web関連
タグ: , ,


ホームページ制作、サイトカスタマイズなどのお問い合わせ・ご依頼はこちら