申込みページに「参加条件を読む」というリンクを足したら、押した人は条件を読んだあと、どこへ戻るでしょうか。まだ申込みフォームを開いていなければ、ブラウザーの「戻る」で案内へ帰れる場合があります。すでに日時を選び、相談文を書き始めているなら、同じ操作で入力を失うことがあります。逆にどのリンクも別タブにすると、スマートフォンでは資料を読み終えたあと、どのタブが申込み画面だったか探し直す場面があります。
島田市で教室や見学会の案内を更新する小規模事業者を想定し、リンクを押す前の用事、行き先で確認すること、元の作業を再開する方法を一件ずつ決めます。作るのは「リンクの開き方と戻り方の確認票」です。リンクの色やボタンの形を変える前に、申込みを終えようとする人の手順を記録し、更新担当と制作担当が同じ動きを確かめられるようにします。
最初の一件は、押す前に何をしていたかで選ぶ
ページの上から外部リンクを一つずつ拾うと、気づきやすいロゴや地図から試しがちです。先に、途中で画面を離れたときの負担が大きいリンクを選びます。申込みフォームの下にある条件、見積もりの入力中に参照する資料、途中で別の事業者の予約画面へ移るボタンなどです。管理画面で編集できるかはあとで見ます。最初はお客様に見える画面で、どの欄や見出しのそばにリンクがあるかを書きます。
たとえば条件を読むリンクが二か所にあるとします。一つは申込みの説明ページにあり、もう一つは日時と連絡先を入力したあと、確認のチェックを付ける欄の近くにあります。行き先が同じでも、入口ごとに読者が手元に残したいものが違います。説明ページでは見出しまで戻れれば用事を続けられます。入力欄では日時の選択、選択肢に応じて開いた追加欄、書きかけの文章がそれぞれ残ることを確認したい場面です。表の一行を一つのURLで数えず、一つの掲載位置で数える理由です。
行き先での用事は「読む」「照合して元の作業を続ける」「そこで手続きを進める」から書き始めると違いが出ます。外部の予約画面に行くボタンであれば、着いたあとに予約を進めるのが用事です。二つの画面を行き来しながら読む必要がなければ、外部というだけで別タブを追加する理由は弱くなります。一方、入力欄の説明に書ききれない内容を参照しながら入力する必要があれば、行き先が自社内でも、元の画面を残す価値があります。
同じタブを出発点にし、途中の作業が中断するかを調べる
同じタブで開くと、いま見ている画面が行き先に置き換わります。直前に見ていたページへ戻る操作を試せる一方、戻ったときの位置や入力内容はサイトの実装や利用環境によって変わります。別タブで開くと、元の画面を表示していたタブを残しながら別のタブなどに行き先を表示します。読者はタブを見分けて切り替える必要があり、元のタブが残っても、フォームの有効時間や端末の状態によっては入力の保持を保証できません。
同じタブを候補にするときは、戻れたかどうかを一つの丸で済ませず、戻ったページ、戻った位置、残った入力の三つを分けます。たとえば説明ページに戻れても、ページ先頭に戻ってしまい、申込ボタンを探し直すなら位置には改善の余地があります。フォーム画面に戻って日時だけ残り相談文が消えたなら、残った入力と失った入力を別々に記録します。ブラウザーの自動入力で氏名が再表示された状態と、訪問者が書いた相談文まで保持された状態も別です。
別タブを候補にするときは、まずリンクを押す前に、別のタブで開くことが文面から伝わるか見ます。押したあとで気づく場合、画面が切り替わったように見えて、表示された資料でブラウザーの「戻る」を試すかもしれません。資料を開いたタブで直前の履歴がなければ、そのボタンは元の申込み画面に戻る手段になりません。タブ一覧で元のページ名を見つけ、元の欄へ戻れるかを確かめます。新しく開いた方のタブを閉じる場合も、閉じる対象を画面上で識別できることが前提です。
W3Cのウェブアクセシビリティに関する解説では、別のタブやウィンドウを開くことは、必要な場面に絞る方法が示されています。入力途中に補足を読むため同じ画面を離れると手順が大きく中断する場合が、その例です。別に開くと決めた場合、見た目と支援技術で事前に知らせる方法も示されています。ここでは一件の使い方を決める根拠として使います。W3CのG200、事前案内に関するG201
架空の見学会で、入口が違う三件を記入する
以下は架空の工房見学会です。案内ページを読んでから、別ページの参加フォームで希望日時と同行人数を入力します。条件ページには、対象年齢、付き添いの要否、持ち物が書かれています。手元でこの例を使うときは、会の名前よりも、三件のリンクがどの時点に置かれているかに注目してください。現場では「案内から確認」「入力中の照合」「手続き先へ移る」に当てはまる一件ずつから始めます。
| 掲載場所とリンク | その前後の用事 | 開き方の仮決定と確認条件 |
|---|---|---|
| A 見学会案内の「参加条件を読む」 | 参加できるか先に読む。入力はまだない。読んだら日程の選び方へ進む。 | 同じタブを試す。条件の見出しが読め、ブラウザーで戻ったあと案内ページの日程と申込方法へ進めれば可。 |
| B 希望日時の選択後にある「同伴者の参加条件を読む」 | 付き添いの扱いを照合し、日時・人数・備考の途中入力に戻る。 | 別タブを候補にする。事前に別タブと分かり、元の見学申込みを選び直すと三項目が残り、次の欄へ進めれば可。 |
| C 別日程の説明にある「外部の予約ページへ進む」 | 予約手続きを行うため別の事業者の画面へ進む。元のページに未保存入力はない。 | 同じタブを試す。押す前に外部の予約先と分かり、着いたときに会の名前と予約入口を確かめられれば可。 |
AとBは同じ条件ページに案内できます。Aを開いた人には参加できるかを読んでからフォームへ進む道があり、Bを開いた人には入力を保ったまま条件を確かめる必要があります。ここでAもBも別タブに統一すると、申込前の人までタブの切り替えを求められます。どちらかの設定に統一したい場合は、掲載する位置自体を変更できないか考えます。フォームを開く前に条件を読めるだけで入力中に参照する人が減ると想定できるなら、その条件がどこで見えるかを先に整理します。
Bは、候補にした別タブが試験で合格するか、またはリンクを押さずに済む構成が作れるかで分岐します。たとえば付き添いを選ぶ欄の直前に短い条件を置くなら、「必要な年齢と人数を読み取り、そのまま人数を選べる」と具体的に確認します。条件が変わるたびに別ページとフォーム本文を両方直す運用になるなら、誰がどちらを更新し照合するかを決めます。二か所の文言を維持できない場合は、無理に同じ説明を複製せず、参照リンクを残して戻り方を試す判断ができます。
Cでは、新しい事業者のページへ着いたときに手続きの続きを判断できることが大切です。元のページに注意点を残したまま移動させると、手続きの途中で注意点を調べ直すことになります。たとえば予約先で会の名前を選ぶ必要があるなら、出発前に名称を伝えるか、目的の会が分かる画面へ直接案内できるかを確認します。別タブへの切り替えを手続きの説明不足の代わりにしないよう、まず移動先で必要な材料が何かを確認します。
入力中の一件は、残したい状態を先に作って試す
準備は、確認用の画面、使うブラウザー、架空の入力値、対象リンクの四つです。試験ページがあるなら、そのページと公開予定の構成がどこまで同じかを制作担当に聞きます。説明ページを読んで戻る試験には公開画面を使える場合もあります。入力を開始すると予約枠が仮確保されたり、途中の値がサーバーに保存されたりする仕組みなら、フォームへ書き込む前に管理者と試験場所をそろえます。この確認の終了地点は入力の再開です。試験用の日時を選び、指定した欄まで進めるところで止めます。
- フォームの入口から開き、架空の日時「見学枠B」、同行「1人」、備考「入口の段差を確認したい。到着予定は午後。」を用意します。実際の画面に合う架空値へ置き換えます。氏名や連絡先が試験の条件に不要なら空のままにします。
- リンクを押す前の画面で、現在のページ名、入力位置、選択値、備考の末尾を控えます。前の欄の選択で追加欄が開いていた場合は、その欄も記録します。タブ一覧を開いたときに元の画面と行き先を区別できるよう、表示名も見ます。
- 同じタブ案は通常のタップやクリックで一度だけ開きます。行き先の条件を一つ読み、ブラウザーの「戻る」で元のページへ戻ります。入力欄、三つの値、追加欄の開閉、次の欄まで進めるかを順に見ます。
- 別タブ案は新しい試験として元の画面を開き、同じ架空値を最初から入れ直します。文面で別タブと分かるかを確認し、通常のタップやクリックで開きます。条件を確認したらタブ一覧から元の画面へ切り替え、先ほどと同じ順に照合します。
- 結果に「タブの切り替えは成功したが備考の末尾が消えた」「元のタブを識別できず、選び直したあとに入力が残っていた」のように書きます。ページの移動、入口の識別、値の保持は別の結果です。
架空の記入結果として、同じタブでは戻ったときに日時と人数は見えたものの、備考の末尾が消えたとします。別タブでは三項目が残りましたが、元のタブの名前が「見学会」だけで資料のタブと見分けにくかったとします。判断欄には「別タブ候補。案内文と元の画面の名前を確認してから再試験」と書けます。別タブで開いたことだけを合格にすると、この見分けにくさが抜けます。
確認用画面と本番でフォームの設定が異なる場合、試験の結果は該当する画面に限ります。短い間隔で戻れたときに限って入力が残ったなら、確認票に所要の目安も書きます。条件ページを数分かけて読む想定なら、試験時にその時間に近い使い方を追加します。元のタブに戻ったときに再読み込みが始まった場合は、その後に欄と値を確かめます。何が原因か分からないときも、開く前と再読み込み後の差は制作担当に伝えられます。
WordPressの設定は、編集画面と閲覧画面を分けて確かめる
WordPressの対応ブロックでは、本文のリンクを選び、リンクの編集画面から詳細設定を開くと「Open in new tab」の項目を切り替えられます。日本語表示の名前や操作の位置は、使っているブロックや編集環境によって異なります。編集したいリンクの掲載位置と行き先を先に控え、一つのリンクで試します。設定したあとはその変更が保存されたことを確認し、同じ編集箇所を開き直して、選んだ設定が表示されるか見ます。WordPressのリンク編集資料
公式のサポートフォーラムには、本文のリンクで別タブの指定が保持されず、同じサイトでボタンでは動いたと報告した投稿があります。投稿者は複数のブラウザーを使っていましたが、回答者の検証用環境では同じ症状が出ませんでした。制作担当へ相談するときは、環境が違う相手に「別タブが壊れています」とだけ伝えるより、どのブロックの設定を開き直し、何が見えたかを書きます。WordPress.orgの利用者の報告
保存後は、閲覧者に近い環境で対象リンクをもう一度押します。公開前は、権限のある試験ページを通常の閲覧条件に近づけます。管理画面のリンク編集やプレビューを開くボタンの挙動は、ページ本文からお客様が移動する挙動と別です。別タブを開くための右クリックや長押しを使うと、サイト側の設定の確認になりません。マウスなら通常のクリック、スマートフォンなら短いタップで試し、実際にどの画面がどう開いたかを書きます。
保存し直しても編集画面の設定が戻るなら、その事実と編集したリンクの種類を記録します。保存されているように見えるのに閲覧画面の動きだけ違うなら、使用した閲覧環境と見たURLを記録します。文章中のリンクとボタンで差がある場合は、二つを別行にします。設定が見つからない場合も、本文、フォーム内、共通メニュー、埋め込みのどこにあるか分かれば担当を絞れます。全ページの外部リンクを変える設定に触れる前に、どこに影響が出るか制作担当へ確認します。
押す前に知らせ、切り替えたあとに迷わない言葉にする
「詳しくはこちら」の末尾に小さな矢印を付けただけでは、何が開くか、別タブになるか、押したあとどこへ戻るかを読み取れない人がいます。Bなら「同伴者の参加条件を読む（別タブで開きます）」と文面で示し、入力欄の近くに「条件を読んだら、元の『工房見学会の申込み』のタブに戻ってください」と置く案があります。戻る先として書いた名前は実際のタブ一覧と照合します。資料を開くたびに画面名が変わる場合でも、元の名前が分かれば選び直す手掛かりになります。
リンク自体の文面に入れる場合は、周囲の説明が目に入らなくても意味を取れるよう、対象の名と別タブの案内をそろえます。アイコンを併用するデザインなら、アイコンを覚えていない人にも切り替えが伝わるか見ます。短い文面にしたいからといって「別タブ」だけにすると、何の資料を開くかが消えます。スマートフォンで折り返された文字も含め、押す前に全体が読めることを確認します。
パソコンでは、マウスを使わずにTabキーで通常のテキストリンクへ移動し、選択された場所を示す枠などが見えるか確かめます。Enterキーで開き、元のタブに戻ったあとに、次の入力欄へ移動できるか見ます。選択位置が見つからず、次の欄を探し直した場合は、「日時・人数・備考は保持。次の操作対象を探し直した」と、残った値と位置の結果を分けて記録します。読み上げを使える担当者がいる場合は、実際にリンクへ移動し、資料の名前と別タブの案内が押す前に分かるかを確認します。試験した入力方法と読み上げの環境を残し、未試験の組み合わせは未確認欄へ置きます。
スマートフォンでは、普段に近い向きで、タップしたあとの画面とタブ一覧の両方を見ます。メールアプリやSNSアプリの中で案内を開く人が想定されるなら、使うアプリを限定して追加確認します。ブラウザーではタブ一覧で元のページが見つかっても、アプリ内では画面の開き方や戻り方が異なることがあります。複数の閲覧経路で同じ説明が通じない場合、入力前に条件を読める位置へ案内を移す案を制作担当と検討できます。
確認票の最後に、合否と次に直す箇所を書く
確認票は次の欄から始められます。AからCまで一行ずつ作り、端末やブラウザーで結果が違うときは別行にします。テスト画面のURLに閲覧用の鍵が付く場合、共有先を絞ります。画面を記録する場合は、入力値が架空であることを確認してから撮ります。
掲載元ページ／リンクを押した位置 リンクの文面／着いたページの名前 押す前にしていた用事／残したい入力 同じタブ・別タブの予定／事前案内の文面 試した端末・ブラウザー・入口／確認日時 実際に開いた場所／元の画面へ戻った操作 入力の前後／戻った位置／次の欄へ進めたか 判定（可・修正後に再確認・未確認）／担当／再確認する条件
たとえば「スマートフォンで別タブになった」とだけ渡すと、どの入口を直したいか伝わりません。Bの試験なら、「希望日時の後の条件リンク。別タブと表示され、資料は読めた。元のタブを一覧で区別しづらい。元の画面の表示名と案内文をそろえ、同じ入口で三つの架空値が残るところまで再確認したい」と伝えます。修正後は目的の一件に加え、同じ行き先を使うAも試します。Bだけ別タブにする変更がAにも広がった場合、どちらの入口の理由で設定したかが分かれば戻す判断ができます。
申込み案内を新しく作るときは、リンクの開き方と一緒に、参加条件を読む位置、入力の担当者、公開前に確認する端末を制作範囲に入れておくと引き継ぎやすくなります。申込みまでのページ構成や公開後の更新方法から相談したい方は、LIFESEEDSの制作支援の範囲を確認できます。ホームページ制作サービス。確認票を用意して制作の範囲を相談する場合は、対象の画面と元の作業を添えてお問い合わせください。
コメント