たった１つのボタンが世界を救う。怪人二重面ボタンの作り方。

2021年2月16日 09:46

こんにちは！ちゃんあべこと阿部です。最近は自粛も続き、お腹もしっかりと蓄えが続いたので、そろそろやばいなと家でダンスをはじめました。

なかやまきんに君をはじめ、ビリー隊長、のがちゃんねるなどなど、いろんな動画を混ぜて楽しんでます。とはいってもまだ２週間なので、どんどん続けられればと思います。

ダイエットと言う話で最近ですが、Library Analyticsを見ていたときに、ステータスごとに分けていたコンポーネントなのに、使われているコンポーネントと使われていないコンポーネントがあることに気がついたのです。

※Tagのアナリティクス

同じコンポーネントをステータスごとに分けてつくってるのって実は非効率っ的なんじゃないか？っと思ったのがきっかけです。地味に4箇所だけ使っているコンポーネントとかいらないんじゃないかと思いつつ、でも使っている人もいる...どうしよう...と思ったときに出てきたVariants。

まずはこちらをご覧ください。

たった１つのアセットで、様々な形式のボタンにすることができます！めちゃ便利！なんじゃこりゃ。

「ボタン１つをナメることなかれ。」とかつて有名な人が言ったとか言わなかったとか。

一人でデザインをしているときであれば特に問題はないのですが、デザインファイルを触る人が多くなればなるほど、コンポーネントの管理はとても大変になります。

また、UIを設計していると、使うコンポーネントは使うシチュエーションや、インタラクションによって変わります。

今回はVariantsを使って、そんな様々なシュチュエーションにおいて耐久性のある「たった１つのアセットで、すべての状態に変身する最強コンポーネントの作り方」
を紹介していきたいと思います。

1. どんな種類のボタンがあるのかを洗い出す(Style)

まずは、Figmaをさわる前に、作るべきUIコンポーネントの整理からスタートします。

今回はMaterial Designを参考にやっていきましょう。

Material Designではボタンの種類を３つに分けています。

TEXT(テキスト）

OUTLINED（線の状態）

CONTAINED （塗りの状態）

実際に作っているサービスによっては、Style（表現方法）でのカテゴライズではなく、Function（機能）でのカテゴライズ、優先順位でのカテゴライズをされているチームもあると思います。

機能によるカテゴライズ
Action, Link, Submit, Delete etc...

優先順位によるカテゴライズ
Primary, Secondary etc...

といったような形式で、まずは大きなカテゴリを整理します。個人的な感覚としては、このカテゴライズが多ければ多いほど管理が多くなってしまうので、新しく入ったデザイナーさんへの学習コストが高くなるイメージです。
※あくまで管理の話です。ユーザーにとっては関係ありません。

Assetsが持つパラメータ
Style・・・TEXT, OUTLINED, CONTAINED

2. 中に入る要素はどのようなものがあるのかを整理する

大まかなカテゴライズをしたあとに、どういった要素が入るのかを整理します。基本的には、「アイコンのある無し」「テキストのあるなし」がベースになるのではないでしょうか。

Material Design ではボタンの解剖学としてこのようにまとめておりました。

A. Text Label（テキスト）
B. Container（容器・コンテナ）
C. Icon (Optional)（アイコン *オプション）

それ以外にも、ボタンとSelect boxを一緒のコンポーネントとして管理したりしている方は、menu-downなどをもあるかもしれませんね。

今回は、Material Designを踏襲していきますが、チームの方針によって調整してみてください。

Assetsが持つパラメータ
Style・・・CONTAINED, OUTLINED, TEXT
Icon・・・True（入っている） / False（入っていない）
Text・・・True（入っている） / False（入っていない）

3. ボタンのステータス（状態）を洗い出す

最後に、ボタンのステータス（状態）を洗い出します。ボタン一つにとっても状態がいくつもあります。

例えば、ホバーしたとき（Hover）、押せないとき（Disabled）、フォーカスしているとき（Focused）などなど。

ボタン１つとっても様々なステータスがあるわけです。それらを洗い出してみましょう。

Material Designでは、11個のステータスが定義されています。

1. Enabled（有効化されている状態）
2. Disabled（無効化されている状態）
3. Hover（マウスでホバーしている状態）
4. Focused（ハイライトされている状態）
5. Selected（選択している状態）
6. Activated（設定されている状態）
7. Pressed（押されている状態）
8. Dragged（ドラッグされている状態）
9. On（2つのオプションしかないときに設定されている状態）
10. Off（2つのオプションしかないときに、設定が外れている状態）
11. Error（エラー状態）

今回作る対象物はボタンのため、すべてを準備するのではなく必要なものだけを使いましょう。

Enabled, Disabled, Hover
※サービス・端末によっては、上記以外もあると思います。

Assetsが持つパラメータ
Style・・・CONTAINED, OUTLINED, TEXT
Icon・・・True（入っている） / False（入っていない）
Text・・・True（入っている） / False（入っていない）
State・・・Enabled, Disabled, Hover

4. パラメータごとに素材を作成する

ここまで来たら、あとはFigma上でAssetsを作成するだけです！お疲れさまでした！とはいえ、作らなきゃいけないAssetsはめっちゃ多いです。

今回は心折れてHover状態は作成していませんが、ご了承ください。

すべてのコンポーネントを作ったあとに、レイヤーネームをパラメータを参照して命名してください。

Assetsが持つパラメータ
Style・・・CONTAINED, OUTLINED, TEXT
Icon・・・True（入っている） / False（入っていない）
Text・・・True（入っている） / False（入っていない）
State・・・Enabled, Disabled, Hover