コードで読み解く「Ameba Spindle」　デザインシステムの裏側を徹底解説

　デザインシステムは、デザインの原則やスタイルガイド、UIコンポーネント、ツールなどを体系的に定義したものだ。開発企業にとっては、自社の製品やサービスにおけるデザインの一貫性を保つとともに、効率的な開発を実現するための基盤ともいえる。

　IT分野で多角的に事業を展開するサイバーエージェントでは、2024年、Amebaが20周年を迎えた。当初はブログサービスとして始まったが、現在ではコミュニティーやニュースサイト、漫画サービスなど、多彩なコンテンツを擁する総合メディアプラットフォームに成長している。デザインシステムを公開している企業は少なからずあるが、サイバーエージェントもその1つであり、「Ameba Spindle」の名称で公開している。

　本動画では、Spindleの開発メンバーを招き、開発や実装の観点からシステムの特長や裏話を紹介する。Spindleの開発・運用は、コラボレーションデザインプラットフォームがベースとなっているが、同プラットフォームとUIライブラリとの連携、プラグインやREST APIを使ったワークフロー、同プラットフォームに実装されている開発モードの活用などについて、実際のコードを披露しながら解説する。