ホームページ制作において、ページナビゲーションの工夫は、ホームページ（ウェブサイト）のユーザビリティを向上させるのに一役買います。
ページナビゲーションをうまく設置することで、ホームページ（ウェブサイト）のPV数を向上させることもできますし、検索エンジンのクローラビリティを向上させることもできます。
株式会社ファンフェアファンファーレは、ホームページ（ウェブサイト）の新規ご制作をはじめ、この「ページナビゲーション」の設置や工夫といったサイトのカスタマイズやホームページ運営にかかるご相談など様々なWeb制作サービスを提供させていただいております。今回は、ページナビゲーションの設置やカスタマイズによって、ウェブサイトのユーザビリティを向上させることについてお伝えします。
「情報の信頼性 SEOのその前に」で少しお伝えさせていただきましたが、サイトのCMS化によるオウンドメディア構築、CMSのカスタマイズ、静的サイトのカスタマイズのご依頼の比重が高まってきました。
ホームページ（ウェブサイト）の大事なポイントは「情報の信頼性」という面もありますが、ユーザビリティ（ウェブユーザーにとっての使いやすさ）も大切だと考えております。
ウェブサイトのレスポンシブ化によるスマートフォン最適化もその一例です。
ウェブサイト・ホームページにとってもっと大事なのはサイトの中身、つまり「コンテンツ」ですが、ユーザビリティ・サイトの操作性も外すことのできない大切な要素の一つです。ページナビゲーションの工夫はユーザービリティ向上の要素の一つです。
今あるホームページ（ウェブサイト）もページナビゲーションを少し工夫するだけで、PV数や滞在時間、そして何よりホームページのWebマーケティング効果を高めることができます。
サイトのページナビゲーション
ページナビゲーションとは、ホームページ（ウェブサイト）内の各ページへの移動のための案内でありそのリンク群です。基本的にはコンテンツ部の最下部などに設置する前後ページへのナビゲーションを指します。
サイトカスタマイズとして、よくご依頼いただくのがナビゲーションの設置です。ご依頼いただく「サイトのページナビゲーション」は、サイト内での各ページヘの「ナビ」の役割を示す、リンクが設置されたナビゲーションです。
広義のページナビゲーションの種類
前後ページへのナビゲーションの他、広義のページナビゲーションの種類としては、グローバルナビゲーション（ヘッダー等のメインメニュー）、サイト内検索（ダイナミックナビゲーション）、関連ページナビゲーションなどがあります。また、各カテゴリーごとにサイドバーに示されるローカルナビゲーションやパンくずリストもページナビゲーションに該当します。その他、カテゴリーアーカイブなどにおける「ページ送り」も含まれます。
- グローバルナビゲーション
- サイト内検索（ダイナミックナビゲーション）
- 関連ページナビゲーション
- ローカルナビゲーション
- パンくずリスト（ブレッドクラムナビゲーション）
WordPressでは大半のテーマで、前後ページへのページナビゲーションが設置されていますが、基本的には投稿日時順の並びのページナビゲーションです。
日記のようなブログ利用であればそれでも十分かもしれませんが、SEOを考えたり、PV数を向上させたりといったことを考えた場合、コンテンツテーマごとの関連性に応じたページナビゲーションを設置していくことが重要になります。
ページナビゲーションのカスタマイズ WordPressカスタマイズ
前後ページへのページナビゲーション
ページナビゲーション 前後ページへのナビゲーション
狭義のページナビゲーションである前後ページへのナビゲーションです。前後ページナビゲーションとは、ページの本文下部などに設置される「前のページへ」「次のページへ」といったリンクを指します。ユーザーが前後のページを連続して閲覧できるようする工夫です。特に同一テーマの連載記事や同一テーマの投稿軍がある場合には良い工夫となります。カテゴリー内の記事一覧、製品紹介ページなど、ある程度の並び順が存在するコンテンツ群においてはユーザーの回遊性を高めるための基本的な設計となります。
前後ページへのナビゲーションの目的は、ページ読了後にサイトから離脱せずに関連する別ページへと移動するという流れを作ることにあります。記事の内容や文脈に沿って次の情報を読み進めたいという動機を持ったユーザーにとっては重要なリンクです。
前後ページナビゲーションの設計においてできる限り、「前へ・次へ」といった表記で設置せずに前後ページのページタイトルをアンカーテキストとして設定しておく方が無難です。これはSEO上も重要な設定です。また、サイト内のページ同士の関連性が明示されることからクロール効率やページ評価向上にもつながります。
グローバルナビゲーション
グローバルナビゲーション メインメニュー
ページナビゲーションの分類のうちのグローバルナビゲーションです。ヘッダー等のメインメニューが該当します。これはホームページ（ウェブサイト）の全ページに共通して表示されるメニューです。トップページ・サービス紹介・会社概要・お問い合わせ・採用情報などの主要ページにアクセスするための導線となります。グローバルナビゲーションの設計においては、「どのページを第一階層として示すか」といった判断が重要になり、企業の事業戦略やサイト訪問者のニーズに応じた選定が求められます。コーポレートサイトではサービス紹介・会社概要・お問い合わせ・採用情報のほか導入事例などが項目に追加されます。また、ECサイトであれば「カテゴリ」「ランキング」「カート」などがグローバルナビゲーション内に設置されます。
サイト内検索（ダイナミックナビゲーション）
サイト内検索（ダイナミックナビゲーション）
ページナビゲーションの分類のうちのダイナミックナビゲーションとなるサイト内検索です。コンテンツ数が多いメディアサイトや製品数が多いECサイト等、情報量が多いサイトでは重要な機能となります。
特定キーワードでページを探す時に利用します。検索機能は、ユーザーが自ら入力して情報を絞り込む行動を前提としていますが、同時に「検索結果ページそのものがナビゲーションの役割を果たす」という特性があります。検索キーワードに合わせて動的に生成される候補リストやフィルター機能、条件で絞り込む機能があればさらにページビュー数などが向上します。グローバルナビゲーションなどに掲載されていないページを探している場合にスムーズにページ移動することできます。
関連ページナビゲーション
関連ページナビゲーション
ページナビゲーションの分類のうちの関連ページナビゲーションです。
一般的にはコンテンツ本文の下に配置されます。
関連しているテーマの他の投稿などがリスト化されます。ユーザーがあるページにアクセスした際に、その関連情報に自然に誘導することができます。WordPressなどのCMSにおいてはカスタマイズによって関連記事リストを自動生成することもできます。ただ本当に関連性があるかどうかが重要になります。
投稿であれば関連する投稿を表示し、ある製品紹介ページであれば同一カテゴリーの製品、比較されやすい別製品、導入事例やFAQなどの補足コンテンツを表示することでサイト内回遊を促進します。このナビゲーションはSEO的にも評価されやすく内部リンクの最適化を通じてサイト全体の評価を高める効果も期待できます。
ローカルナビゲーション
ローカルナビゲーション
特定カテゴリーのみで表示される、ローカルナビゲーションの例です。ローカルナビゲーションは、特定のカテゴリやセクションごとに設けられる案内機能となります。グローバルナビゲーションよりも細分化された構造を示す際に用いられます。
親子関係にある同一テーマ内のページ軍において、同一テーマ内で横断的にページを移動できるようにする工夫です。役割を果たします。たとえば「ホームページ制作（親ページ）」の中に子ページとして「ホームページ制作価格表」「ホームページ制作の流れ」「ホームページ制作FAQ」といった複数ページがある場合、それら同一テーマ内にローカルナビゲーションを設置します。
パンくずリスト（ブレッドクラムナビゲーション）
パンくずリスト ブレッドクラムナビゲーション
パンくずリストも広義のページナビゲーションに該当します。パンくずリスト（ブレッドクラムナビゲーション）は、現在閲覧しているページがホームページの階層構造（親子関係）のどこに位置しているかを示すための補助的なナビゲーションです。上位カテゴリー（前階層）へスムーズに移動することができます。パンくずリストはページの構造的文脈を明示する役割があるため、特に深い階層を持つサイトにおいてはユーザーの方向感覚を保つ手段として非常に有効です。また、構造化データマークアップをしっかりと施すことによって検索エンジンに対してもページの階層関係を明示できるためSEO上も一定の効果があります。これにより、検索結果の表示にも反映されやすくユーザーがページを訪れる前にその構造的意味を把握しやすくなるという利点もあります。
ナビゲーション機能によるコンテンツ同士の関連性、移動の容易性
このナビゲーション機能は、ホームページ（ウェブサイト）のレイアウト面にも、ユーザビリティにも大きく影響を及ぼしますが、サイト内のコンテンツ同士の関連性、移動の容易性は、サイトユーザーにとっては非常に重要になります。
ホームページ制作において、サイトのメインコンテンツのグローバルナビゲーションも重要ですが、コンテンツ内部のリンクや前後ページ、関連ページへのリンクもユーザーにとっては良い工夫だと考えております。
このナビゲーションやコンテンツ内部のリンクは、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日）
