フロントエンド - ビルド・ツール

Chromatic くろまてぃっく

StorybookビジュアルリグレッションテストUIコンポーネントスナップショットテストフロントエンドテストCI/CD

Chromaticについて教えて

簡単に言うとこんな感じ！

Chromaticは「UIの見た目が壊れていないか自動でチェックしてくれるサービス」だよ！コードを変更したとき、ボタンやフォームのデザインがズレてないか画像比較で自動検出してくれるんだ。Storybookと組み合わせて使うのが定番ってこと！

Chromaticとは

Chromatic（クロマティック）は、UIコンポーネントの「見た目の変化」を自動的に検出・レビューするためのクラウドサービスです。開発者がコードを変更するたびに、ビジュアルリグレッションテスト（見た目の劣化・崩れを検知するテスト）を自動実行し、意図しないデザイン変更をプルリクエストの段階で発見できます。

もともと Storybook（UIコンポーネントをカタログ化するツール）の開発チームが立ち上げたサービスで、Storybookとの親和性が非常に高いのが特徴です。「ボタンの色が少しズレた」「フォントサイズが崩れた」といった微細な変化も、ピクセル単位の画像比較によって見逃さず検知できます。

実務では、デザイナーとエンジニアが非同期でUIレビューを行うワークフローとしても活用されます。GitHubやGitLabと連携し、プルリクエストに「このUIの変更、承認しますか？」というレビューフローを組み込めるため、チーム全体でデザイン品質を守る仕組みを作れます。

Chromaticの仕組みと主な機能

機能	内容
ビジュアルスナップショット	Storybookの各Storyをスクリーンショットとして撮影・保存
差分検出	前回のスナップショットとピクセル単位で比較し、変化を検出
UIレビューワークフロー	変更を承認・却下できるレビュー画面をクラウド上に提供
UIテスト	インタラクション・アクセシビリティのテストも実行可能
CI連携	GitHub Actions・CircleCI などと連携し、PR ごとに自動実行
ブランチ管理	ベースラインブランチと比較して差分のみをハイライト

ビジュアルリグレッションテストの流れ

1. 開発者がコードを変更してプルリクエストを作成
        ↓
2. CIがChromaticを自動実行
        ↓
3. StorybookのすべてのStoryをスクリーンショット撮影
        ↓
4. 以前のスナップショットとピクセル単位で比較
        ↓
5. 変化があった箇所をChromaticのダッシュボードに表示
        ↓
6. チームがレビューして「承認 or 却下」を決定
        ↓
7. PRがマージ可能になる（またはやり直し）

Storybookとの関係

Chromaticは単体でも使えますが、Storybookのエコシステムと統合して使うのが最も強力です。Storybookで定義したStory（コンポーネントの表示パターン）が、そのままテスト対象になります。追加の設定をほとんど書かずにビジュアルテストを始められるのが大きなメリットです。

歴史と背景

2017年頃 — Storybookが広まり、UIコンポーネント駆動開発（CDD）の概念が注目を集め始める
2018年 — StorybookのコアメンバーがChromaticの前身となるサービスを開発・公開
2019年 — Storybook社（Chromatic, Inc.）として正式にサービス提供開始。Storybookのホスティング機能も追加
2020〜2021年 — GitHub ActionsなどモダンなCI/CDツールとの連携が強化され、導入が加速
2022年 — インタラクションテスト・アクセシビリティテストなど、ビジュアル以外のテスト機能を拡充
2023年以降 — StorybookとChromaticの統合がさらに深まり、フロントエンドのUIテスト標準ツールとしての地位を確立

類似・関連ツールとの比較

ビジュアルリグレッションテストのツールはいくつか存在します。Chromaticの立ち位置を整理します。

ツール	特徴	Storybookとの統合	ホスティング
Chromatic	クラウド完結・レビューUI付き	◎ 公式連携	クラウド（SaaS）
Percy	BrowserStack傘下・広いCI対応	△ 別途設定	クラウド（SaaS）
Reg-suit	OSSで自前運用可能	△ 別途設定	セルフホスト
Playwright	E2Eテスト＋スクリーンショット比較	△ 別途設定	セルフホスト
Loki	Storybook専用・ローカル実行	○ 対応	セルフホスト

実務での使いどころ

Chromaticが特に効果を発揮するシーンを押さえておきましょう。

1. デザインシステムの維持管理 共有コンポーネントライブラリを持つプロジェクトで、誰かの変更が他のページを壊していないか自動検知できます。

2. デザイナーとエンジニアの非同期レビュー エンジニアがコードを書いたら、デザイナーがChromaticのダッシュボードを見てUIを承認する、というワークフローが実現します。Figmaとの比較レビューも可能です。

3. リファクタリング時の安全網 CSSやコンポーネント構造を大きく変えるとき、見た目が変わっていないことをChromaticが保証してくれます。「動いているけど崩れていないか不安」という状況を解消できます。