2026-09-12作成・非公開（内部確認用）／左が今日の午前に作った試作、右が新しいエンジンで組み直したもの。中身の文言は同じで、作りとデザインの言語が変わっている。
※表は横にスクロールできます
| 観点 | 旧版（静的HTML） | 新版（studio-siteエンジン） |
|---|---|---|
| 作りの土台 | HTML1ファイルにCSSを直書き。文言と見た目が同じファイルに混ざっている | React + TypeScript + Vite。文言は src/data/site.ts、見た目は各コンポーネントに分離 |
| 文言の直し方 | HTMLの該当箇所を探して直接書き換え（見た目のコードと混在して探しにくい） | データファイルの該当行を書き換えるだけ。見た目のコードには一切触らない |
| 書き漏れ防止 | なし（説明文を書き忘れても気づかないまま公開できてしまう） | 型チェックで機械的に検知。必須項目が欠けるとビルド時にエラーで止まる |
| デザインの言語 | 角丸ボタン・ぼかした影。オレンジ×黒×白のフラットな構成 | Neo-Brutalist Bold寄りに変更。太い黒枠＋ぼかしゼロのズレた影、押した時に沈むボタン |
| 見出しの作り | 文字サイズを変えただけ | セクション番号を大きな白抜き数字で置き、英字ラベル＋日本語見出しの3段構成に統一 |
| 動き | なし（静止） | スクロールに合わせて各ブロックがふわっと出る（動きを減らす設定の人には自動で止まる） |
| 読み上げ・操作性 | 未対応 | 本文へスキップ・画像の代替テキスト・キーボード操作時の枠線を標準装備 |
| 公開の仕方 | HTMLをそのままアップロード | ビルド→検品→Cloudflare Pagesへ配信、の手順が固定（毎回同じ品質で出せる） |
※枠内はスクロールできます
※枠内はスクロールできます
たとえば「月500円」の説明文を変えたいときは、次のファイルの該当行だけを書き換えます。見た目のコードは触りません。
Dev/yamauchi-community/site/src/data/site.ts
export const offer: OfferDef = {
num: '05',
en: 'CONTENTS',
ja: '提供内容',
price: '¥500', ← 金額
unit: '／月',
body: '月500円で、美容師の経営のノウハウを教えます。', ← 説明文
}