ワードプレスでのサイトナビゲーションの考え方

ワードプレスでの基本ルールを考える
この記事は約8分で読めます。

Webアプリケーションにおいて一番「直感的に分かり易く」かつ「使い易い」サイトナビゲーションの仕組みは、画面左側もしくは上部に開閉式メニュー(多階層アコーディオンメニュー)がある形式ではないか?と思ってしまうのですが、それって今どきでは古い考え方の人(以下、古考人)なのでしょうか?

スポンサーリンク

メニューに頼る人が困る事

そのような古考人がワードプレス(以下WP)で作られたWebサイトに検索エンジンから誘導されて入って来た時にとても困ることがあります。

それは例えば、画面ヘッダーにあるグローバルメニューを見てもそのページが「メニューのどこから辿り着けるのか?」を見つけられず、さらにヘッダー下に表示されているパンくずリスト(ホームから表示される階層型ナビゲーション)で「どんな記事があるのか?」を知りたくて直近の階層をクリックして見たところ、非常に多くの記事が表示されてしまい、先ほど見た記事の関連記事を見つけようとしても、どうしても見つけられずに四苦八苦してしまいます。
すぐ上のメニューにあがったら最後、ブラウザーの戻りボタン以外では下に戻れなくなってしまいます。

皆様も一度は同じような経験をお持ちではないでしょうか?

本サイトでWPでサイトを構築し記事を書くようになってから、初めてWPには記事にカテゴリーを付けることで、ページの下の方に関連記事を表示させる機能があることや、カテゴリー一覧からその記事が所属するカテゴリーを表示させる機能があることを知りました。

これまで長い間コンテンツマネージメントシステム(CMS)で作られたWebサイトを利用して来ましたが、そんな機能があるとはまったく気が付きませんでした。

Webサイトによって、カテゴリー関連記事を表示させていなかったりするので、てっきり関連記事をページに紐づけて表示させているのだと思っていました。

悲しいことに古考人の周りには、そういう簡単なWPの操作方法を教えてくれる人がいなかったのです。

また多くの著者がいて、タイムラインというか書かれた順番に記事を載せているようなWebサイトでは、そもそも話題に対してのカテゴリーが設定されていなかったりするケースが見受けられ、関連記事を見つけるためにシリーズタイトルや著者で検索したりしても、なかなか目的の記事に辿り着けず、さらに四苦八苦することになります。

タイトルの簡潔化

世の中の潮流としては、SEO対策として、人間よりも検索エンジンに如何にヒットするか!を目的としてタイトルを長くする傾向であると認識しています。
また人間に対しても、検索画面のタイトルの中で人目を惹くインパクトがあるタイトルを付けることが重要視されています。

確かに検索エンジンに拾われて、人目に付くようにならないと記事が拡散しないことは確かであると思います。
(ただし、SEO対策に対しては「SEOタイトル」を使用する方が良いのでは?とも思ったりしますが…まだ経験値が浅いので実際にどうなのか?はわかっていません。)

そのため新着記事や人気記事も長いタイトルを設定できるようなスタイルが好まれて、抜粋(スニペット)など無い方が良いと考える方も多い事と存じます。

これは一つの記事について考えれば一理あると思うのですが、あるカテゴリー・グループについていろいろな切り口で記事を複数作成する際には、グループタイトル的なものが設定できないと、長いタイトルだけではどのような記事なのか読み手が把握することが難しいのではないでしょうか?

この解決策のひとつの方法としては、タイトルにグループタイトルを含めるというやり方があると思います。

この手法は多くの筆者がいるサイトの場合は、このような手段をとるしかないと思いますが、作成者が一人などの場合はタイトルは簡潔にして記事をまとめた方が全体が把握し易いのではないでしょうか?

従いまして、本サイトではタイトルの全角文字数は原則26文字までと致します。
なおこの全角26文字という数字は、本サイトで使用している無料のWPテンプレートCocoonのデフォルトのサブメニュー幅に対して、フォントサイズを調整して入る最大文字数から来ています。
取り合えず、将来破綻をきたすまでは、この原則で進めます。

【追記】(2019/3/7)
本記事を書いた時は上記引用表示のようなルールでスタートしたのですが、始めてから1ヵ月経っていませんが26文字では少し足りないと感じることが何度かありました。
無理やり文章を短くすることはできたとしても、お読みいただく方に行間を埋めていただく必要があり、正しく伝えきれない可能性があります。
本サイト開始から1ヵ月強が経ち、全面的に記事の見直しを実施しています。その中でこのタイトルの文字数制限につきましては34文字に変更をさせていただきたく存じます。
それにともない、Cocoonのヘッダーナビの機能修正を実施しました。修正内容につきましては「ヘッダーナビ(グローバルナビ)のサブメニュー名を2行表示にする」をご参照ください。//

メニューを意識して記事タイトルを考える

一般的に、個別の投稿(記事)をメニューに設定するケースは少ないかもしれません。
上記したような理由からタイトルの文字数を26文字(2019/3/7日34文字に改定)するなどあり得ないというご意見もあることと存じます。

ただし、もしも長いタイトルを普段付けていると、メニューに設定できる桁数には限りがあるため、メニューの設定と実際のタイトルが異なるケースがでてきてしまうと思います。
本サイトでもどうしても入りきらない場合は、省略文字にするなど見た目を変えるケースがあります。

更に、例えばメニュー階層で親がワードプレスになっているとすると、記事タイトルにはワードプレスを含める必要はありません。ただしその記事が検索エンジンに拾われた時に記事タイトルにワードプレスが無いことで、中身が何なのか?インパクトに欠ける印象を与えてしまうかもしれません。
これを解消するにはSEOタイトルでワードプレスを含めたタイトルを設定しておく必要があります。
確かにこれは手間ではありますが、サイト全体の構成を考えたら、その手間は許容の範囲内であると考えます。

またメニューに設定するタイトルにはHTMLのタグを入れ込むことができます。
従ってHTMLの<div style=”font-size:50%>…</div>などのタグを使うことでメニューに表示できるタイトルの文字数は少し増やすことはできます。


【追記】(2019/3/7)
タグにstyleを設定することは推奨されないようですので、Classに設定変更をしました。また文字サイズがサブメニュー全体で統一されていないのも利便性が良くないので同じサイズに合わせて変更しています。
詳細につきましては「ヘッダーナビ(グローバルナビ)のサブメニュー名を2行表示にする」をご参照ください。//


ただし、これにも限度はありますので、やはり日ごろから簡潔にタイトルを付けることに慣れていた方が良いと感じています。

メニューとカテゴリーとの関係

Webサイトによっては、メニューとカテゴリーがそれぞれ違う切り口で設定されているケースを散見致します。

そのよえな考え方もあるのかもしれませんが、本サイトではメニューとカテゴリーは基本的には同じくくり方で設定します。
その上で、メニューがカテゴリーと異なる点は、メニューには単独の記事(おすすめの記事であったり、いくつかの記事を総括している記事)を設定することができる点です。
カテゴリーはあくまでも複数の記事をまとめるためのくくりとして使用するので、ひとつの記事でカテゴリーを設定するというのは変です。
仮に今はひとつであっても将来的には複数の記事になるべきです。

従って、メニュー上の文字数の制約から省略した文言になることはあり得ますがメニューとカテゴリーは原則同じ名前にする必要があります。

ちなみにこのようなした場合、どれだけの記事数がサイトに収容できるか?ですが、4つの親メニューにサブメニューが7個、孫メニューも7個だとすると、末端では4×7×7=196カテゴリーになります。
さすがにそのまでの数の分類を覚えて、新しく書いた記事を場合分けして収納することを維持できるか?は疑問ではあります。
仮に特定のカテゴリーについてもっとメニューが必要になった場合は、これはサイトを分けて対応するしかないのですが、ほぼほぼこれで賄えるのではないか?と考えています。

カテゴリーと投稿(記事)との紐づけルール

本サイトでは記事はひとつのカテゴリーにだけ紐づけるルールを設定しています。この方針につきしては「記事は唯一のカテゴリーに属する」をご参照ください。

本サイトではカテゴリーページに下りのパンくずリストを表示する

いろいろぐちゃぐちゃ書いてきましてたが、結論として本サイトでは、最初の見出し「メニューに頼る人が困る事」で書いたように、検索エンジンから本サイトに入って来たお客様が関連記事を探すために、一般的なパンくずリスト(以下、下りとの対比で「上りのパンくずリスト」と呼びます)をクリックした時に、クリックしたカテゴリーに含まれている、サブカテゴリ及び単独記事が分かるように「下りのパンくずリスト」を本文上位にまとめて表示するようにプログラムを修正します。
カテゴリー直下のカテゴリーだけに絞り、孫カテゴリーまでは表示しないようにします。

「下りのパンくずリスト」の具体例としては、例えば本記事のヘッダー下に表示している「上りのパンくずリスト」で「サイト全般」のメニューをクリックしていただければ、本文上位に表示される「下りのパンくずリスト」をご覧いただくことができます。

この「下りのバングリスト」表示させるための具体的なプログラム修正内容につきましては、下記の記事をご参照ください。

下りのパンくずリストを表示させることで、本文上位が少しごちゃごちゃする場合があるかもしれませんが、「上りだけで下りが無い」ことでの混乱は防ぐことでサイトナビゲーションが分かり易くなるのではないか?と考えています。

これからもお客様の利便性を考えたサイト作りに努めて参ります。
最後までお読みいただき誠にありがとうございました。