構成のひな型を選ぶ
サービス、SaaS、ポートフォリオ、WordPress事業サイトから、目的に近いPage Kitを選びます。
devs Tools / Section Composer 1.0.0
Section Composer：Webページの構成を設計・出力
ヒーロー（主見出し）、特徴、事例、料金、よくある質問、CTA（行動を促す導線）など13種類のセクションを並べ、文章・見出し・色や余白の設計値・品質を1つのプロジェクトで管理し、HTMLやWordPress向けの8形式へ変換します。
Section Composerは、ページの区画を役割ごとに組み立てる無料ツールです。各セクションの文章、見出し階層、色や余白の設計値、WordPressブロック、アクセシビリティ、変換時に再現できない点まで、1つのプロジェクトで管理します。
- 入力内容は外部送信せず、生成もブラウザ内で完結
- H1を1件に整理し、診断理由を固定ルールIDで表示
- WordPressやサーバーへ自動反映しない
初めて使う方へ 左のPage Kit（構成ひな型）を選び、右のContent Slots（入力欄）を書き換え、最後にQuality（品質確認）→ Export（書き出し）へ進みます。
詳しい4ステップを見るブラウザ内のページ構成ワークスペースを準備しています…
Page workflow
ページの目的から実装パッケージまでの4ステップ
セクションを並べて内容を書く
セクションを追加・複製・移動・非表示・削除し、必要な入力欄だけを書き換えます。
プレビューと品質を確認する
4つの表示幅、明るい／暗い配色、見出し、必須内容、リンク、コントラスト、WordPress変換を確認します。
必要な形式で書き出す
コードと一緒に、変換で再現できない点、導入手順、確認方法、元に戻す手順を保存します。
Four page kits
技術ではなく「何を伝えるページか」から始める
service-landing
サービス紹介LP
11 Sections saas-productSaaS・製品紹介
10 Sections creative-portfolio制作会社・ポートフォリオ
8 Sections wordpress-businessWordPressで運用する事業サイト
9 SectionsPage Kitは完成コピーではありません。公開前にサンプルの主張、価格、実績、画像、連絡先、法的な文言を実際の情報へ置き換えてください。
Eight adapters
1つのプロジェクトから8形式へ書き出す
表は横にスクロールしてすべての列を確認できます。
| Output adapter（出力変換） | 主な生成物 | 向いている場面 |
|---|---|---|
| Semantic HTML | HTML・CSS・必要時のみJavaScript | 一般的なWeb制作・静的サイト |
| Gutenberg markup | ページ全体とSection単位のBlock markup | WordPress投稿・固定ページ |
| Theme /patterns | WordPressテーマ用PHP Pattern file | テーマ開発・子テーマ |
| Pattern plugin | Pattern登録用の小型プラグイン | テーマ変更後もPatternを残す運用 |
| Starter Page Pattern | 新規固定ページの開始候補 | core/post-content・page |
| theme.json v3 fragment | palette・layout・custom tokenとCSS fallback | WordPress 6.6以降 |
| Project JSON | Project・検証レポート・catalog lock | 再編集・監査・引き継ぎ |
| Runbook（作業手順書） | Install・Verify・Rollback・Content Checklist | 安全な導入と復旧 |
各Adapterはwarning（注意）とloss（変換損失）を表示します。motion、複雑な子selector、編集画面固有の動作を黙って削除しません。
Public knowledge base
生成結果の根拠を公開リファレンスで確認できます
Glossary
画面で使う英語・専門用語
- Section（セクション／ページの区画）
- Hero、特徴、料金、FAQ、CTAなど、ページの役割ごとに分けた意味のある区画です。
- Content Slot（コンテンツスロット／入力項目）
- 見出し、リンク、画像、料金一覧、質問と回答など、そのSectionに必要な型付き入力項目です。
- Variant（バリアント／配置違い）
- Sectionの意味と必要な内容を変えず、配置や情報密度だけを変えるパターンです。
- Design Token（デザイントークン／意味付き設計値）
- 色、文字、余白、角丸、影、motionを「背景色」「本文色」のような意味付きの名前で管理する値です。
- Quality Guard（品質ガード）
- 内容、見出し、アクセシビリティ、レスポンシブ、安全性、SEO、WordPress出力を固定Rule IDで検査する仕組みです。
- Loss（ロス／変換損失）
- 選んだ出力形式だけでは完全に表現できない動作や見た目の差です。代替ファイルと確認方法を表示します。
Safety boundary
このバージョンで自動実行しないこと
- 稼働中のWordPress、データベース、テーマ、プラグイン、サーバーへの書き込み。
- 外部画像の取得、サイトのスクレイピング、任意PHP、AIによる自由形式HTMLの生成。
- 自動検査の合格だけで、対象サイト、実機、編集画面、アクセシビリティ、法務、セキュリティ確認を省略すること。
FAQ
ページを書き出す前によくある質問
自由配置のページビルダーとは何が違いますか？
自由な座標配置ではなく、意味のあるSectionを縦順に並べます。読む順序、レスポンシブ、キーボード操作、WordPressのBlock変換を安定させるためです。
WordPressへそのまま自動公開できますか？
できません。Block markup、Pattern file、Pattern plugin、Starter Pattern、theme.json断片、手順書を生成し、利用者が確認して反映します。
warningやlossを消さずに表示するのはなぜですか？
出力先によってmotion、複雑なselector、編集画面の動作を同じ形で表現できないためです。差を記録し、導入と復旧を確認できる状態にします。