スマートフォンで自社サイトの記事ページを開いて、親指が自然に届く右下を見てください。「↑」が浮いていて、その近くに問い合わせや資料請求の追従ボタンがある——このレイアウトになっているサイトは多いです。
画面の中でいちばん押しやすい領域を、成果に直結するボタンと、ページの先頭に戻るだけのボタンが取り合っています。 どちらを残すかと聞かれれば答えは明らかなのに、「トップへ戻る」は最初から入っている前提で話が進みます。制作の見積もりにも「標準実装」として入っていることが多く、要否が議題に上がりません。
付ける理由の多くは、ブラウザにすでにある機能の代替
このパーツが定着したのは、ページが長く、スクロールの手段が乏しかった時代の名残です。現在は同じことがもっと短い操作でできます。
- iPhone / iPad：画面上部のステータスバーをタップすると先頭に戻る
- PC：Home キーで先頭に戻る
- 多くのブラウザ：スクロールバーのドラッグで一気に移動できる
OS とブラウザが標準で提供している操作を、画面上に再実装しているのが「トップへ戻る」ボタンです。 もちろん、これらの操作を知らない利用者はいます。ただし知らない利用者は、右下の「↑」の意味も知らないことが少なくありません。知っている人には不要で、知らない人には伝わらない、という位置に立っています。
押しても、読み上げ位置は戻らないことがある
アクセシビリティ観点で問題になるのは、見た目ではなく挙動です。
<a href="#top"> のようにフラグメント識別子へのリンクとして実装した場合、移動先の要素がフォーカスを受け取れないと、ブラウザによってはフォーカスが移動しません。 見た目のスクロール位置は先頭に戻るのに、キーボード操作の起点やスクリーンリーダーの読み上げ位置はページ下部に残ったままになります。URL には #top が付き、履歴だけが増えます。
「見た目は動いたのに、操作の起点は動いていない」という、通常のリンクやボタンでは起きない状態です。移動先に tabindex="-1" を付けてフォーカスを受け取れるようにする、といった対処が要りますが、これが入っている実装はあまり見かけません。
JavaScript で window.scrollTo() を呼ぶだけの実装だと、フォーカスは一切動きません。こちらのほうが実装としては素直に見えるぶん、問題は分かりにくくなります。
そのほか、実装によっては次の副作用も出ます。
- 透明なクリック領域がボタンの周囲に広がっていて、隣の要素を押そうとして誤タップする
- 画面を拡大表示している利用者にとって、追従要素が本文の相当な面積を覆う
- 横スクロールが発生する幅で、ボタンが本文に重なる
3つ目は、アクセシビリティ対応を「対応済み」と言い切る前に確認しておきたい点の一つでもあります。自動チェックツールでは検出されず、実機で拡大して初めて見つかる類のものです。
追従要素の枠は、1つしかないと考える
実務上の判断はここに尽きます。画面に固定して表示できる要素の数には、事実上の上限があります。 2つ置いた時点で、どちらも「常に視界にあるノイズ」に近づきます。3つ置けば、利用者は全部を無視します。
だとすれば、その1枠に何を置くかは、サイトの目的から決まります。
| サイトの性質 | 追従の1枠に置くもの |
|---|---|
| 問い合わせ・資料請求が目的のコーポレートサイト | 問い合わせ導線 |
| 記事を読ませるメディア | 何も置かない（本文の可読面積を優先） |
| 商品を選ばせる EC・比較サイト | カート・比較・絞り込みなど、選択の途中状態を保持する要素 |
「トップへ戻る」がこの表に入る場面は、あまりありません。 入るとすれば、先頭に戻る行為そのものが業務動線になっているサイトです。
それでも置くべき条件
不要と言い切る話ではありません。次のいずれかに当てはまるなら、置く合理性があります。
1つ目は、ページ先頭に操作の起点があり、そこへ何度も戻る前提のページです。 検索条件のフォームが上部にあり、結果を下まで見てから条件を変える、という往復が発生する一覧ページがこれにあたります。この場合は「トップへ戻る」ではなく「検索条件を変更する」というラベルにしたほうが、目的が明確になります。
2つ目は、極端に長い単一ページです。 ランディングページや年史ページのように、1ページで数十画面ぶんの長さがあり、かつページ内ナビゲーションを置いていない場合です。ただしその場合、本来の解決策は目次やセクション間の移動手段を用意することであって、先頭に戻す動線ではありません。
置くと決めたなら、実装で最低限これを満たしてください。
- 移動先の要素にフォーカスが移ること（
tabindex="-1"を付ける、あるいはスクリプトで明示的にフォーカスを移す） prefers-reduced-motionを尊重すること（スムーススクロールは、動きに敏感な利用者にとって不快になり得ます。スクロール連動の演出全般に共通する配慮です）- タップ領域が視覚的な境界と一致していること（透明な余白でクリック範囲を広げない）
- 拡大表示時に本文を覆わないこと
次にやること
まず、自社サイトをスマートフォンで開き、記事ページを中ほどまでスクロールしてスクリーンショットを撮ってください。 画面下部 3 分の 1 に何がいくつ浮いているかを数えます。2 つ以上あるなら、そこで何かを1つ落とす判断ができます。
次に、アクセス解析でその「↑」がどれだけ押されているかを確認してください。 イベント計測を入れていないなら、まず入れるところからです。押されていないものを、成果に直結する導線と同じ場所に置き続ける理由はありません。
サイトの追従 UI の整理、スマートフォンでの導線設計、アクセシビリティ観点での既存サイト点検については、グリームハブの HP 制作・リニューアル相談で承っています。サイトの目的とページ構成によって最適解が変わるため、個別にご相談ください。お問い合わせからどうぞ。
