はじめに

3月7日(金)に行われたFigmaが主催するセミナー「スケーラブルなデザインシステム構築の実践」に参加してきました！
こちらからアーカイブ動画を視聴できます。

タイトルの「スケーラブル」とは拡張性を示す言葉です。
本セミナーではサービスの規模が大きくなっても一貫性を保ちやすいデザインシステムの作り方について詳しく紹介されていました。

Figma社をはじめ、LINEヤフー や 本田技研工業 がどういったデザインシステムを構築しているかなど具体的な事例をたくさん知ることができました。
以下要点をまとめて紹介していきます。

🎙️【Figma Hiroki Tani さん】

Hiroki Taniさんのセッションでは、デザインシステムの基盤作りにフォーカスして紹介されました。
スライドは以下から確認できます。

https://platform.twitter.com/widgets.js

デザインシステムを作る上で最初に意識すること

1. 焦らずスモールスタートから
いきなり完璧を目指すと疲れるので、「何のために？」「何を解決したい？」をチームで共有することから始める

2. ゼロから作らなくてもOK！使えるものはどんどん使う
既存のライブラリを参考にして、効率的にデザインシステムを作成するのがおすすめ

3. 羅針盤となる原則を決める
組織のミッションや価値観と結びつけるのがポイント
(例：「アクセシビリティに配慮する」など)

カラー設計のポイント

1. ブランドカラーを軸にグラデーションを作成する
ツール「Huetone」で、LCHと呼ばれる人間の知覚に近いカラーシステムを基準に設計することが可能

2. コントラスト比はしっかりチェック
WCAGの基準（4.5:1以上）は基本！
こちらもHuetoneで、APCAというWCAGで検討されているアルゴリズムに基づいたコントラスト比チェックができる

3. 便利プラグインを活用
上記のようにHuetoneで作ったカラーパレットはJSON形式でエクスポート可能
さらにプラグイン「JSON to Color Variables」でJSONをFigmaにインポートすれば、Variablesとして自動で追加することもできる！

4. 色の名前を分かりやすく
テーマカラーや役割を明確にすることが大事
例えば「primary」の上に乗せる色は「onPrimary」にすると一目瞭然で分かりやすい

タイポグラフィ設計のポイント

1. スケールを活用して調和をとる
基本のフォントサイズから、一定の比率を保ったままサイズを増やしていくと、リズム感のある美しいタイポグラフィになる

2. 役割に合わせた明確な命名
抽象的な名前は混乱のもとになるのでNG
「Display 1」「Heading2」みたいに、用途がすぐに分かる名前にする

3. 環境に合わせた調整
デバイスや言語によって最適なサイズや行間は違うから、レスポンシブに対応できるように設計する
Variablesのモード機能を使えば、画面サイズごとに切り替えできる

4. 便利プラグインを活用
プラグイン「Pepper Corn」は比率やデバイスごとの設定を入力するだけで、タイポグラフィのVariablesとスタイルを自動生成することが可能

感想

カラーやタイポグラフィ設計も、具体的なツールやプラグインを交えて紹介されていて非常に分かりやすかったです！
「小さく始めて、既存の資産を活用する」という考え方にもとても共感しました。
ゼロから作らず、巨人の肩に乗るという発想は、実務でもすぐに活かせそうです🌱

🎙️【Figma Lee Coreyさん】

Coreyさんのセッションでは、Figmaを使った効率的なコンポーネント設計の考え方が紹介されました。コンポーネントの種類ごとの作り分けや、Variants・Propertiesを活用した管理術がとても参考になりました。

コンポーネントの種類と作成のコツ

  • 単純型（例：ボタン）：最小単位
    オートレイアウトを活用して内から外へ作成するのがポイント
  • 統合型（例：アイコン付きボタン）；要素を複数を組み合わせたもの
    要素同士の相対関係を意識しながら組み立てる
  • 機能的（例：テキスト変更可能なボタン）：設定で変化する
    コンポーネントプロパティで柔軟にカスタマイズできるように

コンポーネント管理術

  • Variants × Properties × Variables（Mode） で少ない構成で広くカバー可能
  • Variantsは状態管理、Properties＆Modeで柔軟対応
  • Slotを活用してインスタンスを自由に入れ替えできるようにする。
    空フレームにインスタンス配置で自由度の高いUI設計が可能！

命名と管理テクニック

  • 論理的な命名（例：Button/Default）
  • ⌘+Rで列・行まとめてリネーム可能（やり方はこちら）
  • _ や . を冒頭につけることで非公開コンポーネントであることを示す

感想

  • 「内側から設計する」という考え方が強く印象に残った
  • Slot を使えば順番や高さの制約から解放され、より自由なUIが設計できるという説明に納得
  • Component Properties や Variables を活用することで、柔軟かつメンテナンス性の高い設計が可能になるとのことでぜひ取り入れたいと思った

Coreyさんの「コンポーネントはトークン（素材）、オートレイアウトは調理器具」という例えはなるほど！となりました🍳
設計をする上での考え方が整理することができ、とても意義のあるセッションでした✨

🎙️【LINEヤフー 高橋 柊蔵さん / 井石 萌佑理さん】

Yahoo! JAPANアプリの大規模リニューアルで生まれた、デザインと実装の課題と解決方法について紹介されました。
スライドはこちらから確認できます。

https://platform.twitter.com/widgets.js

デザイン→実装で発生する課題

「デザインと実装で見た目や仕様が違う…」
「作ったデザインが実装できない…」
「画面によって設計思想が異なり一貫性がない…」

これらはデザイナーが画面構造や実装時の制約を考慮しきれていないのが原因だそうです。
このズレが積み重なるとプロダクトの質も下がってしまうため、以下の対処が必要とのことでした。

  • Figmaは単なるモックだけではなく、動的な状態変化を考慮する
  • デザインデータをそのまま実装可能な状態にする
  • 下記のようにFigmaと仕様書の役割を明確にして使い分ける
何を表すか 主な内容
Figma 見た目と構造 実現したいUIのビジュアルと構造、実装に必要な情報
仕様書 条件とルール 状態変化の条件、文言パターン、ビジネスロジックなど

Figmaで構造的に表現するには

  • 使い回すものはコンポーネント化する
  • 動的に変化するパーツはPropertiesに(例：日付、ラベルなど)
  • Figmaの命名と関数の命名を揃える
    Properties名と関数の引数名を一致させることで、実装がスムーズに行える！
  • ローカルな状態変化はVariantsとPropertiesで表現し、グローバルな状態変化(例：ダークテーマ、画面サイズ)はVariablesで設定する

デザイントークンの運用

改善前のYahoo!アプリのデザインシステムは、

  • Yahoo!JAPAN全体で共通のデザインシステムをベースにしつつも、カバーしきれない部分（色・コンポーネントなど）はアプリ側で独自定義していた
  • そのため独自定義のカラーが240色以上存在し、ルールも曖昧
  • アプリの着せ替え対応もあり、メンテナンス性が低く、追加や修正が複雑化

といった課題が複数ありました。
この問題を解決するために行なったのがデザイントークンの適切な管理と運用です。

✅ 重複カラーの整理＋着せ替えを前提とした構造設計に変更
✅ トークンの命名ルールと階層構造を明文化し、一貫性を確保
✅ トークンの種類や用途を整理し、Variablesとコレクションによる管理を最適化

こうして整理されたデザイントークンにより運用・管理の効率化とUIの再現性向上を実現することができたとのことです。

エンジニアとの連携

このセッションではデザインと実装は切り離されたものではなく、一連のプロセスとして捉えることが重要と紹介されました。
ヤフーアプリでは以下の取り組みを実施しているとのことです。

  • UI設計の段階からエンジニアも巻き込む「モブデザイン」を行う
  • 実装で困ったらデザイナーも巻き込む「モブプログラミング」を行う
  • デザインから実装まで横断的に品質チェックする

「モブデザイン」「モブプログラミング」という言葉を今回初めて聞いたのですが、プロジェクトメンバーを集め、業種問わずに一緒にデザイン/プログラミングをFIXさせる手法とのことでした。

新しい視点での指摘をもらえたり、それぞれが自分の業務の中でもデザイン/実装を意識することができるらしく、チームで素早く質の高いアウトプットを目指す上でとても有効だと感じました。

 

感想

LINEヤフーさんのような企業もエンジニアとデザイナーの連携問題は起こっているんだなと驚きつつ、デザインシステムの構築を通じて組織的に取り組み具体的な解決策を実行されたプロセスはさすがだと感じました！

「エンジニアだけ」「デザイナーだけ」で作り上げるのではなく、チーム全体で課題を共有し、一つのプロセスとして捉え、双方の視点を取り入れながら運用していく姿勢は今後ぜひ参考にしていきたいです☺️

🎙️【本田技研工業 庄子隼人さん】

庄子隼人さんのセッションでは、Hondaの歴代プロダクトが映し出される映像からスタート。
デジタルコックピット（車内ディスプレイ）などの車載UIのデザインシステムの考え方について紹介されました。

コアの世界観と個別の世界観を区別する

車は世代・シリーズごとに異なる世界観を持っているため、昔からある車と最新の車ではデザインの世界観も異なります。
また新しいシリーズが新しいデザインを持つ一方で、これまでの伝統も引き継ぐ必要があります。

そのため共通の思想(コア)を持ちながら、それぞれのシリーズらしさを表現するためのバランスが求められます。
この「コアとなる共通の世界観」と「個別の世界観」が共存し、継承されながらスケールする仕組みの設計こそが、Hondaのデザインシステムの軸になっているとのことでした。

「自分たちにとってのデザインシステム」を定義する

Hondaのデザインシステムは以下の3つで構成。

  • UIガイドライン（コンポーネントのルールを定義）
  • UIツールキット（Figmaのデザインライブラリ）
  • UIライブラリ（実装用のコードライブラリ）

Hondaにとってのデザインシステムとは、意思決定の迷いをなくすもの。
そのために、
✅ シンプルで明確なルール（細かすぎるよりも、直感的に分かりやすいことを重視）
✅ 統一感のある表現スタイル（バラバラな説明にならないように）
といった原則が定められているとのことでした。

感想

当初は自動車とUIデザインが結び付かなかったのですが、デジタルコックピット(車内ディスプレイ)にデザインシステムを反映していると聞いて、こんなところにも反映されているんだなと驚きました😳

自動車という数年がかりの長期的な製品開発の中で、世代を超えて一貫性を保ちながらデザインを成長させるという視点は非常に勉強になりました👏

おわりに

全体を通して、現場で実際に運用されているからこそ語れるリアルな知見が詰まっていて、とても学びの多いセッションでした！
デザインと実装のズレをどう防ぐか、柔軟かつ一貫性のあるコンポーネント設計の工夫など、自分のプロジェクトにも取り入れたい手法ばかりで、大満足の2時間でした🙌

小さなところからでも実践を重ねて、より良いデザインシステム運用を目指していきたいです。
ここまで読んでいただき、ありがとうございました！