外部リンクは別タブで開くようにするか否か

[oti]

現状、サイト何に外部リンクが多数あります。これを全て「別タブで開く」ようにするかを検討したいです。

場所	キャプチャ
冒頭の元ドキュメントへのリンク
たくさんのストーリ〜のリンク2つ
参考情報のリンク9つ
原典の元ドキュメントへのリンク
Google Analytics 関連のリンク3つ

補足

「別タブで開く」に統一の場合、 <a href="..." rel="noopener" target="_blank">...</a> とするのはもちろん、別タブで開かれる旨のアイコンの表示とそれがわかる読み上げがなされることが望ましいです。

[masuP9]

ユーザーが選択できる方がよい原理主義者なので、 _blank にしない派ですが、する世界線も理解してるので、 _blank にするなら越智さんの補足ができてればオッケーです派でもあります。

[magi1125]

上に同じく。 一番良く知られてるのはこれかなあ。 https://fontawesome.com/icons/external-link-alt

<i class="fas fa-external-link-alt" aria-label="別タブで開く"></i>

SVGも落とせるが、そのときはライセンス表示してね、だって。

You must give appropriate credit, provide a link to the license, and indicate if changes were made.

課金したらライセンス不要なようだ。

If this is a real thorn in your side, grabbing a paid plan removes this attribution restriction (and gives you tons more icons and goodies too).

[oti]

Material Design だとこちらですね。 https://material.io/resources/icons/?search=open_in_new&icon=open_in_new&style=baseline

[magi1125]

そっすね。入れやすい方でええのでは感。

[oti]

見出しにホバー/フォーカスした時のアイコンは Material Design のを使ってるので、「別タブで開く」に統一になったらこちらも Material Design のを使いたいですね。

[magi1125]

おーなるほど、ではマテコンにしましょう

[uknmr]

ユーザーが選択できる方がよい原理主義者

私もこれで _blank にしない派だし oti さんの補足ができれてばいいと思います! @TakehiroKawase さんはどんな意図で「_blank で開くように統一したい」と言ったんだろうか?

[TakehiroKawase]

遅くなってすんません。

どんな意図で「_blank で開くように統一したい」と言ったんだろうか?

結論から言うと、Material Icons 挿入で OK なら、統一しなくて大丈夫っす。 外部リンクアイコン付けないなら _blank に統一するという世界線に僕が生きてただけなんすけど、選ばせる手段を設置できるならハッピーです。

[oti]

取りうる手段の選択肢は

1. 外部リンクは target="_blank" を指定しない
2. 外部リンクは target="_blank" を指定する（かつ rel="noopener" を付与し、アイコンを表示し、別タブで開かれることがわかるテキストをつける）

のどちらかだと思っての補足でした。

カワセさんのコメントだと、上記のどちらでもなくて「別タブで開くアイコンをつけるが target="_blank" はつけない」みたいに聞こえます。

そうなの？

[magi1125]

あ、

外部リンクicon：つける｜つけない _blank設定：する｜しない

は順列組み合わせありうるんで、認識そろえときたいす。 いまのところ「外部リンクアイコンつける、_blank設定しない」が良いんじゃねって感じでしょうか。

[magi1125]

かぶった感。 外部リンクかどうかはリンク先の明示の話で、別タブかどうかはインタラクションの話ってことで、

[TakehiroKawase]

@oti 僕の読み違いです。 コレ系の仕事をしなくなって3年経つので、アイコンを付けてそいつタップのときだけ target="_blank" っていう新しいトレンドができてるのかと勘違いした。

2. 外部リンクは target="_blank" を指定する（かつ rel="noopener" を付与し、アイコンを表示し、別タブで開かれることがわかるテキストをつける）

で行きたいんだけど、そもそも別タブで開くのは邪道であれば、固執するほどではないです。 別タブで開かない場合でも外部リンクアイコンは付けたい気持ちがあるけど、僕この辺邪道を生きてるので、むしろ判断頼りたい。

[uknmr]

外部リンクアイコンつける、_blank設定しない

決まりっぽい!

[TakehiroKawase]

みなさん申し訳ない、これは僕の見識が浅いだけです。 ありがとう…！

[oti]

なるほど。それはそれでOKです。そしたらアイコンのテキストは「外部サイトへのリンクです」などがいいですかね。

で、先のコメントに示したアイコンは「別タブ/ 新規ウィンドウで開く」を示せるけど、外部リンクであることを示すピクトじゃないと思うので、別のを探したいです。

[magi1125]

ですね。テキストは「外部サイトへリンク」とかでしょうかね。 アイコンは…横に出るか。 https://material.io/resources/icons/?search=exit_to_app&icon=exit_to_app&style=baseline

ちなみにfont awesomeだとほぼ同じ見た目でexternal linkってタイトルだったりするので、外部リンクアイコンと別タブアイコンって世間的に明確に区分けされてないかもしれない。

[oti]

外部リンクアイコンと別タブアイコンって世間的に明確に区分けされてないかもしれない。

それは外部リンクを別タブで開くことが多いから同義的になっているだけで、今回の統一しとうとしている対応では普通では別タブで開かないので、別タブっぽいアイコンだとダメなんじゃないかなと思っています。

[oti]

マテコンで使えそうなのはこの辺り‥…

ドアを開けている風→外に出る様子→外部サイト https://material.io/resources/icons/?icon=meeting_room&style=baseline

地球→インターネット→ローカルではないもの→外部のもの→外部サイト https://www.dropbox.com/s/h9a0b4pyr1gn0k7/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202020-04-01%2016.40.29.png?dl=0

[uknmr]

新しく開く対象がウィンドウともタブとも言ってないこれはどうですか?

via https://material.io/resources/icons/?search=open_in_new&icon=exit_to_app&style=baseline

[oti]

最初はそれ使おうと思ってました。 (#issuecomment-607046055) 伊原さんが示してくれていたFont Awesomeのも同様の形状なんですよね。(#issuecomment-607043630)

やっぱりそれなのかな〜。自分的にはこれは「別タブで開く」アイコンであって、外部リンクかどうかには関心を持ってないと思うんですよ。

もはやテキストで （外部サイトへのリンク） って添えられてる方が、「オッ別タブで開くとは言っていないんだな」と理解できる気持ち。

[oti]

@TakehiroKawase 別タブで開くかどうかに関心を持っていないが、外部リンクであることを示しているピクトって、どんなのだったらわかりそうですかね？

[magi1125]

プロコンだと思うんよね。

• ハコから斜め上とか右とかに矢印
  • Pros：（世間の混同があり）知られているので先にわかる
  • Cons：別タブインタラクション感ある
• 地球とかドアとか
  • Pros：別タブインタラクション感ない
  • Cons：知られていないので先にわからない
• 外部リンクと書く
  • Pros：間違いようがない
  • Cons：アイコンよりもっさり＆クドい

どれもページ内（サイト内）で一貫していれば及第点は超えている（一回開けばわかる）と思うので、あとは決めかな。好みはドア。

[oti]

ちょっとローカルでやってみて、ビジュアル出します

[oti]

やってみました。

open_in_new	meeting_room	public

[uknmr]

わたしは open_in_new も public も良いように見えます! ドアは謎感強いwww

[oti]

僕には open_in_new なアイコンがついているリンクは、デフォルトで別タブで開くように見えるんですよね。皆さんは見えないですか？

[uknmr]

デフォルトで別タブで開くように見える

見えます!

[oti]

なんか、アイコンは特に何もしないでこのままで良いのではという気持ちになってきました。