こんにちは。ACS事業部イチBackstage推しの亀崎です。今回はBackstageに導入されつつある新しいデザインシステムをご紹介します。
Canon
2025年2月に公開された Backstage v1.36.0 に Canon という新しいデザインシステムがBackstageに登場しました。
Canonとはどういったものでしょうか？どういった経緯で登場したのでしょうか？
デザインシステムとは
まず最初にデザインシステムについて簡単に解説します。
デザインシステムは、UIコンポーネント、スタイルガイド、パターン、ベストプラクティスなどをまとめたもので、開発者が一貫性のあるユーザーインターフェースを構築するための基盤を提供します。
デザインの一貫性というのはとても重要です。特に大規模なプロジェクトでは、UIの一貫性がユーザーエクスペリエンスに大きな影響を与えます。例えば、異なるページやコンポーネントで異なるスタイルやパターンが使用されていると、ユーザーは混乱しやすくなります。 こうした混乱を引き起こさないように一貫性のあるデザインシステムを採用すべきなのです。このようなデザインシステムの代表的な例として、Apple社のiPhone/iPadのUIデザインがあげられます。それぞれのアプリケーションはApple社が規定したHuman Interface Guidelinesに従うことが求められます。
これによりiPhone/iPad全体で一貫したユーザーエクスペリエンスが提供され、異なるアプリケーションであってもユーザーが操作に迷うことが少なくなっています。
Canonとは
Canonは、Backstageのデザインシステムです。Material UIのBaseUIをベースにしており、Backstageを導入している組織が柔軟なテーマのカスタマイズを可能にするものです。
ではなぜCanonが登場したのでしょうか？
Canonの登場背景
Backstageは、もともとSpotifyによって開発され、オープンソースとして公開されました。 こうした経緯もあり、Backstageのデザインは、Spotifyの内部で使用されていたものをベースにしている部分があり、 他の企業や組織が自由に変更するには適していませんでした。
こうした状況を改善し、Backstageのデザインをより汎用的で使いやすいものにするために、Canonが開発されました。 Canonを使用することで、Backstageの導入組織は、独自のブランドやスタイルに合わせてテーマをカスタマイズしやすくなります。 さらにCanonはBackstageのコンポーネントをより一貫性のあるものにし、開発者がUIを構築する際の効率を向上させることを目的としています。
Canon導入の効果
登場の背景でも述べた通り、Canon導入の効果は以下の２つが挙げられます
- 一貫性のあるデザイン
- デザイン（テーマ）を柔軟に変更できるようになる
BackstageはPluginアーキテクチャを採用しており、オープンソースコミュニティ等が公開しているPluginや、独自に開発したPluginを導入することで自分の組織にあったBackstageを作り上げることができます。こうした特徴はiPhone/iPadに好きなアプリケーションをインストールするのと似ています。
もしそれぞれのPluginが異なるデザインやスタイルを使用していると、どうなるでしょうか？独自のブランドやテーマにカスタマイズしたいと思ってもそれを実現することは困難ですし、なにより一貫性のないデザインではユーザーは操作に迷うことが多くなります。
様々なPluginを導入した場合にもBackstageの利便性を最大限に引き出すためにはiPhone/iPadと同様に一貫性のあるデザインシステムが重要になります。
そうしたことを実現するのがBackstage Canonという新しいデザインシステムです。
Canonの現在地
Canonはまだ登場したばかりで、2025年6月現在も活発に開発が続けられています (Backstage v1.39.0/Canon 0.4.0)。 本格的な導入までにはもうしばらく時間がかかると思います。
しかし、これからBackstage用の新しいPluginを開発しようと お考えの方は今の段階からCanonの動向についてウォッチしておくことをお勧めします。
さらに並行してNew Frontend Systemの開発も進んでいます。これらのFrontend Plugin向けの機能は今後１～2年の間に正式リリースされて現在の実装を置き換えていくものと思いますので、どちらもウォッチしておきましょう。
本ブログではBackstageの最新技術動向についても継続的にお知らせしていきますので、継続的にご来訪していただきご参考にしていただければと思います。
＜＜2025年7月16日追記＞＞
Backstage v1.41.0でCanonはBackstage UIと解明されました
さいごに
弊社ではBackstageをはじめPlatform Engineering領域に注力しています。お困りごと等ありましたらぜひご相談ください。
www.ap-com.co.jp www.ap-com.co.jp
また弊社では開発者ポータルBackstageのマネージドサービスである「PlaTT」も提供しております。 Backstageに興味があるという方もぜひご連絡をいただけると嬉しいです。
