ボタンデザインセットを考える

お疲れ様です。
株式会社LegalForce 開発部デザイン課 LegalFoceキャビネ デザインリード兼PdMの矢野です。
肩書きが長くて入ってこないですね！
ボタンデザインってUIデザインの基本ですが、決めることがまあまあたくさんありますよね。 このブログではUIデザインに欠かせない、ボタンデザインで決めなければならないことをコンパクトにまとめます。ゼロからボタンコンポーネントを作りたいが、必要十分要件をまとめるのが面倒だ。というかたや、Figmaを初めたばかりで何かを試しにデザインしてみたいかたにはちょうど良い課題感かと思いますのでぜひ参考にしてください。
なお、この要件は弊社のクールなUIデザイナー、KOBAさんがFigmaを使って検討しました。

ヒエラルキーに応じたスタイルを決める

シンプル設計でまとめた場合でも、ボタンの重要度設定は3種類程度は用意するのではないでしょうか。弊社ではSolid、Outline（Ghostと呼ぶケースもあるかも？）、Textの3種類をそれぞれ実行する操作の上位、中位、下位として定義しています。

スタイル別ボタンの操作ヒエラルキーの定義。

SolidとOutlineについては、Large、Medium、Smallのサイズ展開を用意します。

サイズ別ボタンの影響範囲の定義。

ヒエラルキーのルールは単純です。最上位タイプのSolidを並列して複数使用するのはNG。Outlineとテキストは複数利用可能という規定です。
Solidにはメールアプリで言えば「送信」、メモ編集機能であれば「保存」のように、手続きの最後の実行を託したり、画面全体に影響を及ぼす処理を実行するトリガーとして使います。

ボタンのスタイルに応じた画面における優先度の規定。Solidの乱用は避けましょう。

ボタンサイズごとの操作が影響を及ぼす範囲の想定。サイズ違いでも、Solidを複数置くのは操作がややこしくなるので全体的な設計で工夫しましょう。

同じスタイルのボタンを1画面で複数配置すると、どの操作が優先されるのか、ちょっと混乱します。例を見てみましょう。

Solidで、Largeサイズのボタンを複数並べて使用することはできません。

下位レベルの操作グループは、Outlineかつ、SmallかMediumサイズのボタンを使うのがルールです。

最小値の検討

スタイルの次にボタンデザインで予測、検討する必要があるのは最小で、どの程度の幅になるのか？という点です。 ラベルの文字サイズは大きいほうを14px、小さいほうを12pxと想定します。 一番幅が小さいケースはラベルが1文字のとき（無いとはおもうが..）と想定して、高さごとに３つのバリエーションの幅サイズを確認します。

サイズごとの余白設定と最小サイズ、平均的サイズのスタイルの比較。よさそうです。

それぞれサイズごとに余白を調整し、文字が少ない時にボタンがボタンに見えなくならないようにします（このボタンは文字サイズに応じて幅を増減する相対幅のタイプです）。LegalForceとLegalForceキャビネの場合、使用中のラベル文字数の平均は5文字程度です。が、アイコンを伴ったケースで8文字程度の外見も確認して、大きい時の状態も見ておきます。

アイコン付き、かつ、文言が処理に応じて変化する状態で確認してみました。

よさそうです。
おや？Text版の幅や余白はどう考えたらいいの？ Text版はOutlineの線なしと考えてます。見えない線があることを考慮して、余白や幅を検討しましょう。

破線を見えない枠だと考えます。Hoverステートを伴うスタイルの場合図のようになります。

ついでにCSSも確認しておきましょう。

//CSSはこんな感じです。
$height: 24px | 32px | 40px;　// 実際はこのような書き方はできません。便宜上分かりやすいように書いてあります。
.flexibleButton {
height: $height;
min-width: $height * 2;
box-sizing: border-box;
padding-right: $height / 2 + 4;
padding-left: $height / 2 + 4;
}

まとめ

ではボタンデザインセットの検討手順をふりかえりましょう。

1. ヒエラルキーに応じてスタイルをつくる

2. ボタン幅の最小値を決める

3. 平均的な文字数を入れて見た目を確認する

以上です。
文字数が変わるとボタンの幅が変わってしまうのは、美しくないなー。と感じるケースもあるかもしれません（文字数の振れ幅が少ないWebページなどは幅を固定にしているケースが多いように思いますね）。 そんな時は最大文字数に合わせてバリエーションを作ってしまっても良いかもしれないですね！