aタグとbuttonタグの使い分けについて

さて、Webサイトのデザインを見ていると、「四角い枠で囲まれた、クリックできそうなパーツ」がたくさんありますよね。 「お問い合わせはこちら」だったり、「送信する」だったり、「メニューを開く」だったり。

「押して動作するギミック」という観点だけで見ると、aタグもbuttonタグも同じように見えますし、「クリックできればどっちでも動くじゃん」と思うかもしれません。

しかし、実際の現場ではこの2つを明確なルールで使い分けています。
ここを間違えると、Googleの検索ロボットがサイトを巡回できなかったり、目の見えない方が使う読み上げソフト（スクリーンリーダー）で操作不能になったりするからです。

今回は、見た目に惑わされない「aタグ」と「buttonタグ」の正しい使い分けルールを、プロの視点で優しく解説します。

結論：「どこかへ移動する」のか「何かアクションを起こす」のか

最初に一番大切なルールをお伝えします。迷ったら、この基準に立ち返ってください。

• <a> タグ：ページを移動するときに使います。（場所の変更）
• <button> タグ：その場で機能を作動させるときに使います。（機能の実行）

見た目がどれだけ「ボタンっぽいデザイン」であっても、この役割によってタグを使い分ける必要があります。 それでは、それぞれの特徴を詳しく見ていきましょう。

<a> タグ（アンカータグ）の役割

<a>は「Anchor（アンカー）」の略で、船の錨（いかり）を意味します。Webの世界では「リンク」を作るためのタグです。

基本的な役割：移動（遷移）

ユーザーを「今の場所」から「別の場所」へ連れて行くのが仕事です。

• 別のページへ移動する（例：トップページから会社概要へ）
• 外部のサイトへ移動する（例：自社サイトからSNSへ）
• 同じページ内の別の場所へジャンプする（例：ページの先頭へ戻る）

なぜ <a> でなければならないのか？

最大の理由はSEO（検索エンジン対策）です。 Googleの検索ロボット（クローラー）は、<a>タグの href属性（リンク先URL）をたどって、インターネット上のページを次々と巡回しています。

もし、ページ移動のリンクを<button>タグで作ってJavaScriptで無理やり移動させるような作りにしてしまうと、検索ロボットは「ここは行き止まりだ」と判断して、その先のページを見つけてくれない可能性があります。

コード例

どんなにボタンっぽい見た目でも、移動するならこう書きます。

HTML

<a href="/contact.html" class="btn-primary">
  お問い合わせはこちら
</a>

<button> タグの役割

その名の通り「ボタン」を作るタグですが、Web制作における「ボタン」の意味は少し狭いです。 これは「フォームの送信」や「JavaScriptのきっかけ（トリガー）」として使います。

基本的な役割：アクション（実行）

ページ移動をせず、その画面のままで何かを変化させたり、データを送ったりするのが仕事です。

• お問い合わせ内容を「送信」する
• スマホでハンバーガーメニューを「開く・閉じる」
• モーダルウィンドウ（ポップアップ）を「表示する」
• スライダー（カルーセル）を「次へ送る」

なぜ <button> でなければならないのか？

最大の理由はアクセシビリティ（使いやすさ）です。

キーボード操作やスクリーンリーダーを使っているユーザーにとって、<a> と <button> は、実は挙動が違います。 一般的に、キーボード操作では以下のように反応します。

• リンク（aタグ）：Enterキーで移動
• ボタン（buttonタグ）：Spaceキー または Enterキーで実行

もし「メニューを開く」という動作を <a> タグ（href=”#”）で作ってしまうと、スクリーンリーダーは「リンク」と読み上げます。ユーザーは「どこか別のページに飛ぶのかな？」と思ってクリックしたら、飛ばずにメニューが開く…という混乱を招いてしまいます。

コード例

JavaScriptを動かすためのスイッチとして使う場合はこう書きます。

HTML

<button type="button" class="menu-trigger" aria-label="メニューを開く">
  <span></span>
  <span></span>
  <span></span>
</button>

【ケーススタディ】これはどっちを使う？クイズ

理解を深めるために、よくあるシチュエーションで「どっちを使うべきか」を見てみましょう。

Q1. 「詳細はこちら」ボタン

ブログ記事の一覧などで、記事の個別ページに飛ぶためのボタンです。

• 正解：<a> タグ
• 理由： 別のページ（記事の詳細ページ）へ移動するため。

Q2. お問い合わせフォームの「確認画面へ」ボタン

入力が終わった後に押すボタンです。

• 正解：<button> タグ
• 理由： フォームに入力されたデータをプログラムに渡す「送信（submit）」のアクションだからです。

Q3. 「ページトップへ戻る」ボタン

クリックすると、スクロールして一番上に戻るボタンです。

• 正解：<a> タグ
• 理由： 少し悩みますが、これは「ページ内の最上部（id=”#top”など）」への「移動」とみなすのが一般的です。

Q4. アコーディオン（Q&A）の開閉バー

「Q. 質問文」をクリックすると、「A. 回答文」がペロッと開くやつです。

• 正解：<button> タグ
• 理由： ページ移動はせず、隠れている要素を表示させる「機能」だからです。

Q5. 印刷ボタン

クリックするとブラウザの印刷画面が開くボタンです。

• 正解：<button> タグ
• 理由： JavaScript（window.print()）を実行する機能だからです。

まとめ

いかがでしたか？ 「四角くてクリックできるもの」＝「ボタンタグ」ではない、ということがお分かりいただけたでしょうか。

1. ページや場所が変わるなら <a> タグ（リンク）
2. その場で機能が動くなら <button> タグ（ボタン）
3. デザイン（見た目）とHTML（構造）は切り離して考える

この3つを意識するだけで、あなたの書くコードは「ただ動くだけのコード」から、「誰にでも使いやすく、検索エンジンにも強いプロのコード」に変わります。

もし、「うちのサイト、全部JavaScriptのボタンで作っちゃってるかも…」と不安になったり、「デザイン通りに実装したいけど、どっちのタグを使えばいいか迷う」といったお悩みがあったりすれば、ぜひ私たちWeb制作会社にご相談ください。

見た目の美しさだけでなく、中身の構造まで配慮した、高品質なWebサイト構築をお手伝いさせていただきます。