C4モデル（アーキテクチャ図）とは何ですか？

ソフトウェアアーキテクチャを4段階のズームレベル（Context、Container、Component、Code）で表現する図解手法。抽象度を使い分けて、異なるステークホルダーに適切な粒度で説明できる。

C4モデル（アーキテクチャ図）のポイントは？

Context → Container → Component → Code の4段階でアーキテクチャを図解する。Context図はシステム全体と外部関係者、Container図はアプリやDBの配置を示す。Component図は内部モジュール、Code図はクラスレベルの詳細を表す。Simon Brownが提唱し、Structurizrなどのツールでコードからの自動生成も可能

【しーふぉーもでる】

C4モデル（アーキテクチャ図）とは？

💡 4段階のズームで描く、誰にでも伝わるアーキテクチャ図

📌 このページのポイント

Context → Container → Component → Code の4段階でアーキテクチャを図解する
Context図はシステム全体と外部関係者、Container図はアプリやDBの配置を示す
Component図は内部モジュール、Code図はクラスレベルの詳細を表す
Simon Brownが提唱し、Structurizrなどのツールでコードからの自動生成も可能

C4モデル — ズームインで詳細化する4つのレベル

ひよこ

C4モデルって何？アーキテクチャ図とは違うの？

ペンギン先生

アーキテクチャ図の描き方のフレームワークだよ。Google Mapsみたいに、広域表示から詳細表示まで4段階のズームレベルがあるんだ

ひよこ

4つのレベルってどう使い分けるの？

ペンギン先生

Level 1のContext図は経営者やユーザー向けで、システム全体の位置づけを示す。Level 2のContainer図は開発チーム向けで、WebアプリやDBの構成を示す。Level 3のComponent図はモジュール単位、Level 4のCode図はクラスレベルだよ

ひよこ

全部のレベルを必ず描かないといけないの？

ペンギン先生

いや、Level 1とLevel 2だけでも十分役立つよ。Level 4のCode図はUMLのクラス図に近くて、IDEで自動生成した方が効率的だから手で描くことは少ないね

ひよこ

ツールは何を使えばいいの？

ペンギン先生

Simon Brown自身が作ったStructurizrが有名で、DSLでコードとしてアーキテクチャを定義できる。PlantUMLやMermaidからC4図を生成する拡張もあるよ。コードで管理すればバージョン管理もできて、図が古くなる問題を防げるんだ

まとめ：ざっくりこれだけ覚えればOK！

「C4モデル」って出てきたら「4段階のズームレベルでアーキテクチャを描く手法」と思えればだいたいOK！

📖 おまけ：英語の意味

「C4 Model」＝ 4つのCのモデル

💬 Context、Container、Component、Codeの頭文字が全部Cだから C4 なんだよ

← 用語集にもどる

C4モデル（アーキテクチャ図） とは？

C4モデル（アーキテクチャ図）とは？