リンクアンドモチベーションのUIデザイナー亀山です。
最近「他社のデザインシステムなども参考にしてるけど、自分のデザインアウトプットのクオリティは上がらない」という課題を感じていたのですが、この記事ではそれをクリアするための「ちょっとした」工夫について書いてみました。
それはデザインシステムだけでなく、実際のプロダクトも合わせてリファレンスすることです。
弊社のストレッチクラウドというプロダクトにおいて「ボタン（プライマリ、セカンダリ、ターシャリなど）を全面的に見直す」という改善施策があったのですが、その過程で得たノウハウになります。
この記事では、具体的なプロセスとセットで知見をシェアしたいと思います！
やったこと
ステップ1 自社のデザインルールを確認する
当たり前ですが、まずはデザインするにあたって自社のデザインルールを確認します。
今回はボタンの使い方を見直したかったので、ルールと照らし合わせて修正が必要なボタンを洗い出していきました。
弊社はデザインシステムを公開していないので、下記にボタンの使い分けルールをざっくり書きます。
抽象的な表現に留めているデザインシステムも多いと思いますが、これだけだと「このボタンはセカンダリー or ニュートラル（ターシャリ）のどちらを選択すべきなのだろう？」と迷ってしまうシーンが多くありました。
解決のヒントを得るために、他社のデザインシステムをリファレンスしにいきました。
ステップ2 他社のデザインシステムを見る
次に世の中に広く浸透しており、参照されることの多いデザインシステムを見てみます。Ameba、デジタル庁、SmartHR、CookPadをリファレンスして見ましたが、プライマリー・セカンダリー・ニュートラルボタンの使い方に限定すれば、下記のような感じで弊社のルールとも文言上は差がないように見えます。
Spindle（引用元：https://spindle.ameba.design/）
「Outlinedボタン（セカンダリーボタン）の少なめってどのくらいの匙加減が適切なんだろう」
などの疑問も出てきてしまい、結局、他社のデザインシステムを見るだけでは実際の使用法まではわかりませんでした。
ステップ3 実際のボタンの使われ方を確認する
そこで、デザインシステムで定義されたルールが実際にプロダクトでどのように反映されているかを照らし合わせることにしました。
KPIに関連する導線に絞って各プロダクトを触っていったのですが、
という使い方をしているようでした。
Ameba（引用元：https://www.ameba.jp/home）
トップページ
「ブログを書く」というボタンはかなり主要なアクションと想定されるが、セカンダリーボタン（SpindleではOutlined Buttonと呼ばれている）となっている。
記事の投稿画面
「投稿する」というKPIに直接影響するコンバージョンのボタンにプライマリーボタン（SpindleではContained Buttonと呼ばれている）が使われている。
デザインシステムのルール上は「画面内に1つ」と書いてますが、実際は一連の体験の中で1つだけくらいに絞った使い方をしていることがわかりました。
この傾向はAmebaだけでなく、Cookpadなどの他のプロダクトも同じ傾向であることがわかりました。
これに沿って考えれば、ボタンの使い分けの基準が一定明確になり、かつプライマリー・セカンダリーボタンの使用箇所を絞れるので、ユーザーにとっても重要なアクションがわかりやすくなります。
ちなみに、リファレンスの過程で例外的にプライマリーボタンを1画面で多用するプロダクトも発見しました。
これはルールを逸脱してでも配置した方がKPI向上するなどの事情があり、おそらく意図的に行なっているのだと考察しています。
一休（引用元：https://www.ikyu.com/）
一休では予約の成立が主なKPIと思われるので、プライマリーボタンを多用していると思われる。
ステップ4 自社のデザインルールのアップデート
リファレンスしてわかったことを踏まえて自社のデザインルールをアップデートし、改めて自社プロダクトのボタンを見直していきました。
理論的なデザインのルールだけでなく、実際のプロダクトでどう使われているかを見に行ったことでボタンの使い方がよりクリアになりました。
ボタンはプロダクトにおいて必須のデザイン要素であり、ちょっとした使い分けで画面の見やすさに大きなインパクトを与えるなと感じてます。
まとめ
今回のプロセスを通して、
- デザインシステムだけでなく、実際のプロダクトでの適用方法もセットでリファレンスする
ことが重要であることが判明しました。
また、このプロセスを他のUIや顧客体験、サービス設計に適用することで、プロダクトのデザインレベルをどんどん上げていけるなとも感じています。
この記事が皆さんのお役に立てば嬉しいです！
