上質さの正体は、
規定の多さと矛盾の少なさ。
ダンス教室デモ「ハズム」を3ツール（LP雰囲気図鑑・おまかせサイト工房・動きの強化室）がどう分担して建てたかを工程ごとに解剖し、「なぜクオリティ高く見えるのか」を実際に効いている仕組み9つに言語化します。数値はすべてこのビルドの実物から引いています。
この資料について読み終わると「なぜ良く見えるか」を自分の言葉で説明できる
サイト制作の「クオリティが高い」は、たいてい感想で終わります。この資料はそれを実物から逆算した仕組みの言葉に置き換えます。前半（03〜06章）は3ツールの分担の解剖 — それぞれが何を決め、何を強制し、何を足したのか。後半（07章）が本命で、ハズムが上質に見える理由を9つに分解します。
大事な前提をひとつ。このビルドで人間（またはAI）が「センスで」判断した場面は、実はほとんどありません。判断はツールが書いた規定に置き換わっていて、実装はその規定に従っただけです。だからこの解剖は、そのまま「誰がやっても再現できる理由」の説明になります。
要点まとめ3行で全部
分担は「決める・建てる・動かす」
図鑑が見た目とコピーの全規定を書き（決める）、工房がそれを型と検品で強制し（建てる）、強化室が完成後に壊さず動きを足した（動かす）。責任が1ミリも重なっていません。
上質さ＝規定が多く、矛盾が少ない
色4つ・書体2つ・形は曲線のみ・動きのイージング2種以内 — 「決まりごとの数」が多いのに「例外」がゼロ。人はこの整合を『プロっぽい』と読みます。センスではなく整合です。
2つの検品思想が矛盾なく合流した
図鑑の検品義務（コピー・画像・法令）と工房の検品ゲート（崩れ・SEO・動作）を同じ1本が両方完走。これが「拡張パックは工房と噛み合う」の実証で、記事の核になる事実です。
パイプライン全景人間の操作は「実例を1つ選んだ」だけ — あとは規定の連鎖
11,971字の設計図 → §1に架空スタジオ情報を充填
ハズム＝唯一の創作部分 → 工房エンジンでフルビルド
型付きデータ→部品→画像9枚 → 検品2系統
工房10ゲート＋図鑑§6.5 → 本番デプロイ（v1） → 強化室で後載せ3演出 → 再検品→本番（v2）
工程の主従がポイントです。図鑑のブリーフが「仕様書」、工房が「施工と検査」、強化室が「引き渡し後のリフォーム」。どの工程も前工程の出力を書き換えず、上に積むだけ。だから手戻りが一度も発生していません。
①図鑑がやったことyuuさん担当 — 「センスの言語化」を先に全部済ませる係
図鑑の仕事は「参考画像をくれる」ことではありません。実例を1つ選ぶと、プロが頭の中でやっている判断を全部文章化した設計図が出てきます。ハズムで実際に効いた規定はこれです：
| 規定の種類 | ブリーフの実際の中身（tone-50） | サイトのどこに現れたか |
|---|---|---|
| 配色 | base #FEFEFE / text #473838 / accent #EE5F83 の3色HEX指定 | 白地・こげ茶の文字・ホットピンクのCTA。「黒じゃない文字色」が柔らかさの土台 |
| 書体 | 見出しも本文も Zen Maru Gothic | 丸ゴシック1本の統一感（後述07章の柱） |
| 密度・形 | 密度4/5・形は曲線的・CTAはピンクを大きく | 丸カード・blob写真フレーム・情報たっぷりでも余白が生きる比率 |
| 構成 | ヘッダー→FV（左右分割）→クラス4→講師3→CTA帯→フッターの節順と、FV構図の指定 | ページの背骨そのまま。SPでの畳み方まで指定あり |
| コピー基準 | 文体=常体・感嘆符・体言止めの号令口調／4U基準／競合店名差し替えテスト／禁止語（じっくり検討・厳格な指導 等） | 「『踊れた！』の瞬間が、きみを弾ませる。」— 店名ハズム（弾む）との掛詞で差し替え不成立＝合格 |
| 画像の空気 | 光=スタジオ照明でハイコントラスト・ビビッドピンク／質感=スポーツウェアのマット＋キラキラ／「発表会前の練習室に飛び込む高揚感」 | 9枚の生成プロンプトにこの文言をそのまま注入 → 全カットの空気が揃った |
| 売り方の定石 | CTA6箇所配置（見本実測）／教室系の離脱対策=不安つぶし順／期限・残数の発明禁止（景表法） | 安心3カード→講師→声→体験の並び。ニセの「残りわずか」ゼロ |
| 検品義務 | PASS/FAIL表の提出義務＋§6.5機械チェック（check.mjs同梱・7月末の新機能） | PROOF.mdとして納品物に同梱 |
普通は制作中に何十回も発生する「この色でいい？この言い回しでいい？」という迷いが、着工前にゼロになっています。品質のばらつきは迷いの回数に比例するので、これが後述の「矛盾の少なさ」の源流です。
②工房がやったことなりさん担当 — 規定を「守らざるを得ない構造」に変換して建てる係
工房は図鑑の規定を読んで「気をつけて作る」のではありません。守らないとビルドが通らない構造に変換してから作ります。ここが職人技との最大の違いです：
スマホで横スクロールが出ない・日本語見出しが変な位置で折れない・想定外の端末幅でも文字が切れない — 「粗がない」状態はエンジン既定のCSSと検品が機械的に保証しています。人は粗を1つ見つけると全体を疑うので、ここが品質「感」の床です。
③強化室がやったことちせさん担当 — 完成品を壊さずに「生きてる感」を足す係
強化室は建て終わった後に登場します。スキルの手順どおり、まず既存の動きを棚卸しして「完成済みサイトへの後載せ」と判定 → 非破壊5条（既存のHTML・CSS・レイアウト値に一切触らない）を宣言してから、カタログの実測値を移植しました：
| 演出 | 出典と数値（そのまま移植） | なぜハズムに合うか |
|---|---|---|
| ステッカーのそよぎ＋ホバー浮き | カタログ「collage-desk」実測値: hover時 -10px / scale 1.045 / 傾き60%だけ起こす / 0.32s、待機中は±1.4°で揺れる | 「手で貼ったステッカー」の物理感。子ども向けの楽しさを品よく出す |
| 斜めリズム帯の視差 | スクロール量×∓0.05pxを±14px以内で（rAFスロットル） | 背景が音楽に合わせて微かに流れる=「静止感がない」という図鑑の構図指定を動きでも回収 |
| CTAのぷるん（squash&stretch） | hover一回につき 1.06×0.92 → 0.97×1.04 → 1×1 を0.5sで | 「無料体験に飛び込む」というコピーを、ボタン自身が飛び込む動きで体現 |
技術的な見どころは共存の仕方です。既存の傾きはTailwindのtransformが持っているので、強化室はCSSの独立プロパティ（translate / scale / rotate）とCSS変数だけで動かし、既存のtransformに指一本触れていません。追加物は anim.css / anim.js / 読み込み2行の計3点のみ — 消せばバイト単位で元通り（Reactバンドルのハッシュ不変を実測済み）。
なぜ上質に見えたのか — 9つの正体本命章。全部このサイトの実物から言語化
| # | 正体 | ハズムでの実物 | 効く理由 |
|---|---|---|---|
| 1 | 色の規律 「多色なのに散らからない」 | 白地＋こげ茶文字＋ピンク1軍。sun/mint/skyの3色は「クラスの識別」という役割にだけ登場 | 色数ではなく色の役割固定が整頓感を生む。どの色も「なぜここにあるか」が言える状態 |
| 2 | 書体の統一＋数字の顔 | 全文が丸ゴシック1本。ただし料金・実績の数字だけ Baloo 2（丸い英字書体） | 書体1本=世界観のブレなし。数字だけ別の顔=「¥6,600」がデザインされた情報に見える。素人サイトは数字が地の文に埋まる |
| 3 | 形の言語がひとつ | 丸カード・blob型の写真フレーム・丸バッジ・±数度の傾き — 直線鋭角がゼロ | 図鑑の「形: 曲線的」を全部品が守った。形の語彙が混ざらないことがトーンの一貫性そのもの |
| 4 | 小道具の反復 | 音符♪が「ヒーローの浮遊」「クラスのやさしさ度♪♪♪」「区切り」に3回以上再登場。ステッカーの傾きも同様 | 同じモチーフが文脈を変えて再登場すると「テーマを持って作られた」と感じる（工房rubricの規定でもある） |
| 5 | 写真の空気の統一 | 9枚全部が「白スタジオ・ハイキー・ビビッドピンク・動きブレ」の同一指定で生成。顔は全カット非識別 | 撮影者が1人に見える=ブランドに専属カメラマンがいる錯覚。顔なしはAI画像の不気味さ回避にも効く |
| 6 | 動きの階層 | 入場（弾むオーバーシュート）／常時（音符・そよぎ）／操作反応（浮き・ぷるん）の3層が別の振る舞い。イージング実質2種 | 「生きてるのにうるさくない」の正体。全部が同時に動かない設計（同時3つまで）が品を守る |
| 7 | 数字の早出し | FVの直下に「2人に1人・8名・年2回」がカウントアップ。料金も隠さず4クラス全掲載 | 具体的な数字は3秒で信頼を作る。「聞かないと分からないことがない」＝ちゃんとしてる感の主成分 |
| 8 | 不明ゼロの情報設計 | 対象年齢・持ち物・振替・追加集金なし・見学OK…読者の不安を先回りで全回収（図鑑の教室系定石） | デザインではなく情報の完備性。上質感の少なくとも3割はここ — 見た目の話ですらない |
| 9 | 粗がない床 | 320〜430pxの5幅で崩れゼロ・壊れ画像ゼロ・行間と改行の品質検査・リンク切れゼロ（全部機械実測） | 人は粗を1つ見つけた瞬間に全体を疑う。「何も引っかからない」こと自体が無意識の品質評価を上げる |
ひとことに圧縮すると — 上質さの正体は「センスの良さ」ではなく、決まりごとが多いのに例外がひとつもない状態です。1〜6は図鑑が決めて工房と強化室が守った「見た目の整合」、7〜8は図鑑の売り方定石が作った「情報の整合」、9は工房の検品が保証した「動作の整合」。3つの整合が同時に成立しているサイトは、実務では滅多にありません。だから目立って見えます。
もし1つ欠けていたら分担の必然性 — セット販売の論拠になる章
図鑑は判断を、工房は構造を、強化室は仕上げを担当していて、守備範囲の重なりがゼロ。これが「セットで揃えると全部が『話しかけるだけ』になる」の技術的な裏付けです。記事の3段構成（入口→土台→仕上げ）の説明は、誇張ではなく実測でした。
販売にどう使うかこの解剖の転用先3つ
① Brain記事へ — 07章の「9つの正体」は、記事の実例セクションで「なぜ良く見えるかまで説明できる」深みとして1〜2段落に圧縮して使えます。競合の見せ方（ビフォーアフター画像だけ）との差別化になります。
② オプチャの小出しへ — 「ハズムのピンク、なんで散らからないか分かりますか？」のようなクイズ形式で1正体=1投稿。2週間プロモの中身が9本ぶん確保できます。
③ モニターの「見るポイント」ガイドへ — モニターに「数字の書体」「音符の再登場」など見る場所を先に教えると、感想が「なんかいい」から「ここがいい」に変わり、そのまま販売ページに載せられる声になります。
結論3つだけ持ち帰る
センスは仕組みに置き換え済み。だから売れる。
- 1分担は「図鑑=判断の代行、工房=規定の強制と検品、強化室=非破壊の仕上げ」。守備範囲の重なりゼロが、セット販売の技術的な論拠。
- 2上質さの正体は9つに言語化できた — 色の役割固定・書体統一と数字の顔・形の言語・小道具の反復・写真の空気・動きの階層・数字の早出し・不明ゼロ・粗のない床。すべて再現可能な仕組み。
- 3この言語化はそのまま販売資産。記事の深み・オプチャ9本・モニターの観察ガイドに転用して、「なんか良い」を「ここが良い」に変える。
ソース・根拠数値・引用の出所（すべて実物）
- ブリーフ実物: 図鑑 tone-50「エネルギッシュなダンス教室」書き出し11,971字（2026-07-31取得。配色HEX・文体・禁止語・CTA6箇所・§6.5機械チェックの引用元）
- ビルド実物: プロジェクト一式 —
tailwind.config.js（closed union 4色）／src/data/（内容とコードの分離）／public/anim.css・anim.js（強化室の後載せ3点） - 検品実測: shots/verify.mjs 出力（VERIFY: PASS 10/10・320〜430px崩れゼロ・♡永続化）／ tools/zukan-check.mjs 出力（FAIL 0・WARN 0）／ アンチツインPASS ／ 著述2,804字
- 強化室の移植数値: motion-enhance スキル references/demo-prompts/collage-desk.md（Signature 2 Hover float・washi-sway）
- 検品証跡の正本:
PROOF.md（検品表＋§6.5機械チェック出力の無編集貼付。ご要望あれば共有します） - 本番: https://hazumu-dance-demo.vercel.app/（v2=強化済み）／ Before: hazumu-dance-demo-47k8mwnry-…vercel.app（v1スナップショット）