ページ内アンカーのインタラクションに関する考察

ページの中に複数のコンテンツが含まれている場合、当該コンテンツに直接アクセスできるという意味で「ページ内アンカー」は便利なものですが、気をつけて使わないと、ユーザーが現在位置を見失ってしまう恐れがあります。クリックした結果、ブラウザウィンドウ内に表示されるコンテンツの中にヘッダー表示（グローバルナビゲーションやサイトロゴなど）が一切ない状態だと、ページのアバウトネス（何について書いてあるかを端的に表すもの）を示す情報をユーザーが得にくくなるので、「自分は正しい場所に来たのだろうか」と不安になったりするのです。これは恐らく、ユーザーの多くが無意識のうちに、「クリックするとすなわち、別のページに移動する」というメンタルモデルを持っているからだと思われます。

最近では、JavaScriptを使って、ページ内アンカーのリンク先コンテンツまでアニメーション効果で動いてくれるページを見かけるようになりました。ユーザーには「同じページ内にいるんだな（別のページに移動したわけではないんだな）」ということが伝わるので、さりげないながらも優れたインタラクションと言えるでしょう。当サイトの「アクセシビリティポリシー」でも実験的に実装していますので、触ってみていただければと思います（ページの上の方に「目次」というリンクのリストを設けており、項目をクリックするとアニメーション効果を伴うページ内アンカーになっています）。

このようなページ内アンカーのアニメーション効果を演出するJavaScriptは、数多く存在しますが、外部ページからリンクするようなケース、たとえば「ページA」から「ページB」の中の「コンテンツB-1」にリンクするような場合にも、機能してくれると、より便利かもしれません。ひとつのページに話題が複数あって、ページ中ほどの話題に（外部から）直接リンクしたいという場合、たとえば、FAQページ内の個別項目へ到達させたいといった場合などに、応用できそうです。

当サイトを例にすると、たとえば、「このコラム記事のページ」から「アクセシビリティポリシー」の中の「WCAG 2.0 対応について」に直接リンクするような場合がこれに相当します。今回、「scrollsmoothly.js」というスクリプトを使わせていただきましたが、JavaScriptが有効なWeb閲覧環境でここをクリックすると、いったん「アクセシビリティポリシー」を開いてから「WCAG 2.0 対応について」までアニメーションで動くのがおわかりいただけると思います。

ただ、このようなインタラクションは、問題が無いわけではありません。一見よさげなソリューションのようですが、以前、似たような事例で簡単なユーザビリティテストを実施してみたところ、以下のような反応が見られたことがあります。

• アニメーション効果の意味を、ユーザーが正しく理解できない（ユーザーから見たら、「リンク先のページが開く直前に、何やら動いた」くらいにしか認識されない）。
• クリックしたら、すぐにリンク先のページが開くと期待しているので、勝手に表示が動くことに驚いてしまう。

よくよく考えてみると、このようなインタラクション（「ページA」から「ページB」を開き、そこから自動的に「コンテンツB-1」に導いてくれる動き）は、ユーザーから見れば、「xx秒後に自動的にリダイレクトしますよ」という挙動の一形態とも言えます。認知の素早さや正確さは、ユーザーの経験度合いや身体的/心理的条件によってまちまちなので、異なるページ間での遷移において自動的なアニメーション効果を挟み込むこと自体が、もしかしたら問題なのかもしれません。また、JavaScriptが有効であることを前提にしたインタラクション設計であることも、問題と言えるでしょう。「JavaScriptが無効な状態であってもユーザーは混乱しないか？」という検証は必要だと思います（リンク元のラベルで、<a href="xxx">ページBの、B-1というコンテンツ</a>という具合に、あるページ内の「途中部分」に行くことを明示していれば、混乱を和らげることはできそうですが）。

やはり原則的には、余計に凝った仕掛けは考えずに、クリックしたらそのコンテンツが瞬時に（ユーザーのメンタルモデルに合致する形で）表示される、というのがベストです。その意味では、ひとつのページに盛り込む話題はひとつにするのが王道でしょう。やむを得ずひとつのページに複数の話題（コンテンツ）を盛り込まなければならない場合で、そのコンテンツに外からリンクさせる必要がある場合は、いったんページ先頭をリンク先（到達点）にしておいて、そのページの先頭に目次などを設け、その後はユーザーの任意でページ内移動できるようにするほうがベター、というケースもあるかもしれません。「こうするのが正解」という解はないので（サイトの要件やターゲットユーザー像にもよると思います）、ぜひユーザビリティテストなどでチェックしてみるとよいでしょう。

ユーザビリティと言うと、真っ先に「クリック回数を減らすべし」といったセオリー（？）を思い浮かべる方もいらっしゃると思います。もちろん、目的到達までのクリック数は少ないに越したことはないですが、クリック回数の数値の大小よりも、目的のコンテンツに到達するまでの過程でユーザーが心理的に迷ったり混乱したりしないことのほうが重要です。そんな観点で、ページ内アンカーを見直してみるのも、よいかもしれませんね。