ブログサービスを勝手にREDESIGNしてみた【番外編】デザインシステムを読んでボタンの定義をまとめてみた
今回はカワムラが、勝手にREDESIGNをしていく上で、パーツを収集・分解しルールを決めていく中で、「そもそもボタンのルールって他ではどうやって決めているんだろう？」と疑問になり🙁リーダーからまずはいろんなデザインシステムを読んで見たら？と助言をいただき、デザインシステムを探しまくったなかで、「だいたいこんなかんじっぽいじゃん！」というのをまとめてみました。
参考になりそうなデザインシステムはこちらのAdeleでひたすら探して、Google翻訳したものになるので日本語たまにおかしいかもしれません。あしからず。。。
早速結論。だいたいボタンの分類とルール
お作法①ボタンの分類=重要度による使い分け=重要度は頻度で決まる
ボタンについては下記のボタンの分類が多かった
- Product/Brand button：ブランドやサービスでメインのもののみに使用する
- Primary button：ページで1回まで使用
- Secondary/Default button：ページ内で複数回使える
- Tertiary / Subtle：単体で使うというよりPrimaryやSecondaryボタンと組み合わせて使う場合が多い
お作法②ボタンのサイズは別で定義すると良さそう
- 基本的にサイズの定義はボタンにつけるのではなく、別で定義していることが多い
- ボタンのサイズは使用するUIのデザインに紐づく
ボタンの分類別解説
Product/Brand button
- サービス内での主要な機能の場合にのみ使用することができるボタン
- ブランドのメインカラーをこちらのボタンにだけ適用することができる
- 塗りと枠線と2種類定義していることも。
- ProductボタンにSecondaryが存在していることもある（参考）https://protocol.mozilla.org/patterns/atoms/buttons.html#primary-dark
（考察・メモ）ブランドボタンにだけブランドカラーを適用することで、主要なカラーがページ内に大量発生してしまうのを防ぐことができそう！
Primary button
- 基本的にはページ/ビュー/セクションで単一で使うべきもの
- 一番重要なアクションを表す
（考察・メモ）頻度によって重要さを表す💨
Secondary / Default button
- ページ内で複数つかうことが前提となっている😮
- Primaryと区別するためのもの
- やや強めの動作と考えられている
- Primaryとセットで使うことと想定しているパターンもある 。（すでにPrimaryボタンが存在している上で、Secondaryを使うと想定）
https://designsystem.gov.au/components/buttons/ - 逆にPrimaryとは一緒に使わないことを想定しているパターンもある。Secondaryは並べて使うこともOK。Primaryと一緒に使うときはさらに下のスタイル（Teritary/Subtle）をあてる
http://developer.royalcanin.com/ui-framework/elements/buttons.html
Tertiary / Subtle
- Secondary/Defaultと区別するためのもの🙄
- テキストリンクパターンもある
- Secondaryと反対の動作を行うときに使用 （OK/キャンセル）
（参考）https://designsystem.gov.au/components/buttons/ - Primaryと複数のTertiary / Subtleボタンを一緒に使うこともある
（参考）http://uniform.hudl.com/components/buttons/button/design/
その他のボタンについて
上記の分類に入れてないがその他に定義されているものもサービスによって存在する
- Destructive button：通報やアラートボタン
- Disabled：押せない時のボタン、ボタンの種別に関わらず統一のパターンも。
なども存在しています。
サービスにあわせて必要なボタン数は異なるため、サービスにあわせて定義が必要ですね。
サイズの定義をどうするべきか？
- サイズをボタンのルールで持たせてないものが多い。別で定義している
- つまりボタンのサイズによって重要度は表現していないこともある
- ただしPrimaryボタンだけはもっとも大きなサイズを使うことが想定されているケースが多い
- 使う場所にあわせてサイズを定義している
例としてUniformのデザインシステムのサイズ説明には下記のように定義されています。
ボタンの重要度と大きさは必ずしもリンクしない🙂
X-Small: Only use this when you really need to squeeze, like in a card or sidebar. Stick to text or icon-only.
これは、カードやサイドバーなど、本当に絞る必要がある場合にのみ使用します。テキストまたはアイコンのみに固執します。
Small: Ideal for dense interfaces or when the button’s action is secondary to page content.
高密度のインターフェイスや、ボタンのアクションがページコンテンツに続く場合に最適です。
Medium: As the default size, medium buttons should work in most cases.
デフォルトのサイズとして、ほとんどの場合、中ボタンが機能するはずです。
Large: Use this for strong actions in a sparse interface.
インターフェイスでの強力なアクションに使用します
こちらの文章を読む限り、PrimaryボタンをsmallやMediumサイズで使うこともあるため、ボタンのサイズ=重要度が必ずしもリンクしないと考えられます。
あくまでサイズは、使う場所のUIに紐づくようです😗
参考にしたデザインシステム
見た中で参考にしたデザインシステムをまとめておきます😄
Lightning Design System
Australian Government design system
PREDIX DESIGN SYSTEM
Uniform
Mozzilla
Shopify Polaris
Royal Canin Design Language
Lexicon
まとめ
世の中のデザインシステムを読むことで、どのようなルール付けが必要かなどある程度お作法的なものが見えてきました。
英語全然できませんが、Google翻訳つかえば、かなり意味がわかるので、英語苦手なデザイナーさんはぜひこの記事をきっかけに、見てみていただければと思います！🙌
