接続に失敗しました。もう一度試してください。

コンテンツにスキップ
SEO Tools
ヘルプとドキュメント
UX / UI 中程度の影響 簡単 15～30分

リンク/ボタンの読みやすさとサイズ

クリック可能な要素は読みやすく、クリックしやすいものでなければなりません。

それは何ですか

テキストが小さいリンクやボタンは読みにくく、何よりもタッチ スクリーン上で指で押すのが難しくなります。これは、いわゆるタップ ターゲット (クリック可能な領域) のサイズに関係します。

なぜそれに対処するのでしょうか？

クリック可能な要素が小さいとエラー率が増加します。ユーザーはクリックする代わりに、隣接するリンクを見逃したり、クリックしたりしてしまいます。これはイライラさせられ、コンバージョンが減少します。 Google では、少なくとも 48 × 48 ピクセルの間隔をあけたタップ ターゲットを推奨しています。

やり方

  1. 1リンクとボタンに読みやすいテキストを追加します (理想的には 14 ピクセル以上)。
  2. 2テキスト サイズだけでなく、パディングによって十分なクリック可能領域 (最小 ~44 ～ 48 ピクセル) を確保します。
  3. 3指が重ならないように、隣接するクリック可能な要素の間に間隔をあけてください (例: 8px+)。
  4. 4モバイルでは、マウスではなく親指でテストしてください。

例

Správně
.btn, nav a {
  font-size: 1rem;
  padding: 12px 16px;   /* sufficient clickable area */
  display: inline-block;
}

結論

読みやすいテキスト、十分なパディング、スペースなど、クリック可能な要素を多めに配置します。タップ ターゲットの正確なサイズはブラウザでのみ確認できますが、クリック可能な小さなテキストは修正が必要であることを明確に示しています。ミスクリックが減る = コンバージョンが増える。

関連トピック