ブランドと向き合うことから始めた「Spindle」開発
谷（筆者）：Spindleの開発を始めたのは、私がサイバーエージェントに所属していた2019年頃でしたね。
原：はい。当時はUIの基準がなく、ユーザー体験の一貫性やブランディングの観点で課題があったことから、デザインシステムが必要なのではないかという声が上がっていました。デザイナーや開発者がそれぞれにルールやガイドライン、UIライブラリなどを作ってはいたのですが、お互いに正解が分からないままバラバラに取り組んでいる状態で、共通の指針がないために、長期的に運用できる形ではありませんでした。その頃、海外からデザインシステムの知見が広まり始めていて、谷さんが詳しくご存じだったので、マネージャーとしてプロジェクトを率いていただきました。
谷：まず、ブランディングの視点でアウトプットの一貫性を見いだしていくところが最初でしたね。
原：そうですね。いきなりデザインをつくり始めるのではなく、ブランディングと密接に進めていったことがポイントでした。Amebaは歴史が長いだけに、当時はブランドもアップデートが必要なタイミングを迎えていました。そのため、自分たち自身がAmebaをどう捉え、どう伝えていきたいかを整理し、デザインに関する「意思決定のための基準」をつくる必要があったんです。
何かをデザインする際、目的によって適切な表現方法は変わりますし、それが1つとも限りません。そこで、まずは「Amebaらしさとは何か」というところからチームで議論をはじめ、Amebaブランドの一貫性を生む「要素」は何かを見いだす作業をしていきました。
この段階に半年くらいかけ、そこからデザインシステムを具体的な形にしていきました。デザインシステムを作る際、ついスタイルやビジュアルライブラリなどを具体的な形にすることを急ぎがちですが、ショートカットをせず上流から進めていったことが最終的に良かったと感じています。
また「デザインシステム」という大きくて自由度の高い概念に対して、私たちなりの解釈も必要でした。最初から大きく作りすぎないことは意識していて、例えばカラーやアイコンなど必要なものからつくり始め、組織内で使われることを前提にAmebaの組織・環境に合わせて開発していきました。「必要になったものからつくる」姿勢は現在も同じです。
谷：ツールの選定については、社内的にほぼFigmaを使う流れができていた頃でした。社内ではいろいろなチームで小さくFigmaが使われ始め、共同作業に向いていそうだという知見が生まれ始めていましたね。
原：はい。過去の取り組みで解決できなかった部分の改善には協業が必要でしたから、コラボレーションのしやすさは重要な要素でした。デザイナーと開発者の協業はもちろん、インストール不要でブラウザ上で使えるため、開発以外の人に対する敷居の低さも利点でしたね。もう一つ、拡張性の高さも注目したポイントでした。プラグインなどで自分たちが使いやすいように拡張できる点は、仕組み作りと相性がいいと考えました。
