UIデザイン

ボタンの「サイズ」を決める際に、UIデザイナーが考えていることとは?

この記事から得られること

この記事では、画面上のボタンのサイズ(大きさ)を決める際に、UIデザイナーがどのようなことを考えているのか、を学ぶことができます。

この記事の前提

  • この記事では、スマホアプリのUIデザインを前提に、解説をしています。
  • この記事では、UIデザイナーが考える「基本的なこと」のみを取り上げています。

結論

UIデザイナーは以下のことを考えて、ボタンのサイズを検討しています。

  • ボタンの中にテキストを表示する場合は、読みやすさを考慮し、ボタン内にある程度の余白を設ける
  • 人間の指のサイズを考慮し、ある程度のボタンの大きさを確保する
  • ボタンとボタンの間に、余白が作れるボタンサイズにする
  • 余白が作れない場合は、ボタンの置き方を見直す

それでは、それぞれの内容について解説します。

ボタンの中にテキストを表示する場合は、読みやすさを考慮し、ボタン内にある程度の余白を設ける

ボタンの中にテキストを表示する場合は、そのテキストを読みやすくする配慮が必要となってきます。
具体的には、ボタンの枠とテキストとの間に余白ができるような、ボタンのサイズを検討します。

この「ボタンの枠」と「テキスト」との間の余白を、UIデザイン・Webデザイン用語で「パディング(padding)」と呼びます。和訳しますと「詰め物」という意味です。

ボタンを「配送の荷物」で例えますと、ダンボールが「ボタンの枠」、中の荷物が「テキスト」、そして梱包材が「パディング」、というイメージです。

この梱包材であるパディングが少ない場合、ボタンの枠とテキストが近くなることによって、テキストが読みにくくなってしまうため、ある程度のパディングを設けることをUIデザイナーは検討します。

人間の指のサイズを考慮し、ある程度のボタンの大きさを確保する

パディングとも関係してきますが、スマホアプリの場合、指でタップするため、指の大きさを考慮する必要があります。

ボタンサイズが小さすぎますと、タップできず、誤操作の原因となってしまう可能性があります。
そのため、最初にありましたパディングの検討と共に、ある程度の大きさになるように、ボタンサイズを検討する必要があります。

ボタンとボタンの間に、余白が取れるボタンサイズにする

これは、ボタンを連続して並べるときに検討する内容となりますが、ボタンを並べる際は、そのボタンとボタンの間に、余白が取れるようなボタンサイズを検討します。

このボタンとボタンの間の余白は、UIデザイン・Webデザイン用語で「マージン(margin)」と呼びます。

「配送の荷物」に例えますと、ダンボールとダンボールとの間隔が「マージン」となります。荷物の場合は、間隔が多いほうが、他の荷物に触れずに荷物を取りやすくなります。

UIデザインの場合は、マージンを取ることにより、「別のボタンをタップしてしまう」といった誤操作を防ぐことができます。

ただし、マージンを取ることによって、ボタンが小さくなりすぎる場合は、ボタンのサイズが確保できるよう、画面レイアウト全体を見直す必要があります。

ボタンサイズを検討する上で、参考になる資料はある?

Google社提供の「マテリアルデザイン(Material Design)」ガイドラインにて、ボタンのサイズについて、以下の図の通り、パディングが規定されています。


Material Design : Components “Contained button”
出典:https://material.io/components/buttons#specs

また、マテリアルデザインでは「Applying density(高密度の適用)」という章で「ボタンのサイズに関するルール」について触れられています。

こちらの記事にて、日本語解説でまとめていますので、よろしければ合わせてご確認ください。

マテリアルデザイン|No.08:Applying density|日本語解説この記事では、Google社提供の「マテリアルデザイン」UIガイドラインの「Applying density(高密度の適用)」の概要について学ぶことができます。...

このようなガイドラインを参考にしながらデザインしますと、タップしやすく、また、統一感の取れたUIデザインにできると考えます。

まとめ

繰り返しとはなりますが、UIデザイナーは以下のことを考えて、検討しながら、ボタンのサイズを決めています。

  • ボタンの中にテキストを表示する場合は、読みやすさを考慮し、ボタン内にある程度の余白を設ける
  • 人間の指のサイズを考慮し、ある程度のボタンの大きさを確保する
  • ボタンとボタンの間に、余白が作れるボタンサイズにする
  • 余白が作れない場合は、ボタンの置き方を見直す

ただ、実際のUIデザイン業務では、ボタンサイズを1つ決めるだけでも、今回ご紹介しました内容に加えて、
「言語設定を日本語から英語に変更した際、文字切れはしない?」
「画面の向きを縦から横にした際のボタンサイズは?」
「ボタン内のテキストの内容が変わる場合、ボタンサイズはどのように変わる?」
などなど、検討することはまだまだたくさんあるのですが、今回の記事では、基本的な内容をご紹介しました。

この記事の内容が、みなさんのUIデザインの勉強の参考となればうれしいです。
引き続き、一緒にUIデザインを勉強していきましょう。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA