伊原: 齋木さんはどう思われますか?

齋木: 外部リンクだと僕は別タブで開いてることが多いですね。 リンク先に飛んだ後のページと元のページを割とタブを切り替えて見比べることがあったりするので。そういう場合だと別タブで開くほうがいいのかなと。

伊原: ユーザビリティを考えた場合は、別タブで開いたほうがいい場合があるんじゃないかということですね。

アクセシビリティガイドラインの視点

伊原: アクセシビリティガイドラインでは、3.2.5 にユーザーの要求による変化というのがあります。これは要するにユーザーがこうしてほしいとか、先にこうなるよっていうのが予測が立つ状況においてのみ、大きな変化を起こしていいというものです。その例の中には別ウィンドウも含まれています。でもガイドラインとしても最高レベルの AAA、できたらやってほしいというレベルのものです。 予測ができるというのが非常に重要で、知らないうちに大きな変化が起きると混乱して困ってしまう。本当は別タブで開くか、同タブで開くかを選択できるとか、そういう仕組みを入れてほしいというのがガイドラインです。原理原則としてはそういうものがあります。

WCAG 2.0: 3.2.5 要求による変化 コンテキストの変化は利用者の要求によってだけ生じるか、そのような変化を止めるメカニズムを利用可能にする。ページの自動更新、自動的なリダイレクト、予告なしに新しいウィンドウ(タブ)を開くリンク、値の変更をトリガーとしてコンテキストを変更するJavaScriptに注意。

ガイドライン以外の視点

伊原: でも実際にはそれを守っているサイトはどのくらいあるんですか?という慣例としてのものと、それで本当に操作不能になるの?という話があります。 現実的な回答っていう話と、あともう1つは齋木さんも言ってた target="_blank" していない場合は自分の意思で、別タブで開くか同タブで開くか選択できるじゃないですか。cmd + clickctrl + clickするとか、または右クリックで別タブで開くとか。でも target="_blank"を設定されていると、その選択肢を殺してしまうということです。絶対に別タブで開いてしまい、ユーザーが自分で選べなくなるんじゃないかという考え方があります。

西川: 僕は嫌ですね。勝手に新しいウィンドウで開かないでほしいというのがあります。僕は自分で決めたいので、僕が書く記事は別タブで開くリンクは1つもありません。

伊原: はい、そうですね、そういう考え方もあります。 では、どっちの方が便利ですかっていう話があるわけです。わかりやすい例が Amazon なんですが、Amazon の商品の検索結果の一覧って全部別タブなんです。

西川: 確かにあれは便利だ。

伊原: そういう使い方に慣れているというのも、多々あったりするんですね。それに加えて前のページに戻るというのが効かなくなるっていう問題も、最近はブラウザが対応してきているんです。Mac の Safari や iOS の Safari とかは新規のタブが開いて「戻る」を押すと元のタブに戻るんです。

村上: そうなんですか!へー!

伊原: それは iOS 10 くらいから実装されたのかな。でも開いてその先に言っちゃうと戻れなくなるんですけど、開いた後に別のページに遷移してなかったら元のタブに戻るという動きになってたりもするので、ブラウザもそういう形で対応してきているというような状況もあります。 なので、どうした方が正解ですかっていうのはすごい難しくて、解答できないっていう回答になってしまうんですが、少なくともこのような視点があるわけです。 ガイドラインとしての視点があり、慣例としての視点があり、ブラウザが進化してきているという話があり、その方がユーザビリティが高まると判断しているサイトがあって、且つそれがみんなが使うようなサイトでそういうふうにしてます。

結局アクセシビリティという観点でいうと、それで使えなくなっちゃうかどうかというのが問題だと思うんですよね。使い勝手が非常に悪くなるとか、使えなくなっちゃうとか。あとは先にわかるかどうかとか。Amazon とかは別タブで開くというのはそうだろうなっているのがわかっているんですよね。同じ話として YouTube が例えば動画のページへ行くといきなり再生されるじゃないですか。あれもアクセシビリティからすると良くはないですが、もうそう思っちゃってることで、相手は覚悟した上で行くわけです。

そういう状況がある中で、僕の考えとしては基本的には(別タブに)しないで済むときには別タブで開かない方がいいだろうなと思っているんですね。 例えばよくあるのが、このサイトから外に行くっていることを示したいがために別タブにするという話です。でもこれは、外に行くってことを示したい気持ちと、別タブで開くというインタラクションを混同しているなと思っています。それは外に行きますということがリンクに書かれていればそれで良かったりするんです。そこは混ぜないほうがいいだろうなと思います。 また別タブが開くのであれば、開くということが予想できるようなアイコンを置くとか「別タブが開きます」と書くとか、そういう形で先に言えるというのが、まずやるべきことだろうなと思います。

(別タブで開くことを)やめたほうがいいのか、(別タブで)開いたほうが便利なのかどうかというのは、状況によると思っていて、例えば何でもかんでも全部別タブで開くウェブアプリケーションとかがあったら、そんなの使いたくないよねっていう気持ちになると思うんですけど、さっきの Amazon の話でいうとあれって便利だよねっていう話もあったわけなので、それはブラウザの挙動も含めてどういうコンテキストで使われるのかっていうデザインの話だと思うんです。 なので一概にそれをダメとかというふうには言い切れないなと思っています。 それをもう1つ越えると、本当にそれをやったほうがいいのかという客観的な検証をできれば行ったほうがいいなと思っています。それを是なのか非なのかをログ解析から考えましょうという記事があって、これはかなり参考になるので是非見てほしいです。

外部リンクは別ウィンドウで開かせるべきか? アクセス解析でユーザー行動を理解する (1/3):MarkeZine(マーケジン)

伊原: ここに世の中の宗教論争とそれに対する解答の仕方がほぼ載っています。 これを見ていただけるといいかなと思います。 また先程の Safari の動きが変わっているよという挙動についての解説もよかったら見ていただければと思います。

Mac Safari 独自のアクセシビリティに優れたインタラクション — Website Usability Info

伊原: なので、必要がないのにやっていないかというにまず見返すということと、(別タブが)開くっていうことがわかるということ、この2つは大事だと思います。また本当に(別ダブで)開く意味があるのかというのは、できれば確かめてからやったほうがいいというのが僕の考えです。

齋木: そういう流れからいくと、本来だったらウェブサイトをどういう構造にするのかというワイヤーとかを作っている段階で、例えば「ここは別ダブで開いたほうがユーザビリティが上がるよね」とかっていう議論はそこであるべきってことですよね。例えば、コーディングするときにコーダーがここは外部リンクだから target="_blank" にするっていうのは違うってことですよね。

伊原: はい、そうですね。これは結構受託のデザインやってきたときにも必ずあるあるの話で、外部リンクだから別タブでっていうのはよくあって。これは本当に元のタブを残しておいたほうがいいんですかっていうのとか。外部リンクっていうのと別タブで開くっていうのは違う話なんじゃないのって。だからこれは外部リンクのアイコンの話をしているのか、インタラクションとしての別タブで開くというアイコンの話をしているのかというのを、ごっちゃにしているケースはよくあると思います。