デザインシステムとは、制作物の統一感を保つための製品です。実績のあるパターンやテストを経たコードスニペットで、仕事を確実に手助けしてくれます。しかしデフォルトの設定ばかり使っていては、対応できないケースも発生します。既存のものが使えないとなった場合には、デザインシステムから賢く抜け出しましょう。
埋もれた要素をデザインが救う
ショッピングサイトは、訪問者をいかに購買者に変えるかどうかが課題です。売り出す製品が多いほど、掲載しなければならない情報も多くなります。このためにCTAが埋もれてしまうことがあるのです。
ここから、こんな問題が生まれます。「テストによれば、ユーザーはこのサインアップフォームを欲しがっているが、しかしどこを見ればいいかわからないと言う。そんなことは明らかだと思っているのだが、実際はそうではないらしい。」
バリエーションはデザインシステムに含まれている
デザインシステムはスタート地点としては最適ですが、実際のプロジェクトではバリエーション分けが必要になってきます。ボタンのラベルを「送信」「検索」「キャンセル」のどれにするか、色はどうするかなど、最適なものはすぐにはわかりません。多くのデザイナーはパターンを使いますが、あくまでもそれはスタート地点です。そこから製品を作るのであり、そこが製品ではないのです。
パターンには十分な柔軟性が求められますが、一方で最大サイズなどのパラメーターや、許容される変更箇所についても記述があるべきです。下のサインアップフォームを例に考えてみましょう。デザインシステムでは、普通よりもヘッダーを大きくできます。これはもっと注目を集めるべきバリエーションです。
ここでデザイナーは既存の考え方をやめ、よそとは違うフォームを作るべきでしょうか?答えはノーです。ここではユーザーの目に留まるよう変更を施し、プロジェクト内で使用するべきです。
デザイン要素は、ほとんどの場合何度も使用されます。パターンを参照すれば、次回の手間を省くことができます。デザインシステムは、視覚要素がユーザーに理解できる形を保つために存在しています。ゴールとすべきは、システムの持つ精神を保ちつつ、特定のルールを壊して突出したものを作ることなのです。
ルールを壊しつつ統合する
統一感があれば、ユーザーは毎回新しいことを学ばずに製品を使えます。しかしデザイナーは、時には他者とは違ったものを作らなければなりません。パターンを壊すだけではなく、より注目を集めるパターンを自らの手で作るのが、優れたデザイナーと言えるでしょう。
▼こちらの記事もおすすめです!