デザインシステムを作る上で最初にやることとは？
電子契約サービス「クラウドサイン」デザイングループ プロダクトデザインチームの吉林（よしばやし）です。
クラウドサインでは、現在デザインシステムの整備を進めています。
今後、全5回に分けて作成に至った背景や、実際の内容・運用の様子などをお伝えできればと思っておりますので、お付き合い頂ければ幸いです！
連載の目次（予定）
第1回 デザインシステムを作る上で最初にやること（👈 今回の記事です）
第2回 内容面について
第3回 仕組みづくりについて
第4回 組織への浸透について
第5回 デザインシステムの今後について
CloudSign デザインシステムの紹介
社内での公開から約7ヶ月が経過しており、デザイナー内はもちろん、開発チーム内でのデザインの擦り合わせにも活用しています。
今回は「デザインシステムを作る上で最初にやること」と題して、デザインシステムを作る前に取り組んだことをご紹介します！
これからデザインシステムを作成する方の参考になれば幸いです。
最初にやることとは何か
まず最初にやるべきは「何を実現させたいのか」をチーム内で明確にすることだと思います。
当たり前のことだとは思いますが、デザインシステムの構築はあくまで課題解決の一つの方法です。
したがって、まずは実現させたいゴールを深掘りし、現状とのギャップに対するアプローチを考えます。もちろん方法はデザインシステムに限定せず、検討していきました。
実現させたいゴールを決めて、深掘りしていく
早速「何を実現させたいのか」「どのような状態が理想なのか」を考えた上で、私たちは下記のようにゴールを設定しました。
私たちが決めたゴール：速度・クオリティ向上のための仕組みを誰でも活用できる状態
ゴールを決めたら、ゴールを構成する要素に疑問を投げかけつつ深掘りしていきます。
速度を上げるために必要な条件とは何か？
クオリティを向上するために必要な条件とは何か？
誰でも仕組みを活用できる状態とは、どのような状態か？
そして、チーム内で得た様々な意見をもとに、ゴールの条件を定義します。
①コンポーネントの定義・用途が明確に定められている。
②デザインルールなどの情報は、誰でもわかる場所に明記されている。
③デザインルールなどの情報は、常に最新化されており、全員が認知している状態である。
上記を実現することができれば、速度やクオリティを今よりもさらに向上できるのではないか？（＝ゴールを達成できる）という結論に至りました。
ギャップの分析と解決方法の検討
ゴールが明確になったところで、現状とのギャップの分析と解決方法を考えます。
①コンポーネントの定義や用途が定められておらず、認識を統一できていない。
👉 情報のフォーマットを決め、ドキュメント化した上で全員に共有する。
②コンポーネントやデザインルールを調べるのに、時間がかかっている。
👉 情報を1つの場所に集約し、一元管理する。情報はすぐに見つかるようなわかりやすい構成に変更する。
③デザインの更新ルールが特に決まっておらず、何が最新かわからない。
👉 更新ルールを決め、情報を常に最新に保つ。更新した場合は全員に周知されるような仕組みを作る。
この①〜③の解決方法となり得るようなドキュメント、仕組みを作ることができないか？という考えが、デザインシステムの構築に課題解決を求めたきっかけでした。
ここからやっと、実際にデザインシステムをどのように作成するかを考え始めます。
文章がかなり長くなってしまいましたが（やっとデザインシステムの名前が！笑）、「なんとなくデザインシステムはあったら良さそうだから…」という理由で作るのではなく、
「何を実現させるためなのか」を考えてから作ったことで、化石になってしまわない、常にアップデートされ続けるデザインシステムを構築することができました。
使用ツールの検討
解決方法が明確になったところで、実際にどのようなツールでデザインシステムを構築するべきか、検討を進めました。
不可欠な機能は何か、なくても困らないけどあったら良い機能は何かなど、チーム内で話し合いを重ねます。
ツールを選定する上で、軸を固める
チーム内での意見をもとに、ツール選定の軸となる要件を固めていきました。
情報の検索が可能である。
ディレクトリを作成可能である。（階層構造化できる）
Figma上のComponentライブラリーを活用できる。
デザイナーが編集可能である
学習コストがかからない使いやすいUI（マークダウンレベル）
ツールの検討結果
軸が決まったところで5つのツールを比較検討し、実際にツールを触りながら、軸となる要件を満たすかどうか、じっくり選定していきました。
その結果、私たちの要望の全てを満たしていた zeroheight に決まりました 🎉
zeroheight とは？
デザインシステムの構築に特化した、ドキュメント作成ツールです。
通常のドキュメント作成ツールですと、コンポーネントの更新があった際には、コンポーネントの画像や情報の差し替え作業が必要だったり…と、更新作業でかなり骨が折れますが、
zeroheightはFigmaのComponentデータを簡単に同期可能なので、そこが一番の導入の決め手となりました。
他にも、コードが得意ではないデザイナーも使用できるようなUIになっており（まさしくnoteを書いている感覚と近いです！）、使用感で全員の納得が得られたのもzeroheightでした。
ちなみに、zeroheightについてはeurekaさんの記事がかなり参考になりました。ありがとうございます！
おわりに
電子契約サービス「クラウドサイン」のデザインシステムについて、今回は「デザインシステムを作る上で最初にやること」をご紹介しました。
次回は内容面について執筆予定ですので、お楽しみに！
クラウドサインでは、デザイナーを募集しています！
現在プロダクトデザインチームでは、一緒に働いてくださるデザイナーを募集しています。
デザインシステムのことはもちろん、クラウドサインのプロダクトデザインに興味がある方は、ぜひお気軽にご連絡ください😊
この記事が気に入ったらサポートをしてみませんか？