プロトタイプの制作時間が3分の1に！──サイバーエージェントのデザインシステム「Spindle」におけるFigma活用術

プロダクトづくりが捗るエキスパートから学ぶFigma／FigJam実践活用術 第4回

　プロダクト開発現場におけるFigma活用方法について、実際にFigma／FigJamを活用されている企業へのインタビューをもとにご紹介する本連載。第4回目はサイバーエージェントの活用を取り上げます。Figmaは、デザインシステムの開発・運用ツールとして多くのケースで採用されています。サイバーエージェントのメディアサービス「Ameba」事業のデザインシステム「Spindle（スピンドル）」もその一つで、筆者が前職で立ち上げに参加したプロジェクトでもあります。今回は株式会社サイバーエージェントのテックリード／エキスパート 原一成さんと立ち上げ当時を振り返りつつ、現在までの活用・発展について聞きました。

「Spindle」公式サイト

ブランドと向き合うことから始めた「Spindle」開発

谷（筆者）：Spindleの開発を始めたのは、私がサイバーエージェントに所属していた2019年頃でしたね。

原：はい。当時はUIの基準がなく、ユーザー体験の一貫性やブランディングの観点で課題があったことから、デザインシステムが必要なのではないかという声が上がっていました。デザイナーや開発者がそれぞれにルールやガイドライン、UIライブラリなどを作ってはいたのですが、お互いに正解が分からないままバラバラに取り組んでいる状態で、共通の指針がないために、長期的に運用できる形ではありませんでした。その頃、海外からデザインシステムの知見が広まり始めていて、谷さんが詳しくご存じだったので、マネージャーとしてプロジェクトを率いていただきました。

谷：まず、ブランディングの視点でアウトプットの一貫性を見いだしていくところが最初でしたね。

原：そうですね。いきなりデザインをつくり始めるのではなく、ブランディングと密接に進めていったことがポイントでした。Amebaは歴史が長いだけに、当時はブランドもアップデートが必要なタイミングを迎えていました。そのため、自分たち自身がAmebaをどう捉え、どう伝えていきたいかを整理し、デザインに関する「意思決定のための基準」をつくる必要があったんです。

　何かをデザインする際、目的によって適切な表現方法は変わりますし、それが1つとも限りません。そこで、まずは「Amebaらしさとは何か」というところからチームで議論をはじめ、Amebaブランドの一貫性を生む「要素」は何かを見いだす作業をしていきました。

　この段階に半年くらいかけ、そこからデザインシステムを具体的な形にしていきました。デザインシステムを作る際、ついスタイルやビジュアルライブラリなどを具体的な形にすることを急ぎがちですが、ショートカットをせず上流から進めていったことが最終的に良かったと感じています。

「Amebaとは何か？」「Amebaらしさとは何か？」という社内に向けた問いから始め、「ブランド」や「デザイン原則」といった共通の指針を紡ぎ出した

　また「デザインシステム」という大きくて自由度の高い概念に対して、私たちなりの解釈も必要でした。最初から大きく作りすぎないことは意識していて、例えばカラーやアイコンなど必要なものからつくり始め、組織内で使われることを前提にAmebaの組織・環境に合わせて開発していきました。「必要になったものからつくる」姿勢は現在も同じです。

谷：ツールの選定については、社内的にほぼFigmaを使う流れができていた頃でした。社内ではいろいろなチームで小さくFigmaが使われ始め、共同作業に向いていそうだという知見が生まれ始めていましたね。

原：はい。過去の取り組みで解決できなかった部分の改善には協業が必要でしたから、コラボレーションのしやすさは重要な要素でした。デザイナーと開発者の協業はもちろん、インストール不要でブラウザ上で使えるため、開発以外の人に対する敷居の低さも利点でしたね。もう一つ、拡張性の高さも注目したポイントでした。プラグインなどで自分たちが使いやすいように拡張できる点は、仕組み作りと相性がいいと考えました。