最近なにかと話題になっているデザインシステムについて、実際に取り組んだ際の学びを記していこうと思う。
始めに述べておくが、デザインシステムを構築することは想像以上に泥臭いことの積み重ねであった。

デザインシステムとは

デザインシステムとは、その名の通り、デザインの仕組みである。
デザインシステムとして、代表的でよく取り上げられているAtlassian Design Guidelines。また、ガイドラインとして知名度の高いHuman Interface GuidelinesやMaterial Designも当てはまるだろう。

何が揃っていれば、デザインシステムと成り得るのか、未だ定義されていない。
むしろ、私は定義する必要はないと思っている。システムというのは概念に近く、そのときの組織やプロダクトの状況に合わせてつくりあげていくものだからである。
ただし、デザインシステムをつくる目的だけはハッキリしている。

①一貫したデザインによるシームレスなユーザー体験の提供
②デザインの明文化による工数の削減

この目的を達成するためのデザインの仕組みは、全てデザインシステムといえると、私は考えている。

デザインの仕組み化へのチャレンジ。そして失敗。

ページによるUIのバラつき、作業者によるデザインの微妙な違いetc...。つくる発端はこのような課題の解決のためであった。
そこで、私が担当するサービスサイトにおいて、以下のことを明文化しドキュメントに起こした。

・コンセプト・デザイントーン
・レイアウト
・コンポーネント構造
・カラー、タイポグラフィ、アイコン、ボタン
・画像、テクスチャ

この作業をひとりで行った。それがもはや失敗だった。
ある程度の基準となるものを満たしてたものが揃っているように見える。しかし、使われないのだ。

もちろんチームでレビューも行ったが、読んで終わりがほとんどであった。
どれだけきれいにつくっても、日々の業務に忙殺されるような環境でいちいちドキュメントを見て作業するような人はほぼいない。
一貫したデザインにするためには、関わるデザイナー全員に浸透しないと意味がないのだ。

なぜ使われなかったのか。原因はおおかた2つである。

まず、すぐに誰でも簡単に使えないこと。
チームにはたくさんのデザイナーがいる。仕事内容もスキルセットも様々。そんな状態で、ドキュメントだけではハードルが高い。面倒くさいと思われてしまっては、使ってもらえない。

次に、ひとりでつくってしまったこと。
これは、本当に失敗したと思った。どれだけ優れたものだとしても、ひとりでつくってしまうと、チーム全体の当事者意識が薄れてしまう。みんなに使ってもらうためには、みんなを巻き込むことが重要なのだ。

この失敗から得たProblemを、次へのTryにつなげていった。

ツール導入によるデザイン環境の改善

いままではPhotoshopによるページ単位でデザインを管理していた。しかし、ファイルの保守にも手間がかかるし、データを見るにもいちいちレイヤー単位で確認せねばならず時間がかかる。

そこで、Sketchに変えることにした。また、AtomicDesignの原則を用いてコンポーネントで分解し、アートボートをネスト構造で管理することにした。
ファイルの更新についてもAbstractを使うことでバージョン管理を可能にした。

最悪、ドキュメントを読まなくても、ガイドラインに沿ったものが作れるような環境を目指したのだ。
(このあたりを詳しく書くと長くなりそうなので、またの機会に。)

つくりかけの状態でみんなに触ってもらう

ある程度ファイルができて、ツールの準備も整ったら、いろんな人に触ってもらう段階に入る。
触るといっても、レビューなどではなく、モチベーションを高めるため、実際の業務と結びつけることにした。
また、敢えてプロジェクト外のデザイナーにも協力してもらうことで、サービス固有の知識があまりなくても、簡単にデザインの再現性があるかを試した。

タスク内容は複数ページを同時に一貫したデザインにすること。
この時点でパーツデータなどは全然完璧でなくていい。運用ルールもたいして決めなかった。変更する余地を残したかったからだ。みんなで改善したいという旨を伝え、協力してもらった。

実際にやってみると、予想以上につまづくことはなく、うまく遂行することができた。
早い段階でいろんな人に触ってもらうことで、課題が小さいうちに潰すことができるのはよい成果だ。
また、実際に協力してつくりあげていくので、ツールやルールの理解へのモチベーションも高く保つことができた。

まとめ

デザインシステムは言葉自体が流行っているのもあり、つくればすべてが解決するように見えてしまうが、いかにそれを使ってもらうようにするかが大切である。最初から完璧を求めなくてよい。つくりかけの状態でもよいので、早い段階で多くの人に理解してもらうべきだ。
独りよがりのデザインシステムにならないために、プロセスから設計をしていく必要があると実感した。