ホームページ制作において、ページナビゲーションの工夫は、ホームページ（ウェブサイト）のユーザビリティを向上させるのに一役買います。
ページナビゲーションをうまく設置することで、ホームページ（ウェブサイト）のPV数を向上させることもできますし、検索エンジンのクローラビリティを向上させることもできます。
株式会社ファンフェアファンファーレは、ホームページ（ウェブサイト）の新規ご制作をはじめ、この「ページナビゲーション」の設置や工夫といったサイトのカスタマイズやホームページ運営にかかるご相談など様々なWeb制作サービスを提供させていただいております。今回は、ページナビゲーションの設置やカスタマイズによって、ウェブサイトのユーザビリティを向上させることについてお伝えします。
「情報の信頼性 SEOのその前に」で少しお伝えさせていただきましたが、サイトのCMS化によるオウンドメディア構築、CMSのカスタマイズ、静的サイトのカスタマイズのご依頼の比重が高まってきました。
ホームページ（ウェブサイト）の大事なポイントは「情報の信頼性」という面もありますが、ユーザビリティ（ウェブユーザーにとっての使いやすさ）も大切だと考えております。
ウェブサイトのレスポンシブ化によるスマートフォン最適化もその一例です。
ウェブサイト・ホームページにとってもっと大事なのはサイトの中身、つまり「コンテンツ」ですが、ユーザビリティ・サイトの操作性も外すことのできない大切な要素の一つです。ページナビゲーションの工夫はユーザービリティ向上の要素の一つです。
今あるホームページ（ウェブサイト）もページナビゲーションを少し工夫するだけで、PV数や滞在時間、そして何よりホームページのWebマーケティング効果を高めることができます。
サイトのページナビゲーション
サイトカスタマイズとして、よくご依頼いただくのがナビゲーションの設置です。ご依頼いただく「サイトのページナビゲーション」は、サイト内での各ページヘの「ナビ」の役割を示す、リンクが設置されたナビゲーションです。
WordPressでは大半のテーマで、前後ページへのページナビゲーションが設置されていますが、基本的には投稿日時順の並びのページナビゲーションです。
日記のようなブログ利用であればそれでも十分かもしれませんが、SEOを考えたり、PV数を向上させたりといったことを考えた場合、コンテンツテーマごとの関連性に応じたページナビゲーションを設置していくことが重要になります。
ページナビゲーションのカスタマイズ WordPressカスタマイズ
ナビゲーション機能によるコンテンツ同士の関連性、移動の容易性
このナビゲーション機能は、ホームページ（ウェブサイト）のレイアウト面にも、ユーザビリティにも大きく影響を及ぼしますが、サイト内のコンテンツ同士の関連性、移動の容易性は、サイトユーザーにとっては非常に重要になります。
ホームページ制作において、サイトのメインコンテンツのグローバルナビゲーションも重要ですが、コンテンツ内部のリンクや前後ページ、関連ページへのリンクもユーザーにとっては良い工夫だと考えております。
このナビゲーションやコンテンツ内部のリンクは、SEOの観点からも、クローラビリティ（検索ボットの巡回のしやすさ）向上に貢献します。
ナビゲーション設置の手間
ナビゲーションの設置にあたり、静的サイトの場合は、各HTMLに記述していく必要がありますが、phpを利用したウェブサイトや、WordPressなどのCMSの場合、一括で設定ができるため、サイトボリュームが増大した場合は、かかる労力に差が出てきます。
一見大したカスタマイズではなさそうな、ページ間を移動するためのナビゲーション・内部リンクの設置も、ホームページ（ウェブサイト）の基本仕様とページ数によっては膨大な手間がかかるケースがあります。
こうした面を考えるとユーザビリティ向上やPV数向上、ひいてはSEOを考慮対象とした場合にページナビゲーションの設置を検討したとしても、一般的な静的HTMLサイトでホームページ制作を行っている場合には、ページナビゲーション設置の作業量の多さに辟易してしまう可能性も考えられます。
サイトのユーザビリティ向上
ホームページ制作におけるサイトのユーザビリティ向上という意味では、まずは、ブラウザの「戻る」ボタンをなるべく使わずに済むサイトの構造が理想的です。
また、各ページへ3クリック以内に到達できるようにする工夫などが理想的なリンク構造の指針としてよくウェブの話題になっています。
ユーザービリティを向上させることは、ユーザーのストレスを軽減し、全体的なPV数向上にもつながる可能性を持っています。またページナビゲーションを筆頭にリンク関連の工夫は直接的に内部リンクに関するSEO効果も期待することができため、一石二鳥であると考えることができます。
できれば自動でトップやカテゴリー、前後のページや関連ページなどへのリンクが表示されるようにサイトの構造を設計した方が運用は楽になります。
そういった面で、ページナビゲーションが自動で挿入されるCMSの導入を推進させていただいております。結果が同じか、それほど変わらないのであれば、そうした手間はなるべく省き、他のことに注力したほうが良いと考えております。
ユーザービリティの基本は、ユーザーの操作性向上やサイト内のページ移動を楽にすることになりますので、前後ページへのナビゲーションだけでなく、関連記事の紹介などもユーザービリティの向上のひとつとして考えることができます。
ページナビゲーションの工夫でユーザビリティを向上させるメリット
ページナビゲーションをしっかり設置したり、ページナビゲーションを工夫することでホームページのユーザビリティを向上させることのメリットは、ホームページの操作性・閲覧性の向上によるPV数の増加やユーザーのストレス軽減、離脱率の低下です。結果的にホームページの滞在時間も向上します。
同時にページナビゲーションをうまく設置することでクローラビリティも向上するため、検索エンジンがホームページ内をクロール（巡回）しやすくなり、ページ発見や更新の反映などがされやすくなるというメリットもあります。また、SEO内部対策として内部リンクによるSEO効果も同時に期待することができます。
ページナビゲーションの設置や工夫は、ホームページのWebマーケティング効果を高めるためのメリットがたくさんあります。
リンク同士の距離や大きさ、コントラストなどを工夫する
ページナビゲーションに限らずですが、リンク同士の距離やリンクの大きさ、背景色と前景色の十分なコントラスト比などを工夫することで、実際のユーザーの操作が楽になります。「リンクかどうかをわかりやすくする」ということと同時にリンクの操作性を向上させることも重要です。
リンク同士のあまりに近すぎると誤クリック、誤タップの原因になります。また近年ではSEOの要素としてリンク同士の距離が近すぎることや、リンクのフォントサイズが小さすぎること、リンクにおける背景色と前景色に十分なコントラスト比がないことはマイナス要因となります。
手動で施す関連記事へのリンク
WordPress（ワードプレス）などのCMSでは、自動で関連記事を計測し、ページに反映する機能などがあります（要カスタム）。それは一つの機能として十分に利用価値があるものの、できれば、手動でコンテンツ内部に関連記事などへのリンクを施すほうが良いでしょう。
前後ページやカテゴリページのページ番号順のナビゲーションなどは問題がありませんが、コンテンツページから、関連するコンテンツページへと移動するためのコンテンツ内リンクは、関連性の高いものであるほうが理想的なため、なるべく手動でリンクを施すほうが良いでしょう。
こうしたコンテンツ内リンクの設置は、SEO内部対策としての効果もありますが、何よりコンテンツの内容の理解をより深く伝えるために、関連した情報を示すというユーザーへの配慮として行うことが大原則です。
直接リンクとカスタムフィールド
ページ内部に直接他のページへのリンクを記述するほか、ワードプレスであれば、カスタムフィールドという特殊なメタデータを設定できる仕組みがあり、そのデータを本文下部に表示させるようにテーマをカスタマイズすることも可能です。
このカスタムフィールドの仕組みを利用すれば、本文部分であるコンテンツカラム以外にもリンクを設置したりすることができます。
基本的にはWordPressの投稿のコンテンツ部分にリンクを設置するだけで十分ですが、「ここからここまでが記事本文です」ということを示すアーティクルマークアップの外に関連記事リストを設置する場合などは、こうしたカスタムフィールドの利用によるWordPressカスタマイズが必要になります。
SEOの方針にもよりますが、直接的な関連性を示す場合はコンテンツ内の直接リンク、補助コンテンツの掲示という面でリンク設置をする場合は、カスタムフィールドなどを利用して枠外にリンク群を設置すると良いでしょう。
リンクの下線を示すかどうか
クリックすると、該当ページにジャンプする「ハイパーリンク」という機能は、ホームページ（ウェブサイト）の最大の強みです。
一般的にはリンク箇所はテキスト色を変更するデザインが多いのですが、デザイン面を考えて、文章などに使用される一般的なテキストと同一色にしているケースがあります。
それでも、このリンク自体は、テキストリンクであれば、同一色であっても、初期値では該当箇所に下線が記されるようになっています。
該当テキスト箇所が「リンクであること」を示すことは、ユーザーの操作性に影響を与えます。
特にスマートフォンやタブレット端末の場合は、単純なテキストであるのか、リンクであるのかを下線などで示していく方が良いでしょう。
メニューであるとひと目で分かるような場所であるならば、ユーザーが迷うことも少ないかもしれませんが、コンテンツ内に設置した文中のテキストリンクについては、テキストとの区別のために何かしらの工夫をする必要があると考えられます。
下線を消す場合の工夫
このリンクの下線は、CSSで装飾を無くすこともできますが、同一色で下線を消すと、ユーザーはリンクか否かの判断ができないため、リンクの下線を消す場合には、リンクが施された箇所のテキスト色に若干の工夫が必要になります。
しかしながら、サイト内のテキスト色を様々なものに設定している場合は、リンクか否かの判断がつきにくい場合があります。
カーソルポインタやタイトル属性
マウスを当てた時にカーソルのビジュアルが変更されるため、リンクであることがなんとなくわかり、そして、title設定で、マウスを当てた時に説明が表示される仕組みを使って、何とかリンクであることがわかる、という方法もあります。
しかしこの仕様は、PCからの閲覧では、今でも意味があるものの、マウスを用いないタブレットやスマートフォンからのサイトアクセスの際は、機能しないという実情があります。
スマートフォンへの配慮
こういった場合は、CSSの設定でスマートフォンからの閲覧時にだけ、リンク下線を示すという方法もあります。仮にデザイン性を重視してリンクの下線を消した場合でも、スマートフォン表示の際には下線を示すという配慮です。
以前であれば、あまり問題視されなかったこのケースのユーザビリティの問題も、スマートフォンなどの普及や検索エンジンのモバイルフレンドリーアップデートにより、レイアウトだけでなく、こうしたユーザビリティの面での様々な細かいポイントまで、気を配りながら設計する必要が生じてきています。
（初回投稿日 2016年1月30日）
