《Figmaと運用 Vol.2》使われるデザインシステムは、どう育てる？ Ameba「Spindle」を支えるFigma運用

デザインシステムは使われてこそ価値を発揮します。しかし、ただ一方的に提供するだけでは積極的に活用される状況にはなりません。Amebaブランドのデザインシステム「Spindle」はそれ自体がクオリティのトップを走り、プロダクトのデザインを牽引すると同時に、メンバーに対して利用と参加を促すことで「Amebaらしさ」の一貫性を表現し続けています。Spindleの現在の状況と、その基盤となるFigmaの活用スタイルを、運用チームのデザインリード 本田雅人さん・テクニカルリード 原一成さんに聞きました。（「Web Desigining 2025年8月号」より抜粋）

プロフィール

Spindleは開発クオリティを牽引するトップランナー

──Spindleは2021年に発表され、運用は4年目に入りました。現在までにどんな成果を感じていらっしゃいますか？

本田雅人（以下、本田）　Spindleが共通言語になって、コミュニケーションのしやすさが生まれていると思います。例えばAmebaブランドには幅広い事業がありますが、クオリティの水準を全体的に引き上げたいときに、各サービスが個別に検討するのではなく、Spindleで新しく定義したものを提供すれば、それに則ってもらうことで自然に更新されていく構造ができています。

─Spindleを採用するかどうかは、サービスごとに委ねられてるそうですが、現在はどの程度利用されているのでしょうか？

本田　　表立って見えないものも含めると、大体7〜8割でしょうか。新規サービス開発や拡張の際に、Spindleを採用する方が合理的という考えが浸透していると思います。

─この間、Figmaにもいろいろなアップデートがありました。

原一成（以下、原）　 そうですね。私たちは基本的にFigmaを中心に開発していくと意思決定をしているので、新しい機能は積極的に活用しています。開発者向けには、Dev Modeや自社開発のプラグインなどとあわせて、できる限りFigmaからのコピー＆ペーストで実装できる環境を目指しています。コンポーネントとコードとの対応が進むほど一貫性が保持され、ミスも減るなど、作業時間の削減が期待できます。

本田　　コンポーネント管理の面では、バリアブル機能（※1）は革命的でした。Figmaの新機能を取り入れることは、結果的にSpindleの拡張性につながると考えています。メンバーが個別に新機能を追う状態では全体の一貫性を保つことは難しいので、Spindleがクオリティの水準を牽引するトップランナーである以上、キャッチアップは我々の責務と考え、メリットのあるものは取り入れる方針です。

─Spindleの管理運用のために、Figmaに期待することはありますか？

本田　　オートレイアウトの配置規則に何らかの要素の値を参照できるような機能が追加されると、1つのコンポーネントで複数のレイアウトに対応しやすくなります。できるだけ少ないコンポーネント数で、より実装に近いパターンの展開ができるようになると嬉しいですね。

原　　我々としてはコード化に関連する部分をもっと使いこなしていきたいですね。Figmaはデザインとエンジニアリングをつなぐツールとして思想を感じるプロダクトです。コードへの“つなぎ方”を最適化するアイデアが見つかることもあるのが面白いところだと思っています。

（※1）色・数値・テキストなどデザイン要素の値（トークン）を変数として定義・一括管理できる機能。トークンはコード側と共通化できるため、エンジニアとの連携にも有効

必要なとき、必要なものを。効率のよいアップデートを実行

Spindlは運用チームが中心となって、必要な課題に随時対応しています。Figmaを軸にしたアップデートのワークフローを解説します。

課題発見から実装まで

①Spindleが関わるデザインの課題を発見

デザイン上の課題をSpindleで解決する必要がある場合、デザインリードの本田さんが窓口となり、変更の意思決定をします。デザイナー個別の相談のほか、FigmaのコメントやSlack上の議論、デザイナーの定例会から要望を拾って対応することも。

②デザインを改善、ドキュメントの作成も

プロダクト全般に関わる難易度の高い要素は本田さんが作成。小規模な追加・改善は主に提案者（デザイナー）が作成し、本田さんが監修します。コンポーネントを扱う場合は、先に追加・変更を決めた背景や使用例などをまとめたドキュメントを提案者が作成し、レビューで不備や不明点を洗い出します。

③エンジニアが実装して公開

GitHubにReactとCSSのコードを書き、Storybookへドキュメントを追加して使い方や制約事項などを共有。開発スタイルを標準化するため、scaffdogで初期構成一式を自動生成しています。レビューを経て、GitHub Actionsでnpmに追加、公開します。

④コピー＆ペーストで開発できる状態へ

開発者側では、Dev Modeの各種機能やプラグイン、プライベートプラグインの活用で効率化すると共に、できる限りFigmaからのコピー＆ペーストで開発できる状態を目指しています。コンポーネント単位ではかなりの精度で実現しており、次はレイアウトなどの大きな範囲が目標です。

COLUMN｜Spindleはチーム全員でつくるもの

Spindleの管理・運用を中心的に担うメンバーは、現在5名（全員が通常業務との兼務）。デザイン・実装・ブランド・アクセシビリティに加え、最近新たにコミュニケーションの担当が加わりました。Spindleは管理者が一方的に提供するのではなく、チーム全員でつくるものという考え方から、Amebaブランドのチーム全体にSpindleの理解を促し、ブランドコミュニケーションへの参加意識を醸成する役割を担います。中心的なメンバーに加え、Spindleの改善や利用に積極的なメンバー「Spindler（スピンドラー）」も運用に貢献しています。


こうしたコミュニケーションの一環として、社内イベント「Spindle SUMMIT」を毎年開催。Spindleの活動報告やワークフローの改善事例などを共有しています

メリットがあるなら大規模な更新も

⑤スタイルをバリアブルへ一気に置き換え

2023年、Figmaのバリアブル機能搭載にともない、それまでのコンポーネントのスタイルを一気にバリアブルへ置き換え。大規模な変更が必要でも、それに見合うメリットがあれば積極的に新機能を採用しています。

⑥コンポーネントを複製して改善

既存のプロダクトに影響する変更は、元のコンポーネントを残し、複製したものを新しいバージョンとして追加。フレーム名に注記を入れるなど、新旧がわかる状態にしておきます。以後、新たなUIデザインの際に順次置き換わる形になります。

COLUMN｜Spindleの「拡張戦略」

Spindleは当初、Amebaブログをスコープとして構築されました。しかし2024年、新たなメディアプラットフォームを目指す「AmebaLIFE」へとブランドが刷新され、これまで以上に幅広いサービスへの対応が求められることになりました。コンテンツが個性になるブログとは異なり、今後はメディア自体がそれぞれ独自の個性を持ちます。そこで、中核にある“Amebaらしさ”は維持しながら解釈を広げ、かつ「一定のルールの中でハンドリングできている状態」を目指し、より幅広いシチュエーションに対応する、Spindleの「拡張戦略」に取り組んでいます。


AmebaLIFEブランドでさまざまな個性を持つサービスが増えることを背景に、Spindleにも表現の振り幅が求められています
https://content.ameba.jp/amebalife/

Figmaの学びと、幅広い利用推進

⑦基本の学習は公式で、コア機能は実践で

Figmaの基本は、公式ガイドや書籍で学ぶことを推奨。コア機能はSpindleに触れるうちに実践的に学び、トラブルシューティングなどは社内のエキスパートがサポートする体制を取っています。オートレイアウトやバリアブルといった機能を正しく使うことで、実装への理解も深まります。

⑧プロダクト開発以外にも、Spindleの恩恵が拡大

最近はFigJamやFigma Slidesが入り口になり、デザイナー以外にもFigmaのプラットフォームに加わる人が拡大中。Spindleのイラストコンポーネントを使えるFigma Slidesのテンプレートも配布しています。

＜まとめ＞
①新機能のキャッチアップはデザインシステムの責務
②大規模な更新をともなっても、メリットが大きければ実行
③Figmaの習得はUIデザイナーに必要な技術面の理解にも

取材・文：笠井美史乃
※本記事は「Web Desigining 2025年8月号」より抜粋しています。