こんにちは。Qiitaなどを運営しているIncrementsのデザイナーの綿貫です。
先日QiitaやQiita Team, Qiita Jobsのデザインシステムを社外に向けても公開しました。
細かなデザインシステムの説明は、上記の記事に譲るとして、ここでは、「なぜ今Qiitaのデザインシステムをつくったのか」「どのようにしてつくったのか」など、裏側をお届けできればと思います。
デザインシステムづくりに悩むデザイナーの方や、1人デザイナーで奮闘されている方の助けになると幸いです。
QiitaやQiita Team, Qiita Jobsで使われているカラーやテキスト、ボタンなどのコンポーネントをFigma上に整理しました。
（デザイン原則の言語化や、コードベースの管理ができてないこともあり、厳密にはこれはデザインシステムとは呼ばないのですが、わかりやすくデザインシステムと表記しています。）
デザインシステムは、Figmaでも公開しています。
2020年のはじめ、エイチーム社内異動で、Qiitaを運営するIncrementsに異動することになりました。
当時のIncrementsでは、業務委託のデザイナーの方が1人でデザインを回している状況でした。
例えば、以下のように、レイアウトとカラーを入れ込んだ状態で、開発へ持っていくことも多くありました。
また、カラーパレットも、あまり整備されてなく、ウォームグレー(左列) クールグレー (右列) があり、「使い分け難しくない！？」というような状況が社内でも起こっていました。
綺麗なモックアップをつくることに意味はありませんが、「デザイナーによってつくられるものが違う」「あの人しかデザインいじれない」「あの人に聞かないとわからない」状況にはしたくないと思っていました。 (自分が以前そのような状況にしてしまったこともあり、自分も周りも誰も幸せにならなかったので、なんとしても避けたかった)
そこで、異動した当初から、「自分以外もデザインに触れられるような、仕組みづくりをしたい」と思っており、代表とも相談し、デザインシステム作りに着手することになりました。
組織やプロダクトが大規模になって、「デザイナーのためにつくるデザインシステム」もあるかと思います。
一方で、今回のデザインシステムは「開発に秩序と生産性をもたらすためのデザインシステム」としてまとめました。
デザインシステムをつくり始めるころ、既に業務委託で入っていたデザイナーの方や、Increments代表とも相談しながら、「今よりスピードが早くなるなら、ぜひやりたいよね」ということで、取り組むことが決定しました。
もともと、デザインデータに関しては、正直あまり管理はされていない状態だったので、開発のしやすさや、デザインのしやすさなど、これを機に見直すところからまずは始めました。
社内でつかっているプロジェクトのテンプレートに沿って起票。
その後、ツールを統一・刷新することで得たいものなどをまとめます。
そして、各ツールの向き不向きなどを記載。デザイナーじゃなくても、そのツールを使ってなくても、比較ができるようにしていきました。
こうして、他のデザイナーの方や、メンバーから意見をもらいつつ、開発のしやすさも考慮してFigmaにすることに。
デザインシステムづくりは、「これが理想だ！」と理想を掲げて、マッチョなシステムをつくってしまうとあまりうまくいかないと思っています。
これまでのデザインや開発の流れを汲み取り、事業の目指すところを知った上で、小さく始めることが、組織に馴染む、効果的なやり方です。
Qiitaのデザインシステムで、一番最初に着手したのは、カラーの再定義からでした。
いきなりボタンや、より高度なデザイン原則から入るのではなく、着手のしやすさ、改善のしやすさから考えて、カラーパレットを更新します。
デザインシステムづくりをするときは、カラーパレットか、タイプスケール (フォント) から着手しようと決めていたのですが、タイプスケールに関しては、使われているフォントサイズなどがバラバラで、時間がかかりそうと判断したため、カラーパレットから着手しました。
次にタイプスケール。
そして、コンポーネントへと、徐々につくっていきました。
完成した全体像はこちら
今回のようなデザインシステムづくりでは、「いかに意思決定のコストを下げるか」という部分も非常に重視していました。
「この時のフォントサイズは15px？16px？」「ここはgray_1？それともgray_2？」のような、開発時の迷いや、デザイン時の考えるコストをなるべく減らすことで、本来時間より時間をかけるべき部分に時間を割けるようにしています。
例えば、ページ構成どうしようなどのような、情報設計・戦略に関わる部分など、デザイナーとエンジニアが時間を使うことで、より良くなるような部分に時間をかけられます。
そんな「迷わないためのデザインシステム」をつくった話でした。
今後も改善に取り組んでいきますので、よろしくお願いします！