# UTAGE 公開ページ → Monaka ブロック突合せ表

**最終更新: 2026-06-02**

移行・URL 取り込み・再取り込みの判断用。**ユーザー向け説明では製品名 Monaka** を用いる（本書の「UTAGE」は取り込み元 JSON の識別用）。

**実装の正本**: `app/Services/UtagePageImportService.php`  
**仕様の要約**: `docs/funnel-spec.md` §5.3  
**手順**: `docs/manual.md`（ファネル → ページ追加 → URL 取り込み）

---

## 取り込みの前提

| 段階 | 内容 |
|------|------|
| 検出 | HTML 内の `v-bind:data='…'` または `window.__INITIAL_STATE__` から JSON を抽出 |
| 変換 | `elements[]` ツリー（section / row / col / …）→ `page_content.sections[]` |
| 画像 | 保存前に `FunnelPageImportImageMirrorService` で `/storage/...` へ（失敗時は元 URL） |
| 限界 | **100% ピクセル一致は保証しない**。下表の「手直し」列を参照 |

「アバウト」ではなく **型ごとにルールをコード化**しているが、UTAGE 側が row 合成・CSS 依存のレイアウトを使う場合は表のとおり **Monaka 側のブロック／CSS で補う**必要がある。

---

## ブロック型の突合せ（一覧）

| UTAGE `type` | Monaka | 自動変換 | 手直し・注意 |
|--------------|--------|----------|----------------|
| `section` | 1 つ以上の `section` / `columns2` 等 | ○ | 子 `row` ごとに分割。`section_img_src` は背景画像へ。`format=top` → ヘッダー固定 |
| `row`（1 列・テキストのみ inner） | 親 `section` に統合 | ○ | ヒーロー上部のピル帯＋見出しの二重セクション化を防止 |
| `row`（2〜4 列） | `columns2` / `columns3` / `columns4` | ○ | `col_width_1` → `col_ratios`（例 23 → 23,77）。狭い `width` → `content_max_width` |
| `row`（白 inner・親が灰） | 上記＋ `content_card_bg`（**セクション単位**・統合しない） | ○ | 親 `#f8f9fa`・行 `#ffffff` → 各 row が灰帯＋白 inner。エディタ編集を優先 |
| グラデ／`section_img` ＋ 次行 `design:inner` 白枠 | 行ごとに別 section（統合しない） | ○ | ヒーロー行と白枠は **別セクション**のまま取り込み |
| `col` | カラム配列 `elements[i][]` | ○ | `col.padding_side` → `col_padding`（列ごと余白） |
| `head` | `headline` | ○ | 隣接同一見出しはマージ |
| `subhead` | `subhead` | ○ | |
| `text` | `text`（`html_content` 保持） | ○ | `<p>` / `<br>` は保持。段落間隔はプレビュー CSS で補正 |
| `image` | `image` | ○ | `width` px → `%` 換算。ヘッダーロゴは px 固定優先 |
| `button` | `button` | ○ | `img_src` ありも button 維持。`animation` → `shine` / `scale` 等 |
| `divider` | `divider` | ○ | 区切りのみの行 → 次の `columns2` の `section_lead_elements` |
| `balloon` | `balloon` | ○ | 無いページは 2 列 row で代替されることが多い → 手置き吹き出しも可 |
| `bullet` / リスト HTML | `bullet` | ○ | |
| `form` | `image` + `form_register`（案内） | △ | **送信・シナリオは未接続**。Monaka でフォームブロック設定 |
| `line_btn` 等 | （JSON に無い場合あり） | × | 画像のみ取り込み → **LINE ブロック＋シナリオ**を手設定 |
| `footer` | `footer` | ○ | |
| `video` 等 | `video` 等 | △ | 型があればマップ。無ければスキップ or `html` |
| ページ CSS | `funnel_pages.custom_css` | ○ | 完全一致は非保証 |

---

## 特商法テンプレート（ラベル｜本文）

| UTAGE の構造 | Monaka での再現 |
|--------------|-----------------|
| 親 `section` 背景 `#f8f9fa`、`padding_top` 70 | 先頭行のみ親余白。2 列行は **外側 `bg_color`＝灰** |
| 各 `row` 幅 800・背景白 | `content_max_width=800` + **`content_card_bg=#ffffff`** |
| `col_width_1: 23` | `col_ratios: 23,77` |
| 右列 `padding_side: 20` | テキスト要素の padding + 列 `col_padding` |
| キャンセル等の長文（複数 `<p>`） | `html_content` そのまま + `.el-text p { margin-bottom: 1em }` |

再取り込み: ページ一覧の **取込元 URL から再取り込み**（`import_source_url` が `utage-system.com` 等のとき）。

---

## 特商法ページで「まだアバウト」に見えやすい点（正直な一覧）

| 項目 | UTAGE | Monaka（現状） | 対応 |
|------|-------|----------------|------|
| **再取り込み** | — | コード修正前の `page_content` は直らない（列幅・960px 上限など） | 一覧の **↻ 再取り込み** 必須 |
| **LP 全幅 inner ボックス** | `section_width:100` の白枠は画面幅いっぱい | 旧取り込みは誤って **`content_max_width:960`** で狭めていた | 2026-06-05 修正＋再取り込み |
| **列幅** | `col_width_1: 23` → 左 23% | 再取り込み後 `23,77` | 自動（取り込み） |
| **灰＋白カード** | 1 つの灰セクション内に白 800px | 行ごとにセクション分割（灰外枠＋白内側は再現） | 自動。完全に **1 枚の白カード** にまとめる統合は未実装 |
| **上余白 70px** | 親セクション先頭のみ | 旧取り込みは各行に 70px が付く不具合あり | 2026-06-02 修正＋再取り込み |
| **見出しブロック** | 灰の中の白カード先頭 | 灰外枠＋白カード＋上 70px は再現。inner 行の +20px は要素側 | ほぼ自動 |
| **区切り線** | 白カード内の横線 | `section_lead_elements` で次行の上に表示 | ほぼ自動（1px の見え方差はありうる） |
| **キャンセル段落** | 複数 `<p>`＋`<br>` | `html_content` 保持＋段落 CSS | 自動 |
| **ページ枠の影** | なしに近い | `page-wrap` の box-shadow（既定） | ページ設定または CSS で調整 |
| **100% 一致** | — | フォント・行間・SP 専用レイアウトは保証外 | エディタで微調整 |

---

## 移行時チェックリスト（運用）

1. **取り込み** → プレビューと元 URL を並べる（ヘッダー・2 列表・背景・キャンセル段落）。
2. **コード更新後は必ず再取り込み**（`import_source_url` があるページ）。古い `page_content` は直りません。
3. **差分が残る場合** → 本表の「手直し」列（LINE・フォーム・吹き出し・CTA 枠線色など）。
4. **公開** → `status=public`、独自ドメインはトップページ公開（`docs/funnel-spec.md` §9.1）。
5. **ドキュメント** → 新しい UTAGE 型パターンを見つけたら本表と §5.3 を同じ PR で更新。

---

## 関連

- `docs/funnel-spec.md` §5.0（`import_kind`）・§5.3（変換ルール詳細）
- `tests/Unit/UtagePageImportServiceTest.php`（特商法・ヘッダー・比率の回帰）