デザインシステム初心者が勉強会を開いて知った泥臭く生々しい5つの運用ヒント

ここ数年よく耳にするようになった「デザインシステム」という言葉。なんとなくチームの生産性を上げる方法論くらいには理解しているけど、本を読んでも教科書的な話しか無くていまいちピンとこない、と思った人は多いのではないでしょうか。私もそう感じる中の一人でした。

デザインシステムは業種、職種、組織規模、事業形態によって目指すべき形が変わるものです。また、組織の中で定着させるための定型的なフォーマットが無いので、なかなか本格的に手が出しにくい、やってはいるものの上手くいってるか分からない、といった方も多いのではないかと思います。

私もデザインシステムの制作・運用経験は少ないのですが、今の現場でもニーズが高まっており、もっと本格的に理解したいと考えました。また同じように感じる人も多いのでは？という思いから、Twitterで「雑談会しませんか？」と呼び掛けたところ、7名の方が集まってくださいました。

雑談会はとても盛況で、書籍には載っていない現場のリアルな課題、泥臭く生々しい経験が多く語られる時間になりました。今回はその会の中でも特に面白かったところをレポートとして共有してみます。最後に今後の年末にかけての勉強会のお知らせもあるので、ご興味ある方はご確認ください。

第1回デザインシステム雑談会の全容

7名の参加者には事前に「話したいテーマ」を募りました。現場の課題感を知る上ではとても面白いヒントになっていると思います。

・完成までのロードマップはどんな形で計画しましたか？
・どんなツールで、どんなファイル構成で作っていますか？
・どれくらいの規模のデザインシステムを運用していますか？
・導入したことによる効果はどのように測っていますか？
・デザインシステムにおけるデザイナーとエンジニアの役割分担は？
・そもそもデザインシステムを組織でどう定義してますか？

雑談会は思った以上に一つのテーマでの話が盛り上がり、ここで挙げられたテーマすべてを議論することはできませんでしたが、概ね以下の5つについての学びがありました。ここからはそれぞれの話について深堀してみます。

1）事前に組織で課題感を共有できるかが大きな鍵

デザインシステムを作る以前の問題として、まずデザイナーやエンジニアを含めて「デザインシステムってそろそろ必要だよね」という共通認識を現場で作らなければならない、という話がありました。組織によってはデザインシステムを作ることの有用性が理解されていない状況もあるようです。

デザインシステムは組織やサービスの規模・種類によって求められる形が変わるものです。関係者も多く、全貌を計画するだけでも大変な仕事になる上、投資した労力に対してどれだけのメリットがあるのかも、着手前に正確に測ることはできないため、足踏み状態が続くこともあるようです。

ここで必要になるのが、多くの関係者の視点を合わせる「リーダー役」です。実は誰もが「あれば良いのに」と考えていながら動かない状況に対し、一歩踏み出して必要性を宣言する行動が求められます。そこを皮切りに関係者を巻き込みつつ、デザインシステムは形作られるのです。

リーダーは長く関わる人の場合もあれば、新しい視点を持ち込む新人が成りうるケースもあるようです。参加者の中には、組織にジョイン後ほどなく、デザインや開発についてのあるべき姿を熱量の籠った文面にまとめてチーム共有したことで周りが動き出した、といった経験談を語る人も居ました。

おそらくこのネゴや巻き込みの地盤固めの作業が無ければ、デザインシステムを作ったとしてもうまく活用されないのでは？と感じました。課題感を共有して目線を合わせる方法は、組織によって適切なやり方は変わるものではありますが、共通して求められる作業のように思いました。

2）永遠に完成は無くともアウトラインを作るべし

デザインシステムは組織やサービスによって形が変わります。他社の事例も参考にはなりますが、そのまま同じものを作って流用、というわけにはいきません。そこで必要になるのが、自分たちの組織にとって必要になるデザインシステムのアウトライン計画です。

取り組むべき理由、目的、効果を明文化し、ロードマップ、マイルストーン、成果物、リソース、費用といった細かな計画を立てます。特に大きな組織では制作にあたっての費用対効果を問われる場合もあり、実践にあたって論理的な説明も必要になります。

また、複数サービスを提供するような事業会社であれば、利益を多く生み出すサービスほどリソースが当てがわれることもあり、なかなか新たなサービスでデザインシステム作りに工数を投下するのが難しい状況もある、といった話もありました。

しかし、1つのサービスでデザインシステムが確立されると、他サービスへの波及効果もあり、組織内に浸透させやすくなる、といった意見もありました。このあたりは初回の立ち上げハードルは高いものの、出来上がるとその有用性が広まりやすいものであるように感じました。

あと大切になるのがミニマムでスタートさせることです。理想を追い求めて壮大な計画を立てても、完成までに時間がかかる上、有用性も証明しずらいため、まずはUIモジュールを集めるといったコンパクトな施策から取り掛かり、徐々に理想の姿に変えていくような進め方が大切になります。

3）運用に向くチームメンバーを中心に据える

デザインシステム運営はチーム作業です。複数のデザイナー、エンジニアが共同で一つのプロダクトを作るため、究極のこだわり、オリジナリティを追求する仕事とは相反する部分があります。この話は書籍「Design System」でも「モジュール型 vs 統合デザイン型」という形で触れられています。

例えば、デザイナーが指定した文字サイズに13pxと14pxの違いがあり、そこに究極のこだわりがあったとしても、サービスを作る上でその妥当性をチーム全員が納得できなければ、合理的なシステムにはなり得ません。

そこに紐づく話ですが、デザインシステムを作る上でのチームメイキングには、システム作りに特性を持ったデザイナーをアサインすることも重要である、といった話がありました。また、採用の時点でそういった人材を見抜くのもなかなか難しい、といったエピソードもありました。

採用に関して言うと、何度かの面接で特性を見抜くのは難しい気もします。しかしあえて見抜く術があるとすれば、デザインデータを見せてもらうことかと個人的には思いました。デザインデータは特に「見せて」と言われるものではありません。しかしそれを効率的に綺麗に作っている人は、デザインシステムに向いている人、と言えるかもしれません。

4）適切なデザインツールは"自分達の目"で選ぶ

参加者の間では「Figma一択」という話で盛り上がりました。Googleをはじめ、Trelloを買収したAtrasianもFigmaを使っているという話もあり、特にFigmaの有用性を掘り下げる形になりました。メリット・デメリットは以下のようなところで、なかなかその場での事実関係については審議できませんでしたが、選択のためのヒントにはなるように思いました。

メリット）
・制作環境が物理的に複数でもデータへのアクセスが容易
・最新のデータにいつでも誰でもアクセスできる
・セールスなど、非デザイナー・非エンジニアも活用できる

デメリット）
・5人を超えると管理がカオスになりがち
・Figma自体のサービスが止まると作業がストップしてしまう
・複数人での作業時、保存するとコンフリクトが生じるかも

ここまでFigmaについての話になりましたが、これらは偏った情報にもなるので、XDやSketchが不利、という話ではないように思います。組織、環境によってツールの向き不向きは変わるので、こうした情報をヒントにしつつ、自分たちの目で何が使いやすいのかを見極める必要があると感じました。

またツールの話からは少しずれるのですが、参加者デザイナーの一人が語っていてとても参考になったのは「1プロダクトを作りきって出来上がったルール集から、各プロダクトのオリジナル要素を間引き、独自のパターン集を持っておく」というデータ作りの話でした。いわばそのデザイナーが持つ「秘伝のタレ」とでも言えるものかもしれません。

これを持つ人であれば、例えば取り扱うサービス、自分が所属する会社が変わったとしても、独自のメソッドで再びデザインシステムを構築し、周囲の生産性を上げやすくなります。今後、UIデザイナーとして生き抜く上での素晴らしいヒントだったように思います。

5）参考

議論する中では様々な参考も共有されました。個々の紹介は割愛しますが、一人ではなかなかたどり着けない参考情報に多く触れられるのも、数人で雑談会形式で話をするメリットのように感じました。また、参加者には自由に記入してもらえる参考サイト集のスプレッドシートも共有していました。こちらも今後、雑談会を重ねることで情報が充実していくと思います。

まとめ・雑感

デザインシステムは、思想寄りか運用寄りか、デザイナー寄りかエンジニア寄りかで参加者の関心度も変わるので、次回以降は議論のテーマを絞って参加者を集った方が良いように思いました。

また今回はじめて自分で勉強会を企画してみましたが、一人で本を読んだり、自分の現場で仕事をしているだけでは知ることができない様々な情報に触れることができ、とても学びの多い時間になったと感じています。

今後も何回かデザインシステムの雑談会は開催してみようと考えていますので、もしもご興味を持たれた方がいらしたら、お気軽にTwitterでご連絡いただけると嬉しく思います。

今後開催予定の雑談会のお知らせ

今後も興味を持つ人で集まってオンラインでの雑談会を開催したいと思います。尚、次回以降は回ごとに違ったテーマを設定します。また、各回ごとに私の人脈の中で「この人の話は絶対参考になるはず…！」という特別ゲストをお誘いする予定です（参加してくれるかどうかは知らん）。

第2回 デザイン編（2020年10月下旬頃予定）／定員9名（経験者向け）
Adobe XD、Figma、Sketchを使ってデザインシステム用のデザインデータ編集に取り組むデザイナーの方を中心にご参加いただき、参考としてウォッチしている企業の実践例の共有、自身の取り組み例、生々しい成功・失敗談などを持ち寄り、あれこれと雑談します。
-----
・時期：2020年10月下旬予定（日時は参加者決定後に調整）
・時間：19～23時の間、2～3時間を想定
・定員：9名目途
・場所：ZoomとMiroの併用

第3回 開発編（2020年11月中旬頃予定）／定員9名（経験者向け）
主にデザインシステム作りに取り組むフロントエンドエンジニアの方とデザイナーの方にご参加いただき、開発言語、開発手法、やりとりの中で課題になる点、参考となる企業の実践例、取り組み例、成功・失敗談などを持ち寄り、あれこれと雑談します。
-----
・時期：2020年11月中旬頃予定（日時は参加者決定後に調整）
・時間：19～23時の間、2～3時間を想定
・定員：9名目途
・場所：ZoomとMiroの併用

第4回 デザイン原則編（2020年11月下旬頃予定）／定員9名（経験者向け）
デザインシステム検討の大元で、チームの目線を合わせるために必要な「デザイン原則」の言語化・策定・チームへの浸透について、これから検討を考えている方、今現在取り組んでいる方で、生々しい成功・失敗談などを持ち寄り、あれこれと雑談します。議題については可能な限り、事前にアラ・コルマトヴァ著「Design System デジタルプロダクトのためのデザインシステム実践ガイド」のチャプター2をお読みいただく前提です。
-----
・時期：2020年11月下旬予定（日時は参加者決定後に調整）
・時間：19～23時の間、2～3時間を想定
・定員：9名目途
・場所：ZoomとMiroの併用

第5回 大忘年会（2020年12月18日（金）予定）／定員無制限（経験不問）
デザインシステム実践経験の有無を問わず、興味を持つ方どなたでも無制限でご参加いただけます。当日はZoomとMiroを利用し、初心者部屋、デザイナー部屋、開発部屋、雑談部屋、他では言えない事を言う部屋、など自由に会話する部屋を作ります。学びの内容はリアルタイムでMiroに記録できる形で共有し、参加者は後から振り返ることができるようになります。
-----
・時期：12月18日（金）予定
・時間：19～24時
・定員：無制限
・場所：Zoom、Miro（検討中）

ご参加の意思がある方は、私のTwitterまでお気軽にDMにてご連絡ください。この雑談会では知識が無いこと・薄いことは誰もとがめません。ただ前向きに参加者同士でGiveする精神を持つ方であれば、私が積極的にご参加いただけるよう調整します。よろしくお願いします！

KOEL by NTT Communications 荒砂のTwitterアカウントはこちら