デザイン

デザイン

既存のデザインシステムから抜け出す!自らデザインパターンを作る心得

356 views

デザインシステムとは、制作物の統一感を保つための製品です。実績のあるパターンやテストを経たコードスニペットで、仕事を確実に手助けしてくれます。しかしデフォルトの設定ばかり使っていては、対応できないケースも発生します。既存のものが使えないとなった場合には、デザインシステムから賢く抜け出しましょう。

 

 

埋もれた要素をデザインが救う

ショッピングサイトは、訪問者をいかに購買者に変えるかどうかが課題です。売り出す製品が多いほど、掲載しなければならない情報も多くなります。このためにCTAが埋もれてしまうことがあるのです。

ここから、こんな問題が生まれます。「テストによれば、ユーザーはこのサインアップフォームを欲しがっているが、しかしどこを見ればいいかわからないと言う。そんなことは明らかだと思っているのだが、実際はそうではないらしい。」

 

 

バリエーションはデザインシステムに含まれている

デザインシステムはスタート地点としては最適ですが、実際のプロジェクトではバリエーション分けが必要になってきます。ボタンのラベルを「送信」「検索」「キャンセル」のどれにするか、色はどうするかなど、最適なものはすぐにはわかりません。多くのデザイナーはパターンを使いますが、あくまでもそれはスタート地点です。そこから製品を作るのであり、そこが製品ではないのです。

 

パターンには十分な柔軟性が求められますが、一方で最大サイズなどのパラメーターや、許容される変更箇所についても記述があるべきです。下のサインアップフォームを例に考えてみましょう。デザインシステムでは、普通よりもヘッダーを大きくできます。これはもっと注目を集めるべきバリエーションです。

 

ここでデザイナーは既存の考え方をやめ、よそとは違うフォームを作るべきでしょうか?答えはノーです。ここではユーザーの目に留まるよう変更を施し、プロジェクト内で使用するべきです。

 

デザイン要素は、ほとんどの場合何度も使用されます。パターンを参照すれば、次回の手間を省くことができます。デザインシステムは、視覚要素がユーザーに理解できる形を保つために存在しています。ゴールとすべきは、システムの持つ精神を保ちつつ、特定のルールを壊して突出したものを作ることなのです。

 

 

ルールを壊しつつ統合する

統一感があれば、ユーザーは毎回新しいことを学ばずに製品を使えます。しかしデザイナーは、時には他者とは違ったものを作らなければなりません。パターンを壊すだけではなく、より注目を集めるパターンを自らの手で作るのが、優れたデザイナーと言えるでしょう。

 

 

 

▼こちらの記事もおすすめです!

 

 

 

 

※本記事はDeal With It: Break Established Design System Rules and Integrate the Resultsを翻訳・再構成したものです。

おすすめ新着記事

おすすめタグ