リンクとボタンの使い分けガイド — どちらをいつ使うべきか？

Webサイトを見ていると、ボタンとリンク（アンカー要素 <a>）が混同されて使われているケースをよく目にします。しかし、正しく使い分けるのはそれほど難しいことではありません。この記事では、基本的なガイドラインをわかりやすく解説します。

リンク（<a>）を使うべき場面

ユーザーに以下のような「移動」をさせたい場合は、リンク（<a href="/go-here">リンク</a>）を使用します。

• 同じページ内の別セクションへ移動させる
• 自サイト内の別ページへ移動させる
• 外部サイト（別ドメイン）へ移動させる

つまり、リンクとは「ナビゲーション」のための要素です。URLを持つ場所へユーザーを案内する役割を担います。

ボタン（<button>）を使うべき場面

クリックによってJavaScriptで動作するアクションを起こしたい場合は、ボタン（<button type="button">ボタン</button>）を使用します。例えば以下のような場面です。

• スライドインメニューの開閉を切り替える
• ポップアップのモーダルやダイアログを開く

<button>を使うべき好例として、当サイトのヘッダーにある月／太陽アイコンが挙げられます。クリックすると、カラーテーマがライトモードからダークモードへ切り替わります。これはページ遷移ではなく、画面上の状態を変えるアクションだからです。

フォームの送信はどうする？

お問い合わせフォームなど、ユーザーにフォームを送信してもらいたい場合は、submitタイプのinput要素を使用します。

<input type="submit" value="送信" />

なお、<button type="submit">もフォーム送信に利用できます。デザインの自由度が高いので、スタイリングしやすいこちらを選ぶケースも増えています。

アクセシビリティの観点でも重要

リンクとボタンの使い分けは、アクセシビリティの面でも大きな意味を持ちます。スクリーンリーダーの利用者やキーボード操作のユーザーにとって、両者はまったく異なるものとして認識されるためです。

• リンク：Enterキーで押下し、「移動する」ことが伝えられる
• ボタン：Enterキーやスペースキーで押下し、「アクションを実行する」ことが伝えられる

見た目をボタン風にした<a>や、逆にリンク風に見せた<div onclick="...">といった実装は、支援技術の利用者に混乱をもたらします。正しいHTML要素を選ぶことは、SEOだけでなく、すべてのユーザーにとって快適なWeb体験につながるのです。