押しやすく迷わない！ボタンとリンクの設計術

Writer： tsuda　更新日：2026/05/15

こんにちは、サービスプロデューサーの津田です。

Webサイトには、ページ遷移を行う「リンク」や、操作を実行する「ボタン」が存在します。ユーザーは日々、これらを「クリック」や「タップ」しながらサイトを利用しています。

リンクとボタンは、見た目が似ているケースも多くありますが、本来の役割は異なります。

「リンク」は別ページや別コンテンツへ移動するためのもの、「ボタン」はフォーム送信やメニュー表示など、その場で何かを実行するためのものです。

これらを適切に設計することは、ユーザビリティ・Webアクセシビリティの向上につながります。

今回は、ウェブサイト運営の上で意識したい、ボタンとリンクの設計について解説します。 

■ リンクテキストは「遷移先」がわかる言葉で

テキストでのリンクは、下記の点に気を付けましょう。 

• 「こちら」「ここをクリック」を避ける

  「こちら」や「ここをクリック」のみにリンクを設定すると、スクリーンリーダーでリンク一覧を読み上げる際に、その言葉だけが読み上げられます。そのため、リンク先の内容が伝わりにくくなります。
  ユーザーにも予測できるように、「〇〇についてはこちら」といった形で、前後の文脈も含めてリンクを張るようにしましょう。
  
  
  
  

• 文脈を考慮したテキスト

   「もっと読む」といった短い文言の場合、コンピュータのシステムが前後の文章と関連付けて解釈できる構造（同じp要素内にあるなど）にする必要があります。
  「“何を”もっと読む」ためのリンク・ボタンなのか、システムが理解できるように実装しましょう。

■ 名前（ラベル）の不一致を防ぐ

音声でPCやスマートフォンを操作するユーザーにとって、画面に見えている文字とプログラム上の名前が一致するようにしましょう。 

例えば、画面には「送信」と表示されているにもかかわらず、aria-label にまったく異なる名称が設定されていると、音声操作で「送信をクリック」と指示しても、意図した操作が行いづらくなる場合があります。 

「視覚的なテキスト」と「プログラム上の名前」を一致させることで、アクセシビリティを確保できます。

■ 「押しやすさ」を左右するターゲットサイズと間隔

モバイル利用者が増える中、ボタンとリンクの サイズや配置間隔はユーザビリティの向上に大きく関係します。

ターゲットが小さすぎたり、要素同士の間隔が近すぎたりすると、意図しない押し間違いが発生しやすくなります。これは身体的な制約のあるユーザーだけでなく、片手操作中のユーザーや、移動中など不安定な環境で操作しているユーザーにとっても負担となります。 

ボタンやリンクは十分な大きさを確保し、間隔を空けて配置しましょう。

■ まとめ：適切な「言葉」と「サイズ」でスムーズな誘導を

Webサイトにおけるボタンやリンクは、ユーザーを目的の情報や操作へ導くための大切な要素です。 今回ご紹介したポイントを意識するだけでも、サイトのユーザビリティとWebアクセシビリティは向上します。

デジナーレの「ユーザビリティ×ウェブアクセシビリティ診断サービス」では、ボタンの押しやすさやラベルの適切さも含め、ユーザビリティとWebアクセシビリティの両面を総合的に診断するサービスを提供しています。

「自社サイトのボタンやリンクが使いやすいか確認したい」という方は、ぜひお問い合わせよりお気軽にお問い合わせください。