リンクとボタンの違いとは?移動と操作の使い分けとリンクの見せ方を解説

リンクとボタンの違い

まずは、リンクとは何かを確認し、ボタンとの役割の違いを整理しましょう。

リンクとは

リンクとは、押すと別のページや、同じページの別の場所へ移動する部品です。

正式には「ハイパーリンク」と呼ばれ、Webページ同士を結びつける、Webのいちばん基本的な仕組みです。

代表的なものには、次のような種類があります。

• テキストリンク
  文章の中の言葉に付けるリンクです。
  「詳しくは料金プランのページをご覧ください」の「料金プランのページ」のように使います。
• メニューのリンク
  ヘッダーのメニューやパンくずリストなど、サイトの中を移動するためのリンクです。
  パンくずリストとは、ページの上のほうによくある「ホーム > ブログ > 記事名」のような、今いるページまでの道筋を示す表示のことです。
• 画像やカードのリンク
  記事一覧のカードやバナー画像のように、画像全体を押すと移動するリンクです。
• ページ内リンク
  目次の項目のように、同じページの中の別の場所へ移動するリンクです。

リンクは「移動」、ボタンは「操作」

リンクとボタンのいちばん大きな違いは、リンクは別の場所へ「移動」するためのもの、ボタンはその場で何かを「操作(実行)」するためのものという点です。

画面の部品の役割と動きを定めたW3Cの資料(WAI-ARIA Authoring Practices Guide)でも、ボタンが行う操作は、リンクの働きとははっきり違うものだと説明されています(Button Pattern – WAI-ARIA Authoring Practices Guide(英語))。

	リンク	ボタン
役割	別のページや場所へ移動する	その場で操作を実行する
押したあと	表示されるページや位置が変わる	送信・保存・開閉など、何かが起きる
例	「料金プランを見る」「お問い合わせページへ」「目次の項目」	「送信する」「カートに入れる」「メニューを開く」「削除する」
よくある見た目	色付きの下線付きの文字	塗りつぶしや枠線のある四角
作るときのHTML要素	<a href>(a要素)	<button>(button要素)
キーボードでの操作	Enterキーで移動	EnterキーまたはSpaceキーで実行

キーボードでの操作の違いは、マウスを使わずにキーボードだけでWebページを操作する人にとって大切なポイントです(Link Pattern – WAI-ARIA Authoring Practices Guide(英語))。

見た目と役割がずれると起きること

リンクとボタンの見た目は、それぞれの役割に合わせるのが基本です。

ユーザーは見た目から「押すとどうなるか」を予想するので、見た目と結果がずれると、思ってもいない操作をしてしまうことがあるからです。

たとえば、文章のリンクと同じ下線付きの文字を押したら、移動するのではなく、その場でデータが削除されてしまったら驚くでしょう。

NGの見本では、「メモを削除」が下線付きの文字なので、ユーザーは「削除についての説明ページに移動するのかな」と思って押してしまうかもしれません。

OKの見本のようにボタンの見た目にしておけば、「押すとその場で何かが実行される」と予想でき、押す前に気持ちの準備ができます。

一方で、「申し込む」のように申し込みページへ移動するだけのものを、目立たせるためにボタンの見た目にすることはよくあります。

これは「ページの中でいちばん押してほしい入り口」を目立たせるための使い方なので、問題ありません。
このように、申し込みや問い合わせなど、ユーザーにしてほしい行動へ誘うボタンをCTAボタンといいます(作り方はCTAボタンとは?で解説しています)。

大切なのは、ユーザーが押す前に「押したらどうなるか」を予想でき、その予想どおりの結果になることです。

リンクの見せ方と書き方

ここからは、リンクをリンクだと分かってもらうための見た目と、リンクの文言の書き方を見ていきます。

色と下線でリンクだと分かるようにする

文章の中のリンクは、本文とは違う色にし、下線を付けておくのが基本です。

色の違いだけでは、色の見え方が人と違う人や、明るい屋外で画面を見ている人には、リンクだと気づかれないことがあるからです。

Webサイトを誰にとっても使いやすくするための国際的なガイドラインWCAGでも、色だけで情報を伝えたり、要素を見分けさせたりしないことが求められています(WCAG 2.2 達成基準1.4.1 色の用途・WAIC日本語訳)。

NGの見本は、リンクの文字が本文の色とほとんど同じで、下線もないため、ただの文章にしか見えません。

OKの見本は、色と下線の2つの手がかりがあるので、色を見分けにくい人にもリンクだと伝わります。

なお、メニューのように「並んでいるものが全部リンク」だと見た目や置き場所から分かる場所では、下線を付けないデザインもよく使われます。

下線を省いてよいのは、そこが押せる場所だとほかの手がかりで伝わる場合だけ、と考えておきましょう。

リンクの色の選び方や、本文の文字色との差の付け方はリンク・ボタンなどのUIカラーとは?、色以外の手がかりの考え方は色だけに頼らないデザインとは?で解説しています。

訪問済みのリンクは色を変える

一度見たページへのリンクは、まだ見ていないリンクと色を変えて表示することができます。

これを「訪問済みリンク」といい、記事の一覧や検索結果のように、似たリンクがたくさん並ぶ場所で特に役に立ちます。

反対に、ヘッダーのメニューのように何度も行き来する場所では、色を変えないデザインもよくあります。すべてのリンクで色を変える必要はなく、「どれを読んだか」を見分けたい場所で使うと考えておきましょう。

どのページをもう読んだかがひと目で分かるので、同じページを何度も開いてしまうのを防げるからです。

見本では、まだ開いていない記事は青、開いたことのある記事は紫で表示しています。

訪問済みの色も、背景とのコントラスト比(明るさの差)が十分にあり、本文の文字色とも区別できる色を選びましょう。

コントラスト比は、文字の色と背景の色の明るさの差を「〇:1」で表した数値で、大きいほど読みやすくなります。WCAGでは、ふつうの大きさの文字で4.5:1以上が求められています(WCAG 2.2 達成基準1.4.3 コントラスト(最低限)・WAIC日本語訳)。見本の紫は白い背景に対して約6.7:1なので、十分に読み取れる差があります。

なお、訪問済みリンクにはプライバシー保護のため、変えられる見た目が色などに限られています(:visited – MDN Web Docs)。

訪問済みかどうかで文字の大きさや形を変える、といった表現はできないので、色の変化で伝えると考えておきましょう。

外部サイトへのリンクは、そうと分かるようにする

ほかのサイトへ移動するリンクや、新しいタブ(ブラウザの別の画面)で開くリンクは、押す前にそれが分かるようにしておくと親切です。

押したとたんに知らないサイトへ移ったり、新しいタブが開いて元のページに戻れなくなったりすると、ユーザーが戸惑うからです。

外部リンクを表すアイコン(四角から矢印が飛び出したような記号がよく使われます)を添えたり、「(外部サイト)」「(PDF)」のように移動先の種類を文字で書いたりする方法があります。

リンク文は「こちら」ではなく行き先を書く

リンクの文言は、「こちら」「ここをクリック」ではなく、押すとどこへ行くのかが分かる言葉にします。

「こちら」だけでは、前後の文章を読まないとリンクの行き先が分からず、ページをざっと眺めたときにも目に留まりにくいからです。

また、目の見えない人や見えにくい人が使う、画面の文字を音声で読み上げる機能(スクリーンリーダー)の利用者の中には、ページのリンクだけを一覧にして読み上げさせる人もいます。

その一覧に「こちら」「こちら」「こちら」と並んでいたら、どれがどこへのリンクなのかまったく分かりません。

WCAGでも、リンクの目的が、リンクの文字だけか、リンクの文字とその前後の文脈から判断できることを求めています(WCAG 2.2 達成基準2.4.4 リンクの目的(文脈内)・WAIC日本語訳)。

NGの見本では、リンクの部分だけを見ると「こちら」が2つ並ぶだけで、どちらがどこへのリンクか区別できません。

OKの見本では、「料金プランの詳細」「店舗へのアクセス」とリンクの文字に行き先が書かれているので、リンクだけを拾い読みしても迷いません。

リンクの文字が長めになるぶん、押せる範囲が広がって押しやすくなる、というよい面もあります。

コーディングでリンクとボタンを作り分ける

ここからは、Webサイトを自分でコーディングする人向けの補足です。

デザインツールだけで作る場合は、「移動するものはリンク、その場で操作するものはボタン」と、開発者に役割を伝えられれば十分です。

HTML(Webページの骨組みを書く言語)では、リンクはa要素、ボタンはbutton要素で作ります(<a>: アンカー要素 – MDN、<button>: ボタン要素 – MDN)。

<!-- 別のページへ移動する:リンク -->
<a href="/plans/">料金プランの詳細</a>

<!-- その場で操作する:ボタン -->
<button type="button">メモを削除する</button>

見た目はCSS(色や形などの見た目を指定する言語)で自由に変えられるので、「ボタンの見た目のリンク」も「文字だけに見えるボタン」も作れますが、HTMLの要素は役割に合わせて選びます。

要素を正しく選んでおくと、キーボードでの操作や読み上げ機能が、リンクやボタンとして正しく扱ってくれます。

実践のポイント

リンクとボタンを使い分けるときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• デザインをすっきり見せたくて、文章の中のリンクの下線を消してしまうことがあります。
  色の違いだけでは気づかない人がいるので、文章の中のリンクには下線を残しましょう。
• その場で実行される操作(送信・削除・開閉など)を、下線付きのリンクの見た目にしてしまうことがあります。
  押す前に結果を予想できるよう、操作にはボタンの見た目を使いましょう。
• 「こちら」「詳しくはこちら」をリンクの文字にしてしまうことがあります。
  リンクの文字そのものに行き先を書きましょう。
• 押せない強調の文字に、リンクと同じ色や下線を使ってしまうことがあります。
  リンクではないのにリンクに見えるので、下線はリンクのためだけに取っておきましょう。

よくある質問

• Q. 別のページへ移動するものを、ボタンの見た目にしてもいい?
  A. 構いません。
  「申し込む」「資料をダウンロードする」のように、ページの中でいちばん押してほしい入り口は、目立たせるためにボタンの見た目にすることがよくあります。
  その場合も、コードではリンク(a要素)として作り、押した結果がユーザーの予想と合うようにしましょう。
  なお、見た目がボタンでもリンクとして作ったものは、キーボードではEnterキーで移動し、Spaceキーでは動きません(ページがスクロールします)。Enterキーはリンクにもボタンにも共通なので、キーボードで操作する人も迷わず使えます。
• Q. リンクは必ず青色にしないといけない?
  A. 必須ではありません。
  青はリンクの色として多くの人になじみがありますが、サイトの配色に合わせて別の色にしても構いません。
  その場合は、本文の文字色とはっきり区別でき、下線も付けて、サイトの中で同じ色にそろえましょう。
• Q. リンクは新しいタブで開いたほうがいい?
  A. 基本は、同じタブで開くのがおすすめです。
  新しいタブで開くと、ブラウザの「戻る」で元のページに戻れなくなり、戸惑う人がいるためです。
  入力中のフォームから利用規約を確認する場合など、元のページを開いたままにしておきたい場面に限って使い、そのことをアイコンや文字で知らせましょう。

まとめ

リンクは別のページや場所へ「移動」するもの、ボタンはその場で何かを「操作」するもので、ユーザーは見た目から押した結果を予想しています。

文章の中のリンクは本文と違う色と下線でリンクだと分かるようにし、リンクの文字には「こちら」ではなく行き先を書くことがポイントです。

まずは自分のサイトやブログの記事を1つ開き、「こちら」だけがリンクになっている箇所がないか探して、行き先の分かる言葉に書き換えてみてください。