TYPE A

フル文章型

1カラム、本文のみ。まだ裏付けデータがない導入・概念説明に使う。

leadText
+ bodyParagraphs[]
A型:1カラム全幅
Aフル文章型

段落4〜6個。データ可視化が無いページに使う。使いすぎると単調になるため、本文ページの主力にはしない。

スロット: leadText, bodyParagraphs[]
コンポーネント: 素の<p>.pp-2col不使用)
TYPE B

非対称2カラム型

左=文章(1fr)・右=データ/画像(270px)。最も汎用的な型で、本文ページの主力になる。

dataBlock
B型:左=文章(3段落)/右=データ
B非対称2カラム型

説明文+裏付けデータの組み合わせ。最も汎用的:実装済み15ページ中、単独/複合合わせて最多で使用。

スロット: leadText+bodyParagraphs[](左)/ dataBlock(右、1〜2個)
コンポーネント: .pp-2col + (.pp-stats|.pp-stats-dark|.pp-chart|.pp-quote|.pp-imgph)
TYPE C

カードグリッド型

3〜4枚の均等カード。並列要素の列挙(ステップ・リスク・強み・チェックリスト)に使う。

card 1
heading+body
card 2
heading+body
card 3
heading+body
C型:3〜4枚の均等カード
Cカードグリッド型

短い項目3〜4個(各見出し+1〜2文)。列数とHTML子要素数を必ず一致させる(DR003、不一致だと回り込み事故)。

スロット: cards[](各: heading+body, 任意でnum)
コンポーネント: .pp-step-grid / .pp-risk-grid
TYPE D

KPI強調型

ダークパネル+文章少なめ。少数の強い数字を印象付けたいときに使う。

kpiHeading
kpiItems[] — label + value
note(出典)
D型:黒背景に数字を強調
DKPI強調型

数字2〜4個が主役、文章は最小限。周囲の白背景ページと強いコントラストをつけ、パラパラめくった際に視線を止める。

スロット: kpiHeading, kpiItems[](label+value, 2〜4個), note
コンポーネント: .pp-stats-dark
TYPE E

フルビジュアル型

画像/図が主役、文章最小。章の切り替わり・コンセプトの視覚的要約に使う扉ページ。

visual(1点)
E型:図が主役、文章は最小限
Eフルビジュアル型

ほぼテキストなし(statement 1〜2文のみ)。新規レイアウトパターンのため実装直後に必ずスクリーンショットで密度確認する。

スロット: statement(1〜2文), visual(1点)
コンポーネント: .pp-convergeパターン(画像+HTMLオーバーレイラベル)
TYPE F

比較表型

テーブル中心。複数の選択肢を横並びで比較する。

F型:行×列のテーブル
F比較表型

表1つ(4行前後)+補足1〜2文。自社比較表として使う場合は中立性配慮の一文(caveat)を添える。

スロット: tableRows[](4行前後), caveat(任意)
コンポーネント: .pp-compare
TYPE G

扉ページ型(Part区切り)

大型章番号+タイトル。単独では使わず、他の型の冒頭に付加する軽量パーツとして使う。

01
PART I
partTitle
(他の型の本体がここに続く)
G型:大型番号+Part名(冒頭パーツ)
G扉ページ型

Partの切り替わり地点の最初のページにのみ付加する。単独で1ページ使うと密度不足になりやすいため、必ず他の型と組み合わせる。

スロット: partNum, partName, partTitle
コンポーネント: .pp-part-mark
TYPE H

リスト縦積み型

事例・メニュー等の縦list。同種の項目を3〜6個並べる。

item 1 — title+meta+body
item 2 — title+meta+body
item 3 — title+meta+body
item 4 — title+meta+body
H型:同種項目の縦list
Hリスト縦積み型

事例集・支援メニュー・プロセスの各段階など。3〜6項目が目安、多すぎる場合はグループ見出しで束ねる。

スロット: items[](title+meta+body, 3〜6個)
コンポーネント: .pp-cases/.pp-case.pp-num-list.pp-toc-visual+.pp-menu-grp
TYPE TIMELINE

プロセス型(B型の拡張)

横並びタイムライン+2カラム説明。時系列・手順の提示に使う。型番号を振らずBの拡張として扱う。

venn/image
01
02
03
04
05
Timeline型:B型+横並びステップ
Tプロセス型

B型の容量+ステップ3〜5個。実例: whitepaper-print.html s03「共創の型と実践プロセス」。

スロット: B型のスロット+steps[](num+label+sub)
コンポーネント: .pp-2col + .pp-timeline
TYPE I · NEW

マトリクス/2軸グリッド型

2x2グリッド、X軸/Y軸ラベル付き。2026-07-13のdeep-researchでMicrosoft SmartArt・Atlassian Team Playbook・SlideModelの3系統から裏付けが取れた追加型。

象限1
象限2
象限3
象限4
← Y軸: Low
Y軸: High →
I型:2x2グリッド+軸ラベル
Iマトリクス/2軸グリッド型

2軸で分類・優先順位付けしたい場合(施策の優先度マトリクス、リスクと影響度のマッピング等)。未実装の新型:まだ実例ページがなく、対応コンポーネントも未実装。

スロット: xAxisLabel + yAxisLabel + quadrants[](4象限、各: label+items[]1〜3個)
コンポーネント: .pp-matrix(未実装、新規コンポーネント)
TYPE J · NEW

循環プロセス型(Cycle)

円環状に配置されたステップ。Timeline型(直線・一方向)とは対照的に、継続的に繰り返すプロセスを表現する。Microsoft SmartArtとBeautiful.aiの双方で直線Processとは別カテゴリとして確立。

01
02
03
04
J型:円環状のステップ配置
J循環プロセス型

継続的に繰り返すプロセス(PDCA・改善サイクル等)。未実装の新型:まだ実例ページがなく、対応コンポーネントも未実装。

スロット: steps[](各: num+label+sub、3〜6個)+ centerLabel(任意)
コンポーネント: .pp-cycle(未実装、新規コンポーネント)
TYPE K · NEW

Pull quote型(引用フォーカス)

大きな引用文が主役、文章はほぼなし。印刷/エディトリアルデザインで数十年確立された伝統的技法(雑誌・書籍章扉・年次報告書等)。Beautiful.aiも「Quotation」を独立テンプレートとして提供。

"
K型:大型引用文+出典
KPull quote型

強い主張・証言・第三者評価を際立たせたい1ページ。未実装の新型:まだ実例ページがなく、対応コンポーネントも未実装。

スロット: quoteText(1〜2文)+ attribution(任意)+ context(任意)
コンポーネント: .pp-pullquote(未実装。既存.pp-quoteはB型右カラム用の小型版)
SPECIAL

特殊型:Cover / Toc / Back

本文ページの型ルールから独立した、前付け・後付け専用の型。

watermark(透かし)
年号
Cover:大胆な文字サイズ許容
Toc:圧縮リスト形式
CTA
Back:CTA専用
COMPOSITE

複合パターン(型の重ね合わせ)

主の型1つ+従の型1つまで。3つ以上の型を1ページに混在させない。

03
PART III
card 1
card 2
card 3
G + C:Part扉番号+カードグリッド(s07実例)
KPI
B + D:文章+KPIダークパネル(s04b実例)
ANTI-PATTERNS

禁則

Atelier・Envato両調査からの共通知見。詳細はlayout-block-system.md参照。

✕ 1ページに3つ以上の型を混在させる

密度過多の主因。主の型1つ+従の型1つまでに留める。

✕ アクセントカラーを本文の地の文に使う

見出し・数字・ロゴ・章番号にのみ使う。Atelier・Envato両調査で独立に確認された規律。

✕ `--card-h`(ページの物理サイズ)を変更して密度不足に対応する

PDFエクスポート制約がある場合は情報設計側で解決する。

✕ G型(扉ページ)を単独の1ページとして使う

他の型に付加する軽量な冒頭パーツとして使う。単独で1ページ使うと密度不足になりやすい。

design:artifact-design-toolkit / references — 型定義の正本は references/layout-block-system.md。本ページはその視覚ミラー。