デザイン

デザイン

【アプリ制作に必須】適切なモバイルボタンのサイズと間隔とは!?

UX movement

UX Movement is a user experience blog that publishes articles showing how good and bad design practices affect user behavior.

本記事は、Optimal Size and Spacing for Mobile Buttons
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

1,239 views

読了時間 : 約3分7秒

ユーザーはあなたのアプリで的確にモバイルボタンを押すことができているでしょうか。また、ユーザーはターゲットを逃したりはしていないでしょうか?

 

 

ユーザーから苦情が来る前に、ボタンのサイズやスペースを見直してみましょう。

 

もしボタンが適切なサイズやスペースをしていなかったら、ユーザーは間違ったボタンを押しかねません。もしあなたが何が適切なのか自信がないのならば、この記事にその答えがあります。下記の寸法はCSSピクセルの96DPIを基準にしています。

 

 

ボタンサイズの基準

基準なしにはボタンが適切かどうか判断するのは困難です。幸運なことに、ボタンサイズやスペースについてのリサーチは年配の方を含めて大半のユーザーに当てはまるものとなっています。

 

この調査では、ユーザーは42ピクセル以下のボタンが一番正確性にかけたタッチをしてしまうことを表しています。72ピクセル以上のボタンもまた、正確性にかけることが分かっています。

 

 

そのため、タッチの正確性を高めるボタンの大きさは、42から72ピクセルの間ということがわかります。これは、ユーザーにとって使いやすい適切なボタンというのは、42ピクセルが最小のサイズで、72ピクセルが最大サイズということを表しているのです。

 

 

もっとも好まれるボタンのサイズは60ピクセルという中間のサイズです。72ピクセルのボタンは年配のユーザーに好まれることが分かっています。

 

 

ボタンの配列を使う時に、優先順位を表すことが大切になります。こうすることで、ユーザーは、どのアクションが望んでいる結果を導いてくれるのかを知ることができるのです。ぼたんのサイズの基準に従って、あなたは優先順位を示すことができます。もう独断的なサイズを選ばなくていいのです。

こちらの例は、優先順位を表すためのボタンサイズの基準を表しています。

 

 

・高い優先順位=72ピクセル

・中間的優先順位=60ピクセル

・低い優先順位=42ピクセル

 

 

ユーザーが最もよく使うボタンは最もタップしやすくなる必要があります。これらを使用することで、素早いリアクションタイムと高い正確性を得る事ができます。これはもしユーザーの注意が異なるタスクに別れた時にとても活用的になります。

 

ボタンスペースの基準

ボタン間隔が空きすぎていると、ユーザーはゆっくりとタッチすることになります。そして、ボタン間隔が逆に詰まりすぎていると、正確性が落ちます。

調査は12から48ピクセルの範囲がボタン間隔にもっとも適していることを表しています。この幅広い範囲はとても活用的です。なぜなら違うボタンサイズに適応することができるからです。あなたがボタン間隔を小さくすれば、それはボタンサイズにも関わってきます。

 

 

・大きいボタン:12ー24ピクセル

・真ん中のサイズのボタン:24ー36ピクセル

・小さいボタン:36ー48ピクセル

 

 

 

 

大きいボタンは例えもし少しずれていたとしても、ユーザーがターゲットを正確にタップする事ができます。しかし、小さいボタンの場合は、正確なボタンをタップできない可能性が高くなります。そのため、ボタンが小さいと大きいボタンよりも沢山のスペースが必要となるのです。

 

 

例は、どのようにボタンスペースがタッチの正確性を改善するのかを表しています。ユーザーの指が若干ターゲットを外しても、ボタンがどのサイズだったとしてもボタン間隔を調節する事でタップの正確性を高めることができるのです。

 

 

 

テキストボタンの結果

この基準はテキストボタンにも応用できるのでしょうか?これらの基準はテキストボタンの高さに応用できますが、幅は様々です。

例えば、60ピクセルの高さのテキストボタンは60ピクセルのアイコンボタンの幅よりも大きくなりますが、タップは簡単です。実は、広すぎるぼたんは低い正確性を必要とするのでこのようなことが言えるのです。

 

 

ボタンの高さはより正確性に関わってきます。テキストぼたんのタッチの正確性はアイコンボタンと何ら変わりません。

 

 

ボタンのスペースの基準はテキストボタンには当てはまりません。しかし、少なくとも12ピクセル以上のスペースが見栄えには必要となります。

 

 

 

ボタンのサイズをあげよう

あなたのボタンは適切なサイズとスペースを有していますか?

ボタンサイズやスペースの基準に従うことはあなたのモバイルでのタッチの正確性を改善することに繋がります。

 

 

あなたの感覚で適切だと思えるボタンサイズやスペースを設けることはとても不確かなものです。あなたが信頼できる適切な基準を使った方がいいでしょう。これは、どのようにデザインシステムが組み立てられるのかやなぜ多くの騎乗がこの基準を適用するのかを表します。

 

 

何を基準にするのか今一度考えてみましょう。もし何も基準とするものが無いならば、それらを組み立てて、素晴らしいユーザーエクスペリエンスをゲットしましょう。

【コンビニでも使える!メルペイ初回利用1500円分招待コード】

当サイト限定招待コード:CMUTDF

 
・利用可能店舗:メルカリ、コンビニ、ドラッグストア等
・金額:500円分
※さらにメルペイスマート払で1000円分ポイント!
 友達招待でさらに500円分ポイント!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

ピックアップ! さらに今このキャンペーン中です↓

ポイント50%&20%還元『メルペイフィーバー・メルペイサンデー』
■キャンペーン期間:2020/03/01 ~ 2020/03/31

 

 

【MOV初回限定 合計2,000円相当無料クーポン3枚】

クーポンコード:seleqt2000

 
対応地域:神奈川県、東京都、大阪府、京都府、兵庫県(新登場)
 
2000円オフで登録» »MOVの初回利用2000円オフのクーポンを使って登録はこちら!
 
アプリDLはこちらから↓

MOV《モブ》- タクシー配車

MOV《モブ》- タクシー配車

DeNA Co., Ltd.無料

 

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【UberEats初回1000円オフクーポン】
interjpq2206j2tw

 

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き

 

1000円オフで登録» »当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber Eats: 地元で人気の料理をお届け

Uber Eats: 地元で人気の料理をお届け

無料

 

おすすめ新着記事

おすすめタグ