長い案内ページの目次で「お申し込み方法」を押したところ、画面は動くのに、お申し込み方法の見出しが見えない。少し上へ戻すと、画面の上部に出続ける帯の裏から見出しが現れる。このような症状なら、リンクがどこへ飛ぶかと、到着した場所に何が重なるかを別々に調べられます。
WordPressの公式フォーラムにも、固定ヘッダーのあるページで、到着した見出しや後続の数行が隠れるという相談があります。ある相談ではパソコンとスマートフォンの両方で見えづらく、別の相談ではヘッダーが表示された状態と隠れた状態で結果が異なっています。自社のページでも同じ原因だとは限らないため、どの入口から、どの状態で、何が隠れるかを先に記録します。島田市で店舗案内やサービスの利用手順を掲載している小規模事業者が、制作担当に修正を頼み、公開画面で受け入れるまでの進め方です。
見出しへ移動できたかを二つの手掛かりで確かめる
ページ内リンクは、URLの末尾にある「#」以降の名前などを手掛かりに、同じページの特定の場所へ移動するためのリンクです。例として、案内ページのURLの末尾に「#apply」があれば、ページの中で apply と名付けた目印へ移動できます。WordPressで見出しにアンカーを設定する場合は、見出しに付けた名前と、リンクが指定する名前の対応を確かめます。目次に表示する日本語とアンカー名は別々に設定できます。テーマや目次の仕組みによっては、クリック時に独自にスクロールさせるものもあります。
調べるときは、まず公開画面を開き、問題の目次を一回だけ押します。画面上部のURLに「#」以降が表示されるなら、その文字列を控えます。到着直後の画面を先に記録し、ページを先頭側へ少し戻します。スマートフォンなら指を少し下へ動かします。そのときに帯が再表示する場合は、移動後の画面も残します。期待した見出しが直前にあるかを見ます。目的の見出しがすぐ上にあり、その前へ戻れば見える場合は、目的の場所には近づけています。一方、上に少し戻しても別の見出ししか見えない場合や、押しても位置が変わらない場合は、固定ヘッダーの余白を調整する前にリンク先を調べます。
URLが変わらないことだけで故障とは決められません。実装によっては、ページが移動してもアドレス欄に目印が出ない場合があります。逆に、URLが正しくても、同じ名前の目印がページ内に複数あれば、意図した見出しに着くとは限りません。更新時に似た案内ブロックを複製した直後なら、制作担当に同じ名前が残っていないか調べてもらいます。アドレス欄の記録と、見出しの前後にある文章の両方が分かると、確認する箇所を絞れます。
画面の上に残る帯がいつ重なるかを再現する
固定ヘッダーは、縦に画面を動かしても上部に残るロゴやメニューの帯です。最初から画面上に重なっているもの、ある位置まで移動すると画面上に残り始めるもの、下へ移動すると一度隠れて上へ戻すと再表示するものがあります。到着直後に帯があったかどうか、スクロールを止めたあとに現れたかを記録します。帯の色で判断しづらい場合は、画面の上端から本文が始まる位置と、本文の文字が消える境目を見ます。
同じ目次を試すときも、ページ最上部で開いた直後と、途中まで読んで画面上部の帯が小さくなってからでは条件が変わります。最初は見出しが読めたものの、動きが止まってから帯が大きくなって隠れることもあります。押した直後だけの画像では最後の状態が伝わらないため、止まってからの画面をもう一枚撮ります。画像を渡すときは、管理画面のユーザー名や未公開の問い合わせ内容が写っていないことを確かめます。
WordPressの管理者としてログインしたままだと、サイトのメニューとは別に編集用の管理バーが上へ表示されることがあります。来訪者の条件を調べる場合は、ログアウトした閲覧環境か、管理者として認証されていないブラウザーを使います。公開時に表示されるお知らせや同意の帯があるなら、その帯を閉じた状態と、通常の利用で表示されたままの状態を区別します。修正担当に伝えるべきなのは、誰にどの帯が出ていたかです。
どこから来たときに困るかも分けます。同じページの目次で移動する場合、別ページのリンクから来る場合、メールで受け取った「#」付きのURLを直接開く場合の三つです。直接開く試験では新しいタブへ目印付きURLを貼り直し、戻る操作で以前の位置が復元される場合と区別します。目次からは見えるのに直接開くとずれるなら、目次を押したときだけ追加の位置調整をしている可能性があります。直接開いたときだけ見出しが移動するなら、画像や案内が後から表示されて位置が変わっていることも考えられます。読み込み後の最終位置を記録し、原因は制作担当が再現して確かめます。
症状に合わせて、修正してもらう範囲を決める
意図した位置に着いて少し上へ戻すと見出しが出るなら、最初に頼むのは「到着した見出しの上に、帯が重ならないだけの空きが取れるか」の確認です。CSSでは、移動先の要素にスクロール時の余白を取る scroll-margin-top や、スクロールする領域の上部に共通の余白を設ける scroll-padding-top が候補になります。対象を限定するか共通にするかは、ページ全体と内側の枠のどちらが実際に動き、どの見出しで同じ症状が出るかを見て決めます。テーマのスクリプトが位置を計算しているときは、その計算とCSSの両方で余白を足さないよう整理します。
単に見出しの上の空行を増やしても、ブラウザーが見出しそのものを画面の上へ合わせると、期待した余白が到着位置に反映されないことがあります。逆に調整が効いても、全部の見出しの前に同じ大きな空間ができれば、普通に縦に読む人はページの区切りを取り違えます。スクロールした結果に必要な空間と、通常の紙面として必要な間隔を別に頼むと、日常の読みやすさを確認しやすくなります。
帯の高さは画面によって変わります。パソコンではメニューが一行でも、幅が狭いパソコンでは二行になったり、スマートフォンでは営業時間のお知らせが折り返したりします。色や高さを最近変更した場合は、その変更前後で症状が変わったか伝えます。制作担当には代表的な幅で帯の実際の高さを見てもらい、その端末でたまたま動いた一つの数値を全ページへ入れるかどうかを判断してもらいます。
目的と違う位置に着くなら、見出し名とリンク先の対応を直す方が先です。見出しが折りたたみの中にあり、リンクを開くまで内容が表示されない構成もあります。折りたたみは構成により動作が異なるため、閉じた初期状態から開いて読めるかを試します。中を直接案内する必要があるときは、対象の見出しを読める状態で開くか、外側の見出しへ案内して操作を促すかを検討します。更新でURLを変えると、メールや過去のお知らせに記載した入口が失われるため、元のURLからも案内先を確認します。
見出しは見えるのに、すぐ下にあるボタンやリンクをキーボードで選ぶと、そのボタンが帯に隠れる場合は、ボタンを選んだ状態の試験も必要です。目次で到着する場所と、Tabキーなどで現在選んでいる要素は同じとは限りません。W3Cの解説は、固定した帯でキーボードの操作対象が隠れる問題を例にしています。見出しへの到着だけの修正で、全ページのキーボード操作まで改善したと判断せず、困った操作を別々に確認します。
依頼はURLと見え方を一組にする
制作担当へは、問題のある公開URL、押した目次の文言、開いたあとに期待する見出し、実際に見えた最初の行を一組で伝えます。目印付きのURLがあればそのまま控え、端末名、ブラウザー、画面の向き、ログインの有無を添えます。画面の幅を数字で測れない場合でも、端末と向き、文字を拡大していたかが分かれば、再現の手掛かりになります。端末や利用者の情報を広く集める必要はありません。
架空の依頼例です。「公開中の利用案内の目次『受け取り方法』を縦向きのスマートフォンで押すと、『受付で氏名を伝える』から表示され、その直前の見出しと例外条件が上部のお知らせ帯に隠れます。上へ少し戻すと見えます。ログアウト状態、ページを最初から読み込み、帯を閉じずに試しました。目次から開く場合と、同じ目印付きURLを別のタブから直接開く場合の両方で、到着時に見出しと例外条件を続けて読めるようにしてください」。この依頼なら、制作担当は飛び先を変える必要があるか、重なりだけに対応するかを検討できます。
到着した瞬間に見出しだけを表示すればよいのか、直後の一文や表まで見える必要があるのかも決めます。「当日分は電話のみ」のように判断を変える条件なら、見出しが表示されても条件が帯の裏では読み落とします。逆に小さな画面で長い表全体を一度に出すことは求めず、見出しと冒頭が読めて、通常の縦移動でその先を確認できる状態を受け入れます。実際の案内を一つ選んで条件を伝えると、作業範囲が明確になります。
修正後は別の入口からも読み取れるかを検収する
修正前と同じ端末、同じ向き、同じ公開ページで再現手順をなぞります。見出しが見えたら、ページを上へ戻さずに案内の最初の一文を読めるか、次に必要なボタンへ進めるかを確認します。その場で余白を調整し直す場合は、同じ画面で前後の違いを比較できるように、どの条件で見えたかを時刻と一緒に記録します。
次に、目次のすぐ近くにある別のリンクも押し、どの見出しも同じ場所に飛ぶようになっていないか調べます。ページ末尾にある見出しは、残りの本文の長さによっては上部まで寄り切らない場合があります。到着位置の高さを一律にそろえることより、目印となる見出しと必要な説明に迷わず届くかを見ます。目次へ戻って押し直したときに、別の見出しへ誤って移動しないことも確かめます。
画面幅を変える試験では、縦向きの端末を横へ回す、パソコンのウィンドウを狭くする、ブラウザーの文字や表示を拡大するなど、帯の折り返しが変わる条件を選びます。操作方法を変える試験では、タッチで目次を開く場合と、キーボードでリンクへ移動して開く場合を比べます。現在選んでいるリンクが見え、次の操作へ進めるかも見ます。端末の見た目を模した制作ツールの確認に加え、実際に問題が出た端末のブラウザーで最後に確認します。
制作環境で正しくても、公開環境に反映する順序が違うと、古い設定やファイルで表示される場合があります。制作担当と同じ修正版を見ているか確かめ、公開ページを管理者でない状態から再確認します。比較中に見えた画面は捨てず、同じURLを開いた時刻と環境を伝えると調べやすくなります。複数端末で原因を確かめずに目次の仕組みを入れ替えると、すでに配った目印付きURLの到着位置まで変わることがあるため、最初に合意した範囲へ絞ります。
更新後は「いつ、誰が、どのリンクを、どの画面で押し、何を読めたか」を、案内ページの更新記録に残します。サイトの上部に新しいお知らせを追加したり、メニューの段数を増やしたりしたら、以前問題が出たリンクから一件だけ選び直して開きます。制作担当への依頼に使った条件が残っていれば、同じページで似た症状が出たときに、見出しの変更と帯の変更を区別しやすくなります。
見出しの名前を直す場合は、配った入口も残す
重なりが原因だと考えて修正を始めたところ、同じページの中に同名の目印が二つあったと分かることがあります。たとえば以前の「お申し込み」と「現在のお申し込み」を残し、古い案内を折りたたんだ際に、複製した目印が両方に残った場合です。このときに必要なのは、現在の案内を指すURLを一つに定めることです。公開中のURLを変更する前に、古い目印付きURLをメール、印刷物の二次元コード、別のページのお知らせで使っていないかを、把握できる範囲で調べます。
すでに外へ配布したURLは、目次の文言を修正するだけでは更新されません。新しい目印を作る場合は、以前の目印を適切な場所に残せるか、制作担当に相談します。過去と現在の手続きが異なり、古い見出しから来る人に注意事項を伝える必要があるなら、以前の目印から現在の手続きへ進める短い案内を置く方法もあります。一方、未公開の確認ページでしか使っていない目印なら、外へ配布済みの入口と分けて変更できます。
たとえば受付方法の変更を知らせたメールに目印付きのURLを記載した場合は、メールのリンクを実際に開いて確かめます。コピーした公開URLで試すだけだと、メールに入れた文字列が途中までしか選択されない問題に気付けません。元のメールに送信先が含まれる場合は、制作担当へ全文を転送せず、同じ形式の試験用メールを用意するか、リンク文字列と押した結果だけを共有します。入口からの到着と、着いた場所での重なりを一度ずつ記録します。
一件の修正を受け入れる条件を共有する
「見えた」とだけ記録すると、担当者によって合格条件が変わります。たとえば制作担当はタイトルが一行見えれば合格と考え、受付担当は重要な注記まで読めて初めて合格と考えるかもしれません。依頼時にはどちらが正しいと決めつけず、来訪者が次に何を判断するかを伝えます。営業時間を確認するページなら対象の曜日が読めるか、予約方法なら受付方法が当日と翌日以降で違うことが分かるか、というように必要な文を選びます。
実施した試験の結果は三つに分けられます。「合格」は、目的の見出しと最初に必要な説明が、上へ戻さずに読めた状態です。「要調整」は、正しい見出しに着いたものの、帯の下へ一行でも必要な情報が隠れた状態です。「別の原因を確認」は、見出しが違うか、期待する場所へ移動しなかった状態です。端末を用意できない場合は「未試験」と書き、合格と一緒に数えません。この区別があれば、サイト担当から制作担当へ戻すときに、どの確認をやり直すかが明確です。
次は架空の記入例です。
目次｜端末A・縦｜帯表示｜「受け取り方法」から見えた｜合格｜11月7日
直接URL｜端末A・縦・新規タブ｜帯表示｜「受付で氏名を伝える」から見えた。直前の条件が隠れた｜要調整｜11月8日再確認予定
別ページのお知らせ｜端末B・横｜帯非表示｜別の案内の見出しに着いた｜別の原因を確認｜11月8日再確認予定
結果が異なる行だけ次回の確認日を残せば、どの条件で再試験するかを引き継げます。
公開前の確認で問題が見えなかった場合にも、「どの環境で試したか」を残します。たとえば確認用サイトにお知らせ帯が出ていなければ、見出しを隠す条件を作れていません。制作担当へ、実際の帯と同じ高さや表示状態で試験する方法があるか相談します。その上で公開後に出た結果が食い違ったときは、確認用と公開用のどこで設定が違ったかを調べます。試した画面の範囲を伝えると、別の制作担当も追試できます。
固定表示をやめるという判断も、案内の使われ方によっては成り立ちます。目次から着地した直後に必要なのが見出しと受付条件で、常に上部に置くメニューはほとんど使われないなら、対象ページでの固定を外すと配置が簡単になります。一方、予約ボタンへ何度も移動する構成では、帯を残して到着位置だけ変える方が案内を維持できます。決めた方法を実装したあと、ページを最初から読む人も、リンクから途中へ来る人も同じ情報にたどり着けることを確認します。
長い案内の見出しを開いた人が、必要な説明から読めるように整える場合は、LIFESEEDSのホームページ制作をご覧ください。お問い合わせでは、開いた公開URLと、最初に見えた一行をお知らせください。
コメント