2024年も終わりに近づき、Amebaのデザインシステム「Spindle」に関する様々な取り組みを振り返ります。
今年は特にデザインとエンジニアリングの協働を深化させるための多くのイベントやプロジェクトが行われました。以下に、主な取り組みをまとめます。
Figma
今年はFigmaを題材とした発表が数多くありました。「Figma Dev Modeで進化するデザインとエンジニアリングの協働」や「Figma開発モードで実装との合流点を語る | UI＋FE合流点 feat. CyberAgent」では、デザインとエンジニアリングのシームレスな連携について深掘りしました。また、「朝までFigma」イベントでは、Figmaの新機能や活用方法についてのセッションが行われました。
Figma2周年を記念しておこなわれたイベントThe Ways We Workでは、「Amebaデザインシステム Spndleの開発」という内容でAmebaデザインシステム Spindleの開発プロセスが詳しく解説され、多くのデザイナーやエンジニアにとって貴重な情報源となりました。
Google I/O
Google I/O 2024ではクライアントサイド AIを活用した事例としてAmebaブログのプロトタイプが紹介されました。このプロトタイプはSpindle UIを使って構築されています。
AmebaとSpindleがGoogle I/Oに登場！
Amebaブログのオンデバイス生成AI活用プロトタイプが紹介されました😎🙌
(思ったよりデカかった・・・！)
UIはSpindle UIで作られています🟢👌✨ pic.twitter.com/3CXXEp76KH
— Hara Kazunari 🟢 (@herablog) May 14, 2024
Spindleの生産性向上
普段からSpindleを利用していますが生産性があがっている体感はあったのですが実際にどの程度のものか計測してみました。
その結果、Spindleを利用している状態と利用していない状態とでは3倍の差があることがわかりました。
＼Spindleの生産性を計測🟢／
デザインシステムの定量的な効果は・・？
という質問をよくいただくので、Spindleあり・なしでの実装時間を計測してみました⏱️
その結果は・・・
「Spindleを使うと3倍はやく、Amebaらしく開発できる🚀」
ということに🙌💚💫実装の様子は動画でご覧いただけます😉▶️ pic.twitter.com/0CJZaUN2cf
— Ameba Design System Spindle (@AmebaSpindle) June 4, 2024
またデザインシステムを利用することでどのような影響があるのかはMTDDCで発表した「デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド」で深く解説しています。
Ameba20周年
Amebaは今年、20周年を迎えました。イベントではSpindleが多く使われました。
CyberAgent Developer Conferenceでは「コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング」という内容でどのように影響を与え、どのような成果を生み出していったのかについて触れています。
CyberAgent Developer Conference
サイバーエージェントの開発者向けカンファレンスであるCADCのランディングページ制作でSpindleが採用されました。翌年への拡張性を見越して、Figma Variablesで各種値を変数化していたり、各Componentに対して振る舞いを指定しやすくするためにSectionを活用して技術仕様をフォーマット化したりしているところが特徴です。
ファイルはFigma Communityに「CADC2024 with Spindle」という名前で公開されています。
デザインシステムの普及と教育
「Web Designing4月号」では、デザインシステムに関する特集が組まれ、Spindleの取り組みが紹介されました。
【Web Designing4月号、発売中！】Case Studyとして、Amebaのデザインシステム「Spindle」を取り上げています。武本敏治さんと本田雅人さんに、導入の背景から運用までお話をうかがいました。詳細は本誌でチェックしてください！ pic.twitter.com/YQcFr9Kjkp
— Web Designing編集部｜マイナビ出版 (@WD_editors) February 25, 2024
2024年は、Spindleがさらに進化を遂げ、デザインとエンジニアリングの協働を深化させた一年でした。これからもより良いデザインシステムの構築と拡張に努めてまいります。
皆様、良いお年をお迎えください。