デザインシステムの作り方と短期間でデザインシステムを作る方法、に関する考察

BLACK AND BLUE
·
公開:2024/5/21

デザインシステムとは?検索すれば様々な記事が出てくるので割愛

では、デザインシステムってどうやって作るのか (①) 、また、それを短縮版で作るとなったときに何を削り何を残しどう進めると良いのか (②)

先ず、デザインシステムを構成している要素は何か?以下となる

  • スタイルガイド

  • デザインガイドライン(デザインライブラリーと呼ばれることもある)

  • アクセシビリティガイドライン

  • ブランドガイドライン

  • 実装関連のDoc及びデータ

これらを整備していくことになる訳だが、どうやって進めると良いのか?

「①デザインシステムってどうやって作るのか」

始めにやるべきことは目的の設定。目的は売上に寄与する or コストカット( or その両方)。コンポーネントを統一するとユーザーにとって使い易いプロダクトになる(つまり売り易くなる + Churnされにくくなる)し、作り手にとっても手間が省ける(コストカット)

【スタイルガイド】やり方は色々あると思うが、始めに既存プロダクトのコンポーネントを洗い出し、汎用的に使えるものとそうでないものを選り分ける。その上で汎用的なコンポーネントを定義する = スタイルガイドを作り始めることになる

ボタンやフォーム、ダイアログ等、メインのコンポーネントを定義し、Figmaに集約する、それを徐々に拡張していけば良い。アプリとWebがある場合、その関係性も明確化しておくと良い、OSに乗るデザイン (アプリ) とそうでないデザイン (Web) は違うので、アプリはOSのガイドラインに寄せつつ自社ガイドラインにも沿ったコンポーネントを定義していくことになる

【ガイドライン】並行してテキストガイドラインを作る。各種コンポーネントの使い方を言語化し定義していく。コンポーネントのspecやdos and don'tsを書き加えていく

【デザインパターン・デザインサンプル】「コンポーネントとその使い方がセットである」から機能する。ガイドライン内ではコンポーネントをレベル分けし、5段階で定義する。それと合わせてデザインパターン(System Messages, Wizard, Empty UI, Annotation, UX writing, etc)やデザインサンプル(実際の画面等)も用意する

【Figmaとの連携】更に並行しFigma等のデザインツールとも連携する。デザイナーがFigmaを使うときに "定義されたコンポーネント以外使うことができない" ようになっていたら、類似のコンポーネントが増えていくことはない

【デザインシステム浸透】更に更にデザイナーメンバーへのsyncも並行してやらないといけない。彼らにデザインシステムとは何か?についてインストールし、使える状態に持っていかないといけない

【運用】デザインシステムは運用していくもの(更新していくもの)なので、運用方法も定義しないといけない。新コンポーネントを作る基準値やデザインフロー等も決めておかないといけない。また、デザインシステムについてやり取りできるコミュニケーションチャネルを作っておき、必要となるコンポーネントの情報を収集することもしないといけない

【その他】他にもアクセシビリティガイドライン、ブランドガイドライン等、検討すべき項目は多数ある

これらのことを段階的に進めていくことで、経営に納得してもらい、予算を確保し、リソースを確保し、形作っていく根気の要る仕事である

「②これを短期間で作るにはどうすれば良いか」

例えば、これを3ヶ月で形にする、となった場合、どうすれば良いか

どういったファンクションがいると良いか?デザイナーとエンジニアがいれば良い。デザイナーが最低限のスタイルを用意し、ガイドラインを整備し、それをエンジニアに共有し、実装面を踏まえた仕組みを作ってもらう。デザイナーとエンジニアが密に連携し繋ぎ込みを行っていくのが肝

汎用コンポーネントとその使い方を記したガイドラインをデザイナー側で作りエンジニアに渡し、実装できるようにしてもらう。syncして進めていけると良い

が、未だそれ自体が組織に浸透し切っていない段階ならスタイルガイドとガイドラインを作り少しずつそれの効果の認知を広げていき、上位レイヤーとの合意を得た後でエンジニア工数を使った方が安全とも言える(この手のプロジェクトは、デザイナーサイドで勝手に進めてしまうと、後々「勝手に何やっているの?何にリソースを使っているの?」となってしまい、説明責任を問われ説明できず (デザインシステムの効果を定量的に示すことは実質できない) 詰む、と言った事態にならないとも言えない)

つまり、周囲との合意形成を取りながら進めていくのが良い時もある

一つ重要なこととして、「知見(知識ではなく)のあるデザイナーがいないと作れない」と言うのはあると思う。自分が過去に見たデザインシステム構築の現場もそれに慣れている人(かなりスキル高いUIデザイナー)がいたから上手くいったと思っている。知見がないと失敗の繰り返しみたいになってしまい全然進まない、となってしまうと思う

@blackblue
日々の出来事や人と話して知ったことを書こうと思う。