「ページトップへ戻る」はおかしくない？

ここ3ヶ月くらいずっと悩んでいる。どうにも解決方法と言うか、「これ！」と言う回答が見つからないので一旦整理する意味でブログに書いてみる。

よく、「ページトップに戻る」と言うリンクがある。
例えばドコモの製品ページ。ここでは「このページのトップへ」と言う表記でページ内の #top へリンクされている。この #top がどこに書かれているか探してみると、ドコモのロゴの a 要素に name 属性と id 属性の併記でなされている。
今度は mixi のヘルプページではどうか。「TOPへ戻る」と表記され、同様に #top へリンクされている。この #top はソースを見ると164行目に空の a 要素に name 属性で書かれている。

で、自分は何を悩んでいるのか。

1. ページトップなどの表記は正しいのだろうか
2. 本当にページの先頭に遷移するリンク先は #top（または #pagetop など）でよいのだろうか
3. ページの先頭はどこなのだろうか
4. そもそも古典的とも言えるこの手法は正しいのだろうか

この4点が全て。
今まで常識的にやっていたことを1回でも疑問に思うと、そこから先全てが疑問に思えてくるから不思議。うむむ。

ちなみにこのナビゲーションの存在そのものは否定しない。mixi のヘルプページのように、長いページであるとユーザビリティ上あってもよいと思う。だけどこれまで通りのやり方でよいのかが疑問視する点。

1. ページトップなどの表記は正しいのだろうか

ここで問題なのは「ページトップ」や「トップ」、「先頭」それに「戻る」の意味。これらの組み合わせでいろいろな表現がある。

• ページのトップへ
• ページの先頭へ戻る
• ページトップへ
• ページトップに戻る
• トップに戻る
• 先頭へ
• このページのトップに戻る
• このページの先頭へ
• TOPへ
• その他いろいろいっぱい

これらの言葉をかなり砕くと「あなたが現在閲覧しているページの最初に移動します」となる。

そもそもにおいて「トップ」や「先頭」と言う言葉の意味を考えると、header や footer と同じように、位置を意味することになるような気がする。だからそこから導かれるように #top が生まれたのではないかと思う。

2. 本当にページの先頭に遷移するリンク先は #top（または #pagetop など）でよいのだろうか

じゃあ #top と言う表記は正しいのだろうか。フラグメント識別子を含めた URI を1つのリソースとして見ると、top を示すリソースが固有名詞（例えば本のタイトル）であるなら問題ないが、それがページ内の位置を示すのであれば間違いではないか。

参照するリソースが固有名詞の例

<h2 id="top">山田太郎著「トップ」</h2>

参照するリソースがページの位置を表す例

<p id="top"><img src="logo.png" alt="ほげほげ株式会社"</p>

前項で header や footer と同じ、位置を表す意味となると言ったのはこうした理由である。

では代替案はあるのか。それはページの最初がどこであるか定義するかによると思う。

3.ページの先頭はどこなのだろうか

まずはこの double-team.org の大まかな構造から考えてみる。

1. ブログ名（double-team.org）
2. 検索窓
3. ナビゲーション
4. エントリのタイトル
5. エントリの内容
6. （上記2つが続くので略）
7. 最新のエントリ10件のタイトル
8. 月別ごとのエントリ
9. エントリのタグ一覧
10. コピーライト

これをもとに、ページの先頭として考えられる候補はいくつかある。

1. 純粋にページの最初から
   • ブログ名（double-team.org）
2. ヴィジュアル上の最初から
   • ブログ名（double-team.org）
   • 検索窓
   • 最新のエントリ10件のタイトル
   • これらのいずれか
3. ユーザが次に行動しやすいような箇所から
   • 検索窓
   • ナビゲーション
   • 最新のエントリ10件のタイトル
   • 月別ごとのエントリ
   • エントリのタグ一覧
   • これらのいずれか
4. 必要なのはコンテンツなのでエントリから
   • エントリのタイトル

考えようと思えばいくらでも考えられる。
恐らくその Web サイトまたは Web ページにあわせた、適切な箇所を参照するのが良いのだと思う。ただ、Web ページ単位で考えると制作者が思考迷路に陥る可能性が高いので、現実的ではないのかもしれない。
そしてもし Web ページ単体で考えるとなると、ページごとにフラグメント識別子を埋めて行く必要があり、それ以前に前項の #top が本当に正しいのかと考える必要がある。

4.そもそも古典的とも言えるこの手法は正しいのだろうか

フラグメント識別子を含めた1つの URI として考えるのならば、別の解決策を考えてみるのも1つかもしれない。

前項ではページの先頭がどこかを定義する必要があったが、純粋にページの最初であるのが多いと思う。アクセシビリティの分野で名高い富士通株式会社や株式会社インフォアクシアでは body 要素の開始3行以内にページの先頭へのリンク先として id 属性が記述されている。

つまり、極端な話をしてしまえばページの最上部へブラウザが表示してしまえばいいとなる。
これを実際にやっているのがニコニコ動画である。

ニコニコ動画では body 要素の開始直後にページの最初に戻るための id 属性が空の a 要素で記述され、そこにページ下部にあるリンクから参照されているが、その方法が JavaScript で id 属性値が PAGETOP であるところまでスクロールさせると言う手法である。

この方法であれば URI はフラグメント識別子を含めずにページの最初に遷移させることが可能となる。ただし、潜在的には #PAGETOP があるために、見た目上はフラグメント識別子を含めない URI であっても実質的にはこれまで通りの方法とあまり変わらないのは確かである。
さらに言えば、あくまでブラウザ上の表示位置をスクロールして変えただけであって、例えば音声ブラウザではそこに遷移したことにならないので意味が無い。

結論

ここまで書いても結局答えはでてないのだが、一番近いと思っているのはこれ。

<p><a href="filename.html">このページの最初から再度読む</a>

ただしこれも問題があり、再度同一のリソースを参照することになるので「最初から読む＝HTML の参照」となってしまう。意味合いが変わってくる。
また、最初から読むのが必ずしも HTML の先頭からとは限らないので、無駄が発生する可能性がある。
さらに、サーバへのリクエストが増える可能性もあるので、やはり無駄が発生する可能性がある。

なので、やはり結論が出ていない。この辺の考え方を偉い人がブックマークのコメントとかで教えてくれると助かったりします。

あー長かった。これ書くのに3時間かかるとかどんだけー。

参考サイト

• ハイパーリンク -- ごく簡単なHTMLの説明