デザイナーが集まってボタンについて話し合ってみた

暗黙知になっていることをクラスメソッドのデザイナーみんなで共有してみようの会として、UIの共有会を開催しました。
2022.09.13

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

今回、社内メンバーとボタンについて知見を共有しました。

これまでの共有会

  • デザイナー間で命名に関する共有会を実施しました
  • デザイナーが集まってインプットUIを話し合ってみた
  • デザイナーが集まってモーダルUIを話し合ってみた
  • デザイナーが集まってログイン画面について話し合ってみた
  • 情報共有して認識を合わせることが目的のため、「クラスメソッドではこうしてます!」みたいなものではない点はご了承ください。

    ボタンにはそれぞれ役割がある

    プライマリ

    プライマリのボタンはユーザーが最もやりたいであろうアクションを選べるようにするボタンです。アプリだとメインの操作を促すボタンはプライマリを使用します。塗りのボタンに加えてフローティングアクションボタン(FAB)も、最も重要なアクションのボタンとして活用することもあります。
    ただしプライマリボタンを多用すると、ユーザーが混乱するので使用しすぎないようにしましょう。

    セカンダリ

    決定ボタンの補助として使用します。注意が必要だが主要なアクションではないボタンです。

    テキストのボタン

    最も目立たないボタンで、ユーザー体験上あまり重要でない操作を実行するために使用されています。

    button Primary Secondary

    注意点

    やってほしくないことは警告色としてよく利用される赤い文字を割り当てられます。「キャンセル」「破棄」などデータを消すようなアクションを実行するボタンです。仮にそのアクションが最も可能性の高い選択肢であってもプライマリボタンにしないようにしましょう。目立つプライマリボタンに設定すると、読まずに押してしまう可能性があるからです。

    ボタンの状態

    ボタンには、操作の段階や可否によって状態が変化します。社内のモバイルアプリではEnable(通常 NormalやDefaultとも言われる)、Hover(押下)、Disabled(非活性)3種のボタンを作成することが多いです。

    Button state 他にもキーボード等の操作で選択した際に適応される状態のFocusやキーボード入力や音声入力でのクリックを表すPressedのボタンを作ることもあります。

    非活性のボタン

    非活性とはボタンが押せない状態のことです。元は押せるけれどもなんらかの理由で押せない状態になっていることを指します。非活性の状態のボタンにはグレーになっているもの半透明のもの2パターンをよく見かけます。勉強会ではどちらがより非活性な状態を表すのが適しているのかという話になりました。

    button inactive 社内メンバーの見解としては「今はこのボタンを押せない」ということがわかる半透明の表現がグレーよりも適切という結論になりました。

    なぜボタンは角丸なのだろう

    button round 角丸のボタンは押せそうな感じがするのが良いねという意見がありました。
    日常生活では、キーボードやTVのリモコン、自動販売機のボタンなど、丸みを持ったボタンが多いです。私たちは自然と丸みのあるボタン=押せるものという認知を働かせているのかもしれません。
    UIの世界でもスティーブ・ジョブズが80年代初頭、iOSのアイコンに角丸の四角を採用し、そのデザインが今でも使われています。角丸の四角は押せるという認識はデジタルの世界でも共通認識のようです。

    まとめ

    社内勉強会で基本的なボタンについての認識を合わせました。
    ボタンはアプリケーション内でユーザーに操作を求める箇所の一つです。これからもユーザーを迷わせることなく適切なボタンの配置を心がけたいです。

    参考

    HIG Buttons
    Material Design 3 All Buttons
    Why are Apple’s iPhone icons shaped as rounded squares?