自社だけのBackstageを構築する: 推奨テーマカスタマイズガイド

6月 27, 2026

—

こんにちは！今日は、Backstageのユーザーエクスペリエンスを決定する最も重要な要素の一つである「テーマカスタマイズ」について深く掘り下げていきます。🎨

Backstageは単に機能を提供するツールを超え、私たちの会社のブランドアイデンティティを投影できるプラットフォームであるべきです。デフォルトで提供されるテーマも素晴らしいですが、会社のロゴの色やデザインガイドに合わせてテーマを変更することは、開発者の帰属意識を高める上で大きな役割を果たします。Backstageが推奨するテーマカスタマイズ手法を段階的に完璧に整理してお届けします！💡

🏗️ Backstageテーマシステムの基礎: Material UI

BackstageのUIはMaterial UI (MUI)をベースに構築されています。したがって、テーマをカスタマイズするということは、MUIのテーマシステムを活用するという意味と同じです。

Backstageは大きく2つのレベルのカスタマイズ方法を提供します。

Light/Darkモード切り替えおよび基本色の変更
完全なカスタムテーマの作成と適用

🌟 1段階: 基本色およびフォントのカスタマイズ (推奨方式)

最も推奨される方法は、Backstageが提供するcreateUnifiedTheme関数を使用することです。この関数は、MUIテーマをBackstageの特殊な要件に合わせて拡張します。

✅ 主要設定項目

Palette: 主色(Primary)、補助色(Secondary)、背景色などを指定します。
Typography: フォントファミリー、サイズ、太さなどを設定します。
Default Page Themes: Backstage特有のヘッダーグラデーションなどを定義します。

🛠️ 2段階: 実際のコード適用 (パッケージ: packages/app)

テーマ作業は、フロントエンドアプリであるpackages/appフォルダ内で行われます。

📝 カスタムテーマ定義例 (src/theme/myTheme.ts)

TypeScript

import { createUnifiedTheme, themes } from '@backstage/theme';

export const myCustomTheme = createUnifiedTheme({
  palette: {
    ...themes.light.palette,
    primary: {
      main: '#3498db', // 私たちの会社のメインブルーカラー！
    },
    secondary: {
      main: '#2ecc71',
    },
  },
  fontFamily: 'Roboto, Arial',
  /* ヘッダーテーマなどを追加で定義できます */
});

📝 アプリにテーマを登録する (src/App.tsx)

定義したテーマをApp.tsxのcreateApp関数に登録する必要があります。

TypeScript

import { myCustomTheme } from './theme/myTheme';

const app = createApp({
  apis: ...,
  themes: [
    {
      id: 'my-theme',
      title: 'Company Theme',
      variant: 'light',
      Provider: ({ children }) => (
        <ThemeProvider theme={myCustomTheme}>
          {children}
        </ThemeProvider>
      ),
    },
    // 既存のダークテーマなども一緒に維持できます。
  ],
});

🎨 3段階: ページ別ヘッダーテーマカスタム (Advanced)

Backstageは、エンティティタイプ(Service, API, Websiteなど)に応じて、上部ヘッダーの色やパターンを異なるものにできる機能を提供します。これにより、ユーザーは現在どのような種類のリソースを見ているのかを直感的に知ることができます。

Shape: ヘッダーに入れる幾何学的な模様を選択します。
Colors: グラデーションに使用する色の組み合わせを指定します。

💡 テーマカスタマイズ時に覚えておくべきヒント！

アクセシビリティ遵守: 色を変更する際は、テキストと背景のコントラストが十分であるか必ず確認してください。♿
一貫性の維持: すべてのプラグインが同じテーマを共有するため、特定の画面で目立つ色は避けるのが良いでしょう。
ダークモードへの配慮: ライトモードだけを作成しないでください！開発者はダークモードを愛しています。🌙

🏁 結論: テーマは開発者体験の始まりです

Backstageが推奨するテーマカスタマイズ手法の核心は、createUnifiedThemeを通じてMUIテーマを拡張し、それをアプリのthemes配列に登録することです。

この方式を使用すると、Backstageのすべてのコアコンポーネントとプラグインに一貫したスタイルが即座に適用されます。今すぐ、自社だけの独創的な開発者ポータルをデザインしてみてください！🚀