ソフトウェアやグラフィックなどのデザイン原則やデザインガイドライン、UIコンポーネントなどのアセットによって構成される「デザインシステム」。2025年に開催される「大阪・関西万博」でも、デザインシステムが策定されたことが話題になったことを覚えている方もいるのでは。
グッドパッチでもクライアントワークでデザインシステムを扱うケースが増えており、業界全体としても各社のデザインシステムに関する事例やその方法論に注目が高まっています。
こうしたトレンドを背景に、デザインシステムをテーマにグッドパッチ、マイベスト、セーフィー、リクルートという4社のデザイナーによる合同の勉強会が2024年10月に開催されました。
各社が運用するデザインシステムの特徴やその手法、浮かび上がってきた課題はどういったものだったのか。本記事では、イベントのダイジェストとして、マイベストとセーフィー、2社の発表の様子をお届けします！
勉強会は東京・築地にあるマイベストのオフィスで開催。現地には40人ほどの参加者が集まりました！
話し手（登壇順）：
株式会社マイベスト デザイン部 プロダクトデザイナー 菊地さん
株式会社マイベスト デザイン部 プロダクトデザイナー 安部さん
セーフィー株式会社 企画本部 デザインセンター プロダクトデザイングループ グループリーダー 中島さん
セーフィー株式会社 企画本部 デザインセンター デザインOpsグループ グループリーダー 木村さん
目次
マイベストがゼロから取り組むデザインシステム「mybest Design System」
「ユーザーの生活を豊かにする」というビジョンの下、国内最大級の商品比較サイト「mybest」を開発・運営するマイベスト。
運用する「mybest Design System」の大きな特徴は、既存のUIライブラリやフレームワークを使用せず、ゼロから独自のデザインシステムを構築している点にあります。
デザインシステムは「mybest」のウェブ版とアプリ版、内製しているコンテンツ管理ツールの3つのプラットフォームに適用されており、ウェブ版を中心にコンポーネントの適用率が高まっている状況とのこと。
株式会社マイベスト デザイン部 プロダクトデザイナー 菊地さん
一方で、デザインシステムを運用する中で明らかになった課題も。デザイン側・実装側が互いを考慮せずに設計した結果、デザインデータと実装に乖離が生じ、なんと70個のコンポーネントが修正を必要とする事態に！
その後、コンポーネントの不一致修正に取り組み、問題の大半が解消されたとのこと。円滑な改修を行うため、以下の3つのアクションに取り組んだと言います。
①コンポーネント設計のフローの見直し
以前はウォーターフォール的だったフローを、コンポーネントの設計時と実装時にデザイナーとエンジニアの両者がレビューを行うアジャイル形式を取ることで互いの前提知識に齟齬が生じるという状況を解消。
②フローを運用するためのマニュアル作成
明文化されておらず属人的だったフロー運用に必要な情報をNotion上に記載することでマニュアル化。アサインされた直後からコンポーネントの改修に携われる状態を実現。
③共通目標の設定
以前は別々の目標を設定していたデザイナーとエンジニアが共通の目標を持つことでコミュニケーションが活発化。定例での進捗報告や課題の共有で改修がよりスムーズに。
以上のようにデザイナーとエンジニアが協働しやすいフローに変更し、両者の観点からデザインシステムを構築してきたマイベスト。
今後は残りわずかとなったコンポーネント不一致の解消、コンポーネントの運用改善、ガイドラインの策定、マイベストらしさ（＝ブランド）のコンポーネントへの落とし込みなどが挙がりました。
株式会社マイベスト デザイン部 プロダクトデザイナー 安部さん
セーフィーのデザインシステムが、プロダクトのUX向上にもたらした効果
セーフィーは「映像から未来をつくる」をビジョンに掲げ、クラウド録画型映像プラットフォーム「Safie（セーフィー）」の開発・運営を提供している企業です。映像を見るためのソフトウェアのほか、映像を記録するカメラなどのハードウェアを展開しています。
セーフィーで運用されているデザインシステム「Pantograph（パンタグラフ）」は、現在UIコンポーネントとアイコンシステムを相互に使いながら運用されています。
①UIコンポーネント
ドキュメント（各コントロール群の仕様や操作方法の定義書）、デザイン（Figmaでコンポーネント管理）、モジュール（操作感把握のためのマークアップ）の3つの要素で構成。
②アイコンシステム
プロダクトをより使いやすく、また一貫性を持たせるためにアイコンとガイドラインを定義。アイコンはデザインシステムに読み込ませて使用。
※Figmaのコミュニティ（https://www.figma.com/@safie）にて公開
セーフィー株式会社 企画本部 デザインセンター デザインOpsグループ グループリーダー 木村さん
そんなPantographにも、もちろん課題はあったといいます。セーフィーにはさまざまなプロダクトがありますが、2023年半ばにver 1.0としてデザインシステムを公開し、フロントエンドチームが実装を開始した際、プロダクト間で実装にズレが生じてしまったのです。
これは、各チームが異なるプロダクトを担当していたことに加えて、チームのメンバーが異なり、さらにそれぞれ異なる開発ライブラリを使用していたことが主な要因でした。解決に向けて以下のようなアクションを行ったと言います。
解決策①：
フロントチームやデザインチーム間でレビューや定例を設定しコミュニケーション量を増やしたことで建設的な議論が可能に。
解決策②：
それぞれのフロントチームの「Backlog」と「開発環境」を双方が確認できる体制を整備。
解決策③：
フロントチームとの間に意思疎通を図る担当者を置いたことでデザインセンターの役割が明確になり、より優れたUI/UXが実現。
合わせて、デザインシステムの運用がプロダクトのUX向上にどうつながったか、というメリットについてもプレゼンで紹介されました。
ポイント①：ヒアリングの精度を高めるデザインシステム
あるサービスにおいて、顧客のユースケースが不明瞭だったことから、デザインシステムを使用して簡易UI画面を作成。具体イメージを用いたことで、顧客インタビュー実施の際に精度の高いヒアリングが可能に。
ポイント②：プロダクト固有のUX検討に時間を使える
ビジネス要求の多さに加え、AI技術や仕様上のUIデザインの制約事項の多さがネックになっていたが、関係者との議論に向けてPdM、デザイナー、エンジニア全員がFigma画面を見ながら行うレビュー会を複数回実施。デザインシステムがあることで共通UIのデザイン検討は最小限に留められ、プロダクト固有のUX検討に工数を割けた。
ポイント③：デザインシステムの拡張を恐れない
AIプロダクトのデザインシステム適用を前に、最適なUXを実現するための拡張が想定されていたが、方針が不明瞭であることが不安視されていた。そこで新たなUIが必要となった場合、デザインシステムに追加する共通UIとプロダクト固有UIをどう処理するかといったルールを明確化。結果、ユーザーファーストなUIデザインを実現。
セーフィーの中島さんは「デザインシステムがしっかりと定義されていることで、部分のみならずプロダクトの全体UXの品質向上につながりました」と、一連の流れを経験して得た実感を語りました。
セーフィー株式会社 企画本部 デザインセンター プロダクトデザイングループ グループリーダー 中島さん
デザインシステムの悩みはそれぞれでも、突破するポイントは共通する
デザインシステムについてのプレゼンテーションの模様をお伝えしましたが、いかがでしたか？
プロダクトやデザインシステムが構築された背景はそれぞれ異なるものの、課題と捉えられていたものにはデザイナーとエンジニアの間の齟齬やデザインの統一性と品質の担保、作業効率の向上など共通するものが多く見受けられたことが印象的です。
各社のデザインシステムが今後どのような進化を遂げるのか、引き続き注目していきたいと思います。
