Studioのリンク設定の基本——目的地に応じた開き方の使い分け

サイトの中には、いろいろな種類のリンクが混ざっています。同じサイトの別のページに飛ばすリンク、外部サイトに飛ばすリンク、ページ内の少し下にスクロールするリンク——目的地の性質によって、開き方や設定を変えたほうが使いやすくなることがあります。

この記事では、リンクの目的地ごとにどう設定するとよいか、基本の考え方を整理します。

サイト内のページへのリンク：同じタブで開く

自分のサイトの別のページへのリンクは、基本的には同じタブで開くのが分かりやすい設定です。

新しいタブがどんどん開いていくと、あとで元のページに戻りたいときに迷いやすくなります。サイト内の移動は、同じタブの中で完結させるのが基本です。

外部サイトへのリンク：新しいタブで開く

他のサイトへのリンクは、新しいタブで開く設定にしておくと親切です。

自分のサイトを見ていたタブがそのまま残るので、外部サイトを見終えたあとに、また同じタブに戻ってこられます。参考リンクや、外部サービスへの申し込みボタンなどはこの設定が向いています。

ページ内の別の場所へのリンク：アンカーリンク

「料金プランまでスクロール」のような、同じページの中の別の場所へ移動するリンクは、アンカーリンクと呼ばれる仕組みで作ります。

長いページを作るときは、目次やナビゲーションからそれぞれのセクションへアンカーリンクを用意しておくと、読み手が知りたい情報にすぐたどり着けるようになります。

メール・電話番号へのリンク

問い合わせ先のメールアドレスや電話番号も、文字として書くだけでなく、リンクにしておくと親切です。

端末にメールアプリが設定されていれば、メールアドレスのリンクをタップしたときにそのアドレス宛の下書き状態で立ち上がります。電話番号も同様に、スマートフォンでタップすればそのまま発信できます。

まとめ

リンクは「どこに連れて行くか」によって、ふさわしい開き方が変わります。サイト内は同じタブ、外部サイトは新しいタブ、ページ内の移動はアンカーリンク——この基本を押さえておくだけで、サイト全体の使い勝手が整います。公開前に見直しておきたい細かい設定は他にもあります。Studioでファビコン・OGP画像を設定する基本——タブとSNSシェアの見え方を整えるもあわせてご覧ください。