デザインシステムの構築と運用そしてその本質

※ こちらはWeb Designing 2024年4月号に掲載された記事になります。

近年、一つのトレンドワードとなっている「デザインシステム」。その構築と運用のリアルな話から、デザインシステムの普及で変わるデザインの未来について、「Spectrum Tokyo」主宰の三瓶亮をモデレーターに、デザインシステムの最前線で活躍する、Figma Japan株式会社の谷拓樹さんと合同会社DMM.comの河西紀明さんをゲストにお迎えした特別鼎談をお届けします。

谷 拓樹|Figma Japan株式会社 デザイナーアドボケート

国内有名企業の大規模デザインシステム構築プロジェクトに多数参画。現在はFigmaのベストプラクティスの指南やコンテンツ作成のほか、他企業のデザインシステム構築支援・アドバイスも行う(写真左)

河西 紀明|合同会社DMM.com VPoE室 エクスペリエンスデザイナー

DMM.com内のデザインシステムの構築支援や社内導入の推進を行う。社内の60以上の事業を横断する立ち位置で、デザイナーを支援し、サービスと組織を成長させる役割を担う(写真右)

三瓶 亮|Spectrum Tokyo プロデューサー

「Spectrum Tokyo」主宰。さまざまなコンテンツ発信・イベントを通して、デザインの多様性と楽しさを領域横断的に考え、デザインに関心のある人々の輪を広げる活動に精力的に取り組む(写真中央)

デザインシステムという言葉が広まった背景とその本質的定義

デザイン的なアセットの集まりを「デザインシステム」たらしめる要素

三瓶 ここ数年、「デザインシステム」がホットなトピックになっていますが、まずその背景について所感を教えてください。

 きっかけとしては、2017年頃に「Atlassian Design System」や「Lightning Design System(Salesforce)」等の大型デザインシステムが、メディア等で取り上げられ、注目を集めたことが大きいと思います。ただ、それ以前から、Web制作の世界では、作業の効率化を図る上で「パターン化」を試みることは普遍的にあり、もともとの素地はあったと言えます。

河西 デジタルプロダクトの拡張性とも関係がありそうです。マルチデバイス対応や、多岐にわたる媒体・コンテンツと、対応するものが増えてきたため、エンジニアリングを無視したデザインは、現在では成り立たなくなってきています。

 確かに、その流れの中で、「見た目と構造を分離する」という考え方は一つの潮流になっていて、そこに「デザインシステム」というビッグワードがはまり、期待含みで普及した感はあります。

三瓶 言葉の定義について、旧来、カラーパレットやコンポーネント集と呼んでいたものを「デザインシステム」と呼べるか否か、という議論もありますが、その点どう思います?

 僕個人としては、組織の中でそれらのアセットが組み合わさって機能して、組織の文脈でそれを「デザインシステム」と呼んでいるのなら、それは構わないと考えています。

河西 そのアセットの集成を、「リソースとして信頼がおける」と組織全体が認識していることは重要ですよね。仰々しくつくっても、デザイナーしか使っていないなら、それは単純なカラーパレットと大差ないことになる。

 逆に、「デザイン」や「システム」という言葉にとらわれすぎると、デザイナーやエンジニアだけのものになって、本当に巻き込みたいステークホルダーと距離ができることもあります。そのため、厳密な定義よりも、組織においてどう認識され機能しているのか、実態が重要です。

デザインシステムの定義にこだわるより、組織の中でどう認識され機能しているか、実態で捉えることが重要です(谷)

デザインシステムの捉え方と構築過程のリアルな事情

重要なのは「規模感」の合致 突っ走る前に目的を把握しよう

三瓶 デザインシステムの構築・導入を考える上で、重要なことはなんでしょうか?

河西 規模感や関係人口がどこまで及ぶかを考えることは大事だと思います。極論、関係者が2人しかいないなら、隣り合って作業すればいいだけですし。そこで、「Atlassian Design System」等の巨大なデザインシステムを真似しようとすると、規模感が違いすぎて、本来つくるべきものを見失って、つくること自体が目的化されてしまう失敗パターンは、よく見聞きします。

 あれもこれもつくろうとして“too much”になることは多いですね。現場の課題に即して整理していくと、カラーパレットやスタイルガイドの作成で十分、ということはよくあります。

三瓶 ビジネスやチームの成長フェーズも関係しますよね。スモールスタートならスピード重視で必要なツールキットをつくるほうが良いでしょうし、逆に組織が肥大化したフェーズでは、企業のフィロソフィー面からのアプローチが必要な場面もあるでしょうし。

河西 「デザインシステム」というビッグワードにとらわれて、独自のすごいものをつくろうと、気持ちが先走ってしまう部分はあるのだと思います。しかし、自分たちの規模にあった既存事例等を見た上で、自分たちに必要なものを必要だと思ってつくらないと、人員や時間をかけたのに、既成の「Material UI」などをベースに利用すればよかった…なんて、不幸な事故も起こり得る。

 デザインシステムは、一朝一夕でできるものではないからこそ、そこに投資するコストがどう見合うかも、最初に考える必要がありますね。

河西 組織の規模やフェーズ、現場の課題感で必要なツールセットは変わります。デザインシステムと言っても、ブランドガイドライン等、最初からすべてをつくろうと意気込む必要はありません。現場で顕在化している課題に対して、例えば、コンポーネントライブラリや、あるいはリソースキットとしてのガイドラインを「必要に応じて足していく」という認識で構わないと思います。

最初から統合的なものをつくろうとするのは失敗の元。まずは現場の課題を解決する視点で必要なものからつくりましょう

ビジネスオーナーの関心をどう握る? デザインシステムとコストの問題

三瓶 今、コストの話が出ましたが、実際問題、デザインシステム構築に取り組むとなると、何年くらいかかるものなんですか?

河西 DMM.comでは、プラットフォーム事業部のフロントエンド開発チームが主体となって「Turtle」というデザインシステムを構築しました。これは、商品購入や会員登録等の、当社ビジネスの核であり、顧客の信頼に直結する最低限の部分のみを抽出して構築したものですが、それでも下準備を含めて6年以上はかかりました。

 僕の関わったプロジェクトでも、まず経営理念や企業のバリュー等、哲学的な部分の言語化と共有に、最低でも半年から1年。そこから、カラーパレットに始まり、さまざまなアセットをつくるプロセスに、早くても2~3年はかかる印象です。その後さらに、運用を定着させるフェーズもあるわけで…。

河西 長い道のりになるので、コストを理由に中途半端なところで頓挫して、誰にも使われないままふりだしに戻る、という事態は避けたい。そのため、ビジネスオーナーと、目的意識やスコープを共有することは大事ですね。その上で、コストをかけてやるかという判断は必要です。

三瓶 やはりコスト面で、ビジネスオーナーから難色を示されるということはあると思うのですが、どのように目線を揃えるのですか?

河西 僕は、「デザインシステムをつくる」ではなく、「組織課題に対して必要な仕組みをつくりましょう」と言い換えることが多いです。課題を可視化して、必要なデザインシステムに求められるアセットの構成を具体的に詰めていく感じです。

 逆に、現場の課題意識に比して、ビジネスオーナーの温度感が低い場合は、ビジネスオーナーが共感してくれそうな部分からミニマムに始めることもあります。例えば、営業のプレゼン資料用のテンプレートをつくるとか。わかりやすい入口から、ブランドの一貫性や統一されたユーザー体験の重要性を理解してもらい、徐々に大局的な部分に踏み込んでいく、と。

河西 重要なのは、デザインシステムという「共通言語」の成立により、何が起こるのかを明示することです。デザインにエンジニアやマーケターがどう関わりやすくなり、プロダクト品質や生産性の向上、あるいは学習コストの削減にどう資するのか。どの課題に対するシステムをつくるのかについて、投資する意義がビジネスオーナーに見えている「透明性」が必要なのだと思います。

最初から壮大なデザインシステムを構想するのではなく「必要に応じてつくり足す」で良い(河西)

デザインシステムの運用と定着、そして変わるデザインの未来

「デザインシステム警察」ってやっぱり存在するんですか?

三瓶 運用フェーズになると、やはり「デザインシステム警察」みたいな問題は発生しますか?

河西 発生しますし、その必要もあると思います。しかし、ここで重要なのは、「警察になってはいけない」ではなくて、フィードバックサイクルの中心にデザインシステムを根づかせることだと考えています。組織全体で、「より良い議論の基盤としてデザインシステムを運用しよう」という志向性ができるところまで持っていってようやく、運用の第一歩という感じはしますね。

 デザインシステムを本質的に活かすという意味では、運用するための組織や体制づくりは一番重要です。ある程度の秩序を保つためには自治的な機能も必要ですし、一方で、制約によってなにかしらのクリエイティビティや活用性が失われてしまうと、本末転倒な部分もある。その「あそび」の部分を含めたガバナンスの設計は、一段と難しいけれど、不可欠な部分です。

三瓶 少し話は変わりますが、僕がデザインシステムに関わる中で面白いと感じるのは、デザインシステムと使う人の化学反応みたいなところなんですよね。デザインシステムを通すことで、誰がどんなに無茶なアウトプットをしても、きちんとブランドは保たれる。ときには、デザイナーではない人から、目を見張るようなアウトプットが生み出されることもある。それがデザインシステムの真骨頂なのだとすれば、デザインシステムとは「枠を規定する」ものではなくて、最低限の土台でブランドの統一性を担保しつつ、使い手の「自由を支える」プロダクトと言えるのではないかな、と。

河西 デザインシステムを「プロダクト」と捉えると、「ユーザー」は、それを使うプロジェクト関係者になる。であれば、通常のプロダクト開発と同じように、ユーザーから愛されるデザインシステムになっているかの評価は当然必要ですよね。そして最終的に、組織の皆が進んで利用するプロダクトとなっている状態にすることが、デザインシステムの運用・定着と言えるでしょう。

デザインシステムを通して多くの人にデザインという体験が広がっていくことにワクワクする(三瓶)

一人でも多くの人にデザインする喜びを届ける

 例えば、エンジニアでも、営業部門でも、カスタマー部門でも、デザイナーでない人たちが、デザイナーと同じように一貫したアウトプットが生み出せる。そういうプロダクトをつくっていると思うと、しみじみと夢がありますね。

三瓶 海外のDesign Systems Internationalという会社は、ブランドごとにデザイン生成ツールを開発して、納品先で誰でもそのブランドのデザインをつくれるようにしているんですね。彼らが実際に開発に使う「Mechanic」は、OSSとして公開されていて、これがつくるのも使うのもとても楽しい。彼らのつくるデザインシステムに触れると、デザイナーでない人にも、ポジティブな体験を与えられることは、デザインという行為を多くの人に広げることにつながると感じます。

参考:
コードもひとつのデザイン素材。デザインシステムの新しいカタチを模索するDesign Systems International

Mechanic https://mechanic.design/
Design Systems Internationalが開発する「デザインシステムを生成する」システム。

 僕の関わったプロジェクトでも、デザインシステムをつくる中で、エンジニアの方からもデザインに対する意見や本音が出てくるようになったことがあります。それまで、デザイナーでないからと遠慮して言えなかったことも、その中心にデザインシステムがあると、同じテーブルについて議論ができるようになる。そういうものとして、デザインシステムがポジティブに受け入れられたことは、とても感慨深かったです。

三瓶 一人でも多くの人が、デザインに関わり、デザインを生み出せるようにするのが、デザインシステムの本来あるべき姿と言えますね。

河西 逆に、デザインシステムが機能し、誰でもデザインができるようになると、従来のデザイナーの仕事が奪われる…と不安視する声も聞かれます。でも実際には、多くのデザイナーが、余剰になったリソースを一番関心のあることに注ぎ込めるようになり、クリエイティブを極めたり、新しい領域を開拓したりしています。こうしたキャリアの再構築が行われることは、個人にも組織にもポジティブな影響を与えるもので、恐れずに変化に飛び込んでほしいと思っています。

三瓶 デザインシステムの普及でデザインそのものがどう変わっていくのか。もっとワクワクする方向性で広まるとよいですよね。

Text:原明日香(アルテバレーノ) Photo:山田秀隆

Special Thanks to

Web Designing 2024年4月号を購入(Amazon)

Written By

Web Designing 編集部

Web Designingはネットビジネスに携わる事業者やWeb制作者、企業のWeb担当者などに向けた、「ネットビジネス情報誌」です。今話題のネットビジネスをグッと掘り下げて解説するとともに、具体的な事例をたっぷり紹介。インターネットを利用してビジネスを展開するすべての人に向けた情報をお届けします。

Partners

Thanks for supporting Spectrum Tokyo ❤️

fest partner Recruit Co., Ltd. fest partner freee K.K.
fest partner DMM.com LLC fest partner TOYOTA Connected Corporation
fest partner Gaudiy, Inc. fest partner note,inc.
fest partner STORES, Inc. fest partner Ubie, Inc.
partners Design Matters

Spectrum Tokyoとの協業、協賛などはお問い合わせまで