検索からサービスの詳細ページを開いたお客様が、ほかのサービスも見ようとして「サービス案内」を押したのに、お知らせの一覧へ移ってしまうことがあります。ページの上部などに「ホーム ＞ サービス案内 ＞ 詳細」のように並ぶ案内を、パンくずリストと呼びます。期待と違う場所に着く場合は、並んでいる文字だけで判断せず、押す前のページ、押した文字、開いたURL、その画面でできることを一件ずつ確かめてください。
修正を考えるときには、表示名だけが分かりにくい場合、リンクが違うページを指している場合、そもそも詳細の置かれた階層が想定と違う場合を分けます。WordPressでは固定ページの親子関係と、ブログなどの投稿の分類は扱いが異なります。いずれもサイトのつくりにより、ヘッダーに並ぶメニューとページ上のパンくずが同じ順になるとは限りません。ここでは表示と行き先の記録を作り、どの範囲を制作担当に頼むかまで考えます。
検索結果から直接来た人に、上の案内を見せる
トップページのメニューを経由して詳細へ来た人は、どこを押して来たか覚えているかもしれません。検索結果や取引先からのリンクで詳細だけを開いた人は、同じサイトに似たサービスがほかにあるか知りません。パンくずの途中の項目からサービス全体の案内へ移れれば、依頼内容を選んだり対象地域や条件を比べたりできます。ページの目的に合わせて、どの上位の案内へ進めると用事が進むかを先に決めます。
W3Cのパンくずリストの解説では、現在のページの位置を示すために上位ページへのリンクを階層順に置く案内を紹介しています。ブラウザーの戻るボタンは、人が直前にいた画面へ戻る機能です。検索から来た人が戻ると、同じ会社の総合案内ではなく検索画面に戻ることがあります。サイトの階層を示すものと、閲覧の履歴を戻るものを分けて期待する行き先を決めると、修正で何を実現するかがはっきりします。
例えば、空調工事のサイトで「ホーム ＞ サービス案内 ＞ 店舗の空調点検」と並べるなら、「サービス案内」は、工事と点検の違いを読める案内に進むことを期待させます。同じ名前で過去の受付情報を集めた記事一覧があると、リンクが開いても目的に合わない場合があります。制作担当へは「ページが開いたか」に加えて、「その先で別サービスの対象や相談先を確認できるか」を伝えます。
パンくずを置くページと、あえて載せないページはサイトの設計で決まります。店舗ごとのページなど階層の深い箇所では、途中に同じ「一覧」という名前が続くと、リンクを一つずつ試さないと何の一覧か分かりません。経路を決めるときは、事業者が普段使う部署名より、そこで訪問者が何を選べるか分かる名前を検討します。一方、短い案内で共通の上位ページがないときは、無理に途中の項目を足さず、実在する上位への入口だけで読めるかを相談できます。
画面の名前と、リンクで実際に開くページを記録する
まず、気になる詳細ページを、管理画面のプレビューではなく、ログアウトした状態で公開URLから直接開きます。修正前の調査を公開前の確認用サイトで行う場合は、その環境であることを書きます。入口のURL、確認日時、端末、画面に出た文字の並びを控え、どの項目に触れたかを一つずつ記録します。トップのヘッダーメニューに同じ言葉があっても、調べるのは見出しの近くなどに表示された階層の案内です。
最初に、現在見ている詳細の名前が並びの最後などに分かる形で出ているかを見ます。次に、途中の項目を選んで移動し、開いた画面のURLと見出しを控えます。端末が対応していればリンクのアドレスをコピーして押す前の値も残せます。押す前に確認したリンクと開いた後のURLが違う場合は、途中で別ページへ転送されている可能性があります。転送の有無を画面だけで決めきれないときは、両方の値を渡せば保守担当が調べられます。
現在ページの名前を押せない場合は、すぐに不具合と扱う必要はありません。現在の場所が文字で示され、上位へのリンクが使える構成なら、訪問者は現在地と移動先を区別できます。逆に、上位の名称が見えているのに押せず、サイト内の他の場所から総合案内を探さなければならない場合は、その項目がリンクになっていることを設計で期待していたか確認します。今いる詳細と、別の一覧へ行ける項目を明記した確認票を作ります。
移動した先は、ページタイトルだけでなく内容も一段落ほど見てください。例えば「サービス案内」という見出しがある二つのページで、一方は現在受け付ける仕事を一覧にし、もう一方は案内カテゴリに入れた過去のお知らせを新しい順に表示しているとします。訪問者が別サービスの条件を読みたいなら、後者では用事を続けられません。見出しが同じでも、そこで読めた情報を比較して期待との違いを記録できます。
スマートフォンで階層が二行に折り返される場合も、同じ項目を選べるか試します。途中の名称が途中で隠れている、二行に分かれてどこを押すか迷う、文字はあるが反応がないといった場合は、その端末で分かった現象を書きます。パソコンでは行けるのにスマートフォンでは別の入口が表示されるなら、両方の並びと到着先を伝えます。パソコンで一度成功したことを、すべての表示幅で合格と扱わず、比較した範囲を明記します。
WordPressで固定ページの親子と投稿の分類を区別する
WordPressで詳細ページを管理する画面を開ける場合は、対象が「固定ページ」と「投稿」のどちらにあるかを確かめます。一般的な固定ページには上位に置く親ページを設定できます。WordPressの編集画面の公式解説では、親の設定は固定ページなど階層を持てる種類で利用できるとされています。一般的な投稿はカテゴリで分類できます。カテゴリの名称が「サービス案内」と同じでも、固定ページの親を指定したのと同じ扱いにはなりません。
標準のブロックエディターでは、右上の設定を開き、固定ページならページ側の［親］、投稿なら投稿側の［カテゴリー］を読みます。固定ページでは現在の親の名前か親なしの状態、投稿では選択されているカテゴリー名を控えます。クラシックエディターや権限が限定された画面では配置や見え方が異なるので、欄が見当たらなければ「親の設定は未確認」などと記録します。読む段階では設定を保存しません。担当者に聞くときは、設定の種類が分かる画面と公開ページのパンくずをセットで示すと、比較を始められます。
制作時に入れたテーマや追加機能は、設定した親ページ、分類、個別に登録した行き先などから、表示する案内を組み立てることがあります。どの情報を使うかは構成により違います。固定ページの設定欄で正しい親が表示されているのにパンくずが別の場所を示す場合は、親を選び直す前に、制作担当へ「現在の表示はどこから作られているか」を確認します。複数の階層案内が出ている場合も、見出し上と下など、場所を区別してどちらを直すか伝えてください。
親ページを変える前には、URLへの影響も調べます。WordPressの公式開発資料には、階層を持つページのURIを作る際に親側のスラッグを含める標準の処理が示されています。例えば現在の公開URLに親の名前に対応する部分が含まれていれば、親を変更した際に行き先のアドレスが変わる可能性があります。すでに配布した資料、他のページからのリンク、検索から入るURLがある場合は、必要な転送やリンク修正も別途確認します。表示の一行を直したいだけなら、いまの公開URLを維持できる方法があるかを先に相談できます。
投稿に複数のカテゴリが付くサイトでは、どれを画面の代表に使うかを決めている構成もあります。目的のリンク先を表示させるためにカテゴリを外すと、そのカテゴリの一覧から投稿が消える可能性があります。まずは「編集画面では何の分類に属すか」「現在表示される名称は何か」「期待する案内は固定ページかカテゴリ一覧か」を分けて伝えます。元々、投稿から総合案内に移る設計だったか分からない場合は、表示だけを直す前に、記事を読む人が次に何を知りたいかを運営側と確認します。
架空のサービス案内で、修正前の記入票を作る
以下は架空の空調サービスサイトです。個人商店の担当者が、検索から「店舗の空調点検」の詳細に来た人が別サービスを選べるようにしたいと考えています。トップから「サービス案内」へ行くと、点検と入替の二つが説明されています。詳細のパンくずにも「サービス案内」がありますが、押すと過去のお知らせだけが並ぶページへ移ります。まず、二つの「サービス案内」が同じ文字でも、移動先が違うことを記録します。
| 記録項目 | 修正前の記入例 | 希望する結果 |
|---|---|---|
| 入口と現在の位置 | 空調点検の公開詳細ページ。ログアウト。詳細の名前まで表示 | 検索から直接開いても現在のサービスが分かる |
| 選んだ途中の項目 | 「サービス案内」。押すと過去の案内が日付順に並ぶ分類へ着く | 現行の点検と入替を選べるサービス総合案内へ着く |
| 別の入口からの比較 | ヘッダーから同名を押すと、意図した総合案内に着く | 詳細の階層案内からもその総合案内へ進める |
| 構成の確認 | この詳細は投稿。現行の総合案内は固定ページ | 分類の用途を残すか確認し、公開URLを保てる調整を検討 |
実際の票には、各行に押す前と後のURLを入れます。制作担当への依頼は「空調点検の詳細の上に出る『サービス案内』から、点検と入替を比べられる総合案内へ進めるようにしたい。ヘッダーにある同名リンクはそこへ着く。過去のお知らせの一覧は運営上使っているので、移動先だけ調整できるか相談したい」と書けます。これなら担当者は、名前を変えるだけでよいのか、表示を作る設定がどこかを確かめられます。
この架空サイトなら、入口を /inspection/、押す前に調べた「サービス案内」のリンクを /category/service/、実際の到着も /category/service/、期待する先を /services/ と記録できます。設定担当に「詳細の階層表示で分類のURLを使う箇所を確認してください」と頼める状態です。ホスト名やディレクトリの違いが判断に関係する実サイトでは、票にはドメインから始まるURL全体を記録します。
一方、押す前のリンクが /services/ で、実際の到着が /category/service/ なら、リンクはすでに希望どおりの文字列を持っています。まず /services/ をアドレス欄へ直接入力した場合にも同じ場所へ動くかを見ます。直接入力でも同じなら、そのURLを開いたときの転送やサイト設定を保守担当に調べてもらいます。直接入力では総合案内に着くのに、パンくずを押すと別に着くなら、どの画面上の操作で違いが出たかを制作担当に伝えます。利用者が見た現象と原因の判定を区別するための比較です。
別の原因を想定して、希望する条件を変えてみます。押すと意図どおり総合案内に進むが、パンくずの文字が「更新情報」なら、移動先に変更は要らず、名称を何にするかの相談です。逆に、固定ページの詳細で親が違い、今後は別サービスに属すことも事業として決まっているなら、パンくずだけを変えるとサイト全体の整理と合わなくなります。親子関係とURLの変更を含めて影響範囲を確認し、必要な入口を保持する方針まで制作担当と決めます。
確認用サイトでだけ途中の項目が見えない場合は、公開環境で同じ詳細を読んだ結果も別に記録します。公開フォーラムには、開発用環境で最後の項目しか出なかったという投稿があります。相談は構成によって異なる症状の一例です。自分のサイトでも同じ原因だと決めず、対象の環境と表示した内容を区別すると、公開側の問題なのか、検証用の表示に限るのかを制作担当が調べやすくなります。
修正後は、狙った詳細と影響を受ける別のページを確かめる
修正後は、最初と同じURLを入口にして、表示された名前、押した場所、到着先のURL、到着先の案内内容を順に記録します。架空例なら「詳細を直に開く → パンくずのサービス案内を押す → 総合案内で点検・入替の両方を見つける」が一つの合格条件です。名前が合っていても旧分類に着くなら未解消です。総合案内に着いたが、そこから目的のサービスを選べない場合は、リンク修正の結果と総合案内の改善を分けて残します。
パソコンでキーボードだけを使う人も、上位の案内へ移動できるかを一回試せます。Tabキーで対象の上位リンクに選択の印が移り、Enterキーで同じ総合案内に着くかを確認します。制作担当が読み上げを確認できるなら、このリンクの並びが名称のあるナビゲーションとして伝わり、現在ページにもリンクを置く構成では、その項目が現在ページだと分かるかを依頼できます。W3Cの構成例は、現在ページがリンクの場合に現在のページであることを示す属性を使い、リンクにしない場合はその指定を任意としています。読み上げの試験を行っていなければ未確認と記録し、キーボードの結果を読み上げの結果に広げません。
修正が共通の表示に入った場合は、同じ種類の別の詳細と、異なる種類のページを代表として一つずつ確認します。例えば別の空調サービス詳細が同じ総合案内へ移ることと、ブログのお知らせが従来どおり記事分類を案内することを見ます。パンくずの生成元をサイト全体で変えたときは、対象ではないページまで同じ名前になっていないかを制作担当と見直します。共通でない個別の変更と分かった場合でも、作業票に対象URLを記して次回の修正範囲が分かるようにします。
公開前に確認用サイトで試した場合は、その結果で公開側の確認を代用せず、公開後にログアウト状態で対象を開き直します。旧URLから新しいURLへ移る変更を行ったときは、以前配布した入口から目的の新ページへ着くかも別欄に記録します。表示を直すだけの依頼なら、既存の詳細の公開URLが予定どおり使えているかを確かめます。新規に制作する場合は、サイト構成を決める段階で、詳細からどの上位案内に進むかを図にしておくと、表示に出た順と設計を受け入れ時に照合できます。
途中の項目が動いたか確かめる人を二人にできるなら、一人には検索から直接開いたつもりで試してもらい、もう一人が記入票で結果を控えます。「どこを押せば他のサービスを見られそうか」と尋ねると、リンクの動作と名称の伝わり方を同じ機会に見られます。その場で正しい位置を教えた場合は、教える前にどの候補を選んだかもメモします。試す人の理解を観察する作業と、制作担当が設定を調べる作業をつなぐための記録です。
島田市などでホームページを作り、検索から詳細へ来た方が関連する案内まで進める構成を決めたいときは、LIFESEEDSのホームページ制作・運用の案内をご覧ください。すでに公開中のページなら、詳細のURLと、押した項目、期待する行き先を添えてお問い合わせいただけます。
アイキャッチは説明用に生成したイメージです。
コメント