ユーザーの使いやすさから考えるtarget=”_blank”の使いドコロ3点

リンクを別タブで開くことのできる「target=”_blank”(以下タブゲラ)」、つけるかつけないかについてはずっと意見が分かれていて絶えず論争が繰り広げられています。

この記事では、僕が個人的に思うタゲブラの使いドコロについて、ユーザー的にはどうあれば使いやすいのかを考えながらやってみましょう。

基本は以下の3つの場合のときだけでいいんじゃないかと思います

1.別サイトへのリンク
2.画像やpdfを開かせるとき
3.フォームの途中




1.別サイトへのリンク

自分のサイトから、全然違うサイトに飛ばすとき。

例えばAからBに飛ばすとして、Bの中でもナビゲーションとかでいろんなページを見回ることもあると思うんですが、ブラブラ~っと見た後、「あれ、Aに戻れないじゃん…」となったらめんどくさいですよね。

2.画像やpdfを開かせるとき

こんな感じで画像リンクを貼ったページに飛ばされたあと、閉じようとするときタブごと閉じちゃいませんか?

そうなると元いたページに戻るのがめんどくさい。「Ctrl + Alt + T」で閉じたタブをもとに戻せることを知っている人なんてそう多くないでしょう。

3.フォームの途中

ネットショップでお買物をし、カート画面で情報入力をしている途中、「送料についてはこちら」というリンクがあったのでクリックして読んだ。そのあとフォームに戻ったら、もう一回最初から入力しなおしになった。

うーん、めんどくさい。タゲブラしましょう。

以上、

1.別サイトへのリンク
2.画像やpdfを開かせるとき
3.フォームの途中

この3点においてはタゲブラ使った方がユーザーに優しいです。

タゲブラは余計なお世話なのか?

タゲブラはユーザーにとって選択肢を奪う行為なのでいらない」という意見について。別タブで開きたかったら自分で開くからいらんよってことですね。

でもいちいち一般ユーザーが右クリック開いて別タブで開きます?僕ですらめんどくさいですよ?なんならスマホで別タブで開く方法知らないですし。
もしその知識があるユーザーだとしても、タゲブラによって別タブで開くことが正しい世界線においては、わざわざ「このクリックは別タブで開こう」とか思わないですよね。だって開くのが自然だもの。

「あれ、どこのコンビニも袋詰めてくれるのに、ここのコンビニは自分で詰めんとあかんのや。めんどくさ」と同じ感覚になると思います。

あと、「スマホではタブを閉じれないようなリテラシ低いユーザーがいるから、そんなユーザーにとっては端末への負担が増えるだけなのでいらない」という意見もありましたが、そこまで使えない少数ユーザーのために、他の大多数のユーザーののための便利を犠牲にするのもよくないんじゃないかと。

どちらにしても、一般的に行われている施策なので、世界を変えるくらいのつもりがないのであれば、それに抗ってタゲブラをあえて使わないというのはやっぱりユーザーにとっては使いづらさしか感じないと思うんですよね。

タゲブラは非推奨なのか?

なんか昔は非推奨だったらしいですが、今は普通に使っていいです。

ただ、脆弱性が確認されました。Googleが以下の通り勧告を出しています

target=”_blank” を使用して任意のページから別のページにリンクしている場合、リンク元のページとリンク先のページは同じプロセスで動作します。 そのため、リンク先のページで負荷の高い JavaScript が実行されていると、リンク元のページのパフォーマンスが低下するおそれがあります。

また、target=”_blank” にはセキュリティ上の脆弱性もあります。リンク先のページでは window.opener を使用して親ウィンドウのオブジェクトにアクセスしたり、window.opener.location = newURL によって親ページの URL を変更したりできます。

レポートを確認して、Lighthouse で特定された各リンクに rel=”noopener” を追加します。 一般的に、外部リンクを新しいウィンドウまたはタブで開く場合は、必ず rel=”noopener” を追加してください。

(参考:https://developers.google.com/web/tools/lighthouse/audits/noopener?hl=ja

これはつまるところ、「自分のサイトから別のサイトに飛んだとき、とんだ先のサイトで負荷の高いJavaScriptがあると、元のサイトにも何らかの影響があるかもしれないよ」と言っていて、別サイトに飛ばす場合は、以下のように必ず「rel=”noopner”」をつけようねってことです。(「rel=”nofollow noopner”」にしてねと言われていたこともありましたが、今は「rel=”noopner”」だけでいいみたい)

以上、現場からでした。

バイバイ!