リンクとボタンは何が違う？見た目が同じでも使い分ける理由

Webサイトには、「詳しく見る」「お問い合わせ」「送信する」「メニューを開く」など、クリックできる要素が数多くあります。

見た目はいずれもボタンのようにデザインされることがありますが、HTMLではリンクとボタンを目的に応じて使い分ける必要があります。

どちらを使ってもクリックできるように実装することは可能です。

しかし、役割を間違えると、キーボードで操作しにくくなったり、別のタブで開けなくなったり、読み上げ機能に正しい意味が伝わらなくなったりします。

今回は、リンクとボタンの違いと、Web制作での判断基準を解説します。

リンクは別の場所へ移動するためのもの

リンクの役割は、利用者を別の場所へ移動させることです。

別のページを開く、同じページ内の特定の場所へ移動する、外部サイトへ移動するといった場合に使用します。

たとえば、次のような項目です。

詳しく見る

会社概要を見る

制作実績一覧へ

お問い合わせページへ

ページ上部へ戻る

外部サイトを開く

クリックした結果、URLや現在地が変わるのであれば、基本的にはリンクが適しています。

見た目が四角形で背景色が付いていても、移動を目的としているなら役割はリンクです。

ボタンはその場で処理を実行するためのもの

ボタンは、現在の画面上で何らかの処理を実行するときに使用します。

フォームを送信する、メニューを開閉する、質問の回答を表示する、ダイアログを開くといった操作が代表的です。

たとえば、次のような項目です。

送信する

メニューを開く

検索する

条件を絞り込む

回答を表示する

入力内容を削除する

クリックしても別のページへ移動せず、画面の状態やデータが変化する場合は、ボタンが適しています。

見た目ではなく動作で判断する

リンクとボタンを見た目だけで判断すると、実装を間違えやすくなります。

一般的にリンクは下線付きの文字、ボタンは背景色の付いた四角形として表示されます。

しかし、CSSを使えばリンクをボタンのように見せることも、ボタンを文字だけのように見せることもできます。

HTMLでどちらを選ぶかは、デザインではなくクリック後の動作で決めます。

「押したあとに移動するのか」「その場で処理するのか」を考えると判断しやすくなります。

「お問い合わせ」は状況によって変わる

同じ文言でも、実際の動作によって適切な要素は変わります。

「お問い合わせ」という表示をクリックして、お問い合わせページへ移動するのであればリンクです。

ページ内のお問い合わせフォームまでスクロールする場合も、別の位置へ移動するためリンクとして考えられます。

一方、「送信する」を押して入力内容をサーバーへ送る場合はボタンです。

文言だけではなく、その要素が何を実行するのかを確認する必要があります。

リンクをボタンで作ると起きる問題

ボタンにJavaScriptを追加すれば、別のページへ移動させることもできます。

画面上では問題なく動いているように見えるかもしれません。

しかし、本来のリンクであれば利用できる機能が失われる可能性があります。

たとえば、リンクはブラウザの機能を使って別タブで開いたり、リンク先を確認したりできます。

ボタンで無理にページ移動を実装すると、こうした標準的な操作が使いにくくなります。

JavaScriptが読み込めなかった場合に移動できなくなる可能性もあります。

ページ移動というブラウザが最初から持っている機能を、無理にJavaScriptで作り直す必要はありません。

ボタンをリンクで作ると起きる問題

反対に、リンクを使ってメニューの開閉やフォーム送信などの処理を実装することも避けるべきです。

リンクは移動する要素としてブラウザや支援技術に認識されます。

実際には移動せずに処理だけを行うと、利用者が予想した動作と一致しません。

また、リンクとボタンではキーボード操作の方法や、読み上げ機能へ伝わる役割が異なります。

見た目とマウス操作だけで確認すると気付きにくい問題ですが、さまざまな操作方法へ対応するためには正しい要素を選ぶ必要があります。

JavaScriptで操作する要素ほどボタンの意味が重要

ハンバーガーメニューやアコーディオンなど、JavaScriptで画面を変化させる要素はボタンとして実装するのが基本です。

さらに、現在開いているのか閉じているのか、どの内容を操作しているのかといった状態も伝える必要があります。

見た目では矢印の向きや背景色によって状態を表現できます。

しかし、画面を見ずに操作する人へは、それだけでは状態が伝わりません。

適切なHTMLと補助的な属性を使用し、操作対象や現在の状態を分かるようにすることが重要です。

デザイン上の名称とHTMLの役割は別

制作現場では、リンクであっても「CTAボタン」「詳細ボタン」などと呼ばれることがあります。

これはデザインや部品の名称であり、HTMLでも必ずボタンを使うという意味ではありません。

たとえば「無料相談はこちら」というCTAが相談ページへ移動するなら、見た目はボタンでもHTML上の役割はリンクです。

クラス名にボタンという言葉が含まれていても、使用するHTML要素まで同じとは限りません。

実装時には、デザイン上の呼び方と機能上の役割を分けて考えます。

迷ったときの判断方法

リンクとボタンのどちらを使うか迷ったときは、クリック後に何が起きるかを確認します。

別ページへ移動するならリンク

外部サイトへ移動するならリンク

ページ内の別の場所へ移動するならリンク

フォームを送信するならボタン

メニューを開閉するならボタン

表示内容を切り替えるならボタン

ダイアログを開くならボタン

「移動はリンク、処理はボタン」と覚えておくと、基本的な判断がしやすくなります。

まとめ

リンクとボタンは、見た目ではなく役割によって使い分けます。

リンクは別のページや場所へ移動するための要素です。ボタンは、現在の画面で処理を実行するための要素です。

CSSやJavaScriptを使えば、どちらでも似た見た目や動作を作れます。

しかし、本来の役割と異なる要素を使用すると、ブラウザの標準機能やキーボード操作、読み上げ機能へ悪影響を与える可能性があります。

クリックできれば完成ではありません。

利用者が動作を予測でき、さまざまな方法で正しく操作できるように、目的に合ったHTMLを選ぶことが大切です。