そのボタン、リンクと迷われていませんか？既存UI診断チェックリスト
2026年 9月18日
リンクとボタンの混同がCV低下・誤操作を招く理由
公開済みのWebサイトを運用していると、「クリック率が思ったより伸びない」「特定のページだけ離脱率が高い」といった課題に直面することがあります。原因を掘り下げていくと、リンクとボタンの見た目や振る舞いが混同されているケースは珍しくありません。
リンクは「別のページや別の場所へ移動する」ための要素であり、ボタンは「その場で何らかの処理を実行する」ための要素です。この意味の違いがユーザーに正しく伝わっていないと、次のような事故が起こります。
- 遷移すると思ってクリックしたら、フォームが送信されてしまった
- 実行ボタンだと思っていたら、別ページに飛ばされて入力内容が消えてしまった
- どちらの動きをするのか判断がつかず、クリック自体をためらってしまう
特に問い合わせや資料請求といったコンバージョンに直結するボタン（いわゆるCVボタン）でこの混同が起きると、ユーザーが「押していいのか分からない」と感じて離脱してしまう可能性があります。見た目の統一感を優先するあまり、機能とデザインが一致していないUIになっていないか、まずは既存サイトを診断してみることが重要です。
リンクとボタンの区別をどう設計すべきかという基本的な考え方は、以下のコラムでも解説しています。あわせて確認してみてください。
既存UIを診断する5つのチェックポイント
すでに公開されているUIを見直す際は、感覚ではなく基準に照らして確認することが大切です。以下の5つの観点で、自社サイトの主要なページを一度チェックしてみてください。
1. 形状で「押す/移動する」が判別できるか
マテリアルデザインなど広く知られているデザイン基準では、ボタンは輪郭のある面（塗りつぶし・アウトライン）で表現され、リンクは下線付きのテキストや色分けされたテキストで表現されることが一般的です。自社のUIで、ボタンとリンクの形状が混在していないか、あるいはどちらも似たようなテキストリンク調のデザインになっていないかを確認します。
2. 色や下線の使い方が一貫しているか
ページによって「青文字＋下線」がリンクだったり、別のページでは同じスタイルがボタンとして使われていたりすると、ユーザーは経験則で判断できなくなります。サイト内・アプリ内で色や装飾のルールが統一されているかを確認しましょう。
3. 遷移するのか、その場で処理が実行されるのかが明確か
見た目だけでなく、クリックした後の動作も確認対象です。ボタンの見た目なのに実際は別ページへの遷移だった、逆にリンクの見た目なのにフォーム送信などの処理が実行される、といった不一致がないかを一つずつ確認します。
4. CVボタンが他の要素と混同されていないか
問い合わせボタンや資料請求ボタンなど、成果に直結する要素は特に重点的に確認します。周囲のテキストリンクと近い色・サイズになっていないか、目立たせるべき場所で埋もれていないかをチェックしましょう。ボタンが押されない原因はサイズだけではなく、「押す理由」の伝わり方にも関係します。詳しくは以下のコラムで解説しています。
また、ボタンのサイズや配置そのものが適切かどうかも合わせて確認しておきたい観点です。
ボタンは大きければ良い？UXが劇的に変わる適切なサイズと配置
5. スクリーンリーダーなど支援技術で意味が伝わるか
見た目上は区別できていても、音声読み上げ環境では「リンク」としか読み上げられず、ボタンかリンクかの区別がつかないケースがあります。視覚的な情報だけに頼っていないか、マークアップや文言の観点からも確認しておくと安心です。
診断結果別・具体的な修正方法
上記のチェックで問題が見つかった場合、パターン別に修正方針を整理しておくと対応がスムーズです。
テキストリンクがボタン化している場合
本来は別ページへの遷移である要素が、ボタンのような塗りつぶし・枠付きのデザインになっているケースです。ユーザーは「その場で何かが実行される」と誤解する可能性があります。デザインを下線付きテキストや色分けされたテキストリンクの表現に戻すか、そのままボタン的な見た目を維持するのであれば、遷移先が明確に分かる文言（例：「〇〇ページを見る」）を添えて誤解を減らします。
ボタンなのにリンク風になっている場合
送信・実行などの処理を行う要素が、下線付きテキストのようなリンク調のデザインになっているケースです。特にCVに関わるボタンでこれが起きていると、視認性が下がりクリックされにくくなります。輪郭や塗りつぶしのある面としてデザインし直し、周囲の要素より視覚的に目立つ状態に調整します。
サイト内で表記・デザインが統一されていない場合
ページやセクションごとにボタン・リンクのスタイルがばらついている場合は、まず現状のパターンを洗い出し、どのスタイルを正とするかを決めます。すべてのページを一度に直すのが難しい場合は、コンバージョンに関わる主要導線から優先的に統一していくと、影響範囲を早期に改善できます。
なお、独自に作り込んだカスタムUI部品を使っている場合、見た目の調整だけでなく、支援技術での認識のされ方まで崩れてしまうことがあります。修正時にはあわせて確認しておくとよいでしょう。
社内での再発防止：デザインレビューへの組み込み方
一度修正しても、新しいページやコンポーネントが追加されるたびに同じ混同が再発してしまうことがあります。これを防ぐには、チェック項目をレビュー工程にあらかじめ組み込んでおくことが有効です。
- デザインレビューやコードレビューのチェックリストに、「ボタンとリンクの形状・機能が一致しているか」という項目を追加する
- 新規コンポーネントを作る際は、既存のボタン・リンクのスタイルガイドを参照することをルール化する
- 誰が担当しても同じ基準で判断できるよう、社内向けのガイドラインとして文書化しておく
特定の担当者の感覚に頼った判断では、担当者が変わるたびに基準がぶれてしまいます。マテリアルデザインなど公開されている基準を土台にしつつ、自社サイト特有のルール（配色、文言の付け方など）を加えたガイドラインを整備しておくと、属人化を防ぎやすくなります。
また、UIの基準を見直す際には、アクセシビリティ観点の最新動向もあわせて確認しておくと、将来的な手戻りを減らせます。
WCAG 2.2で追加された新基準：今すぐ対応すべきポイント解説
自社だけでのチェックに限界を感じる場合や、第三者の視点で既存UIを診断してほしい場合は、専門家によるUI診断・改善支援を活用するのも一つの方法です。