Was macht ホームページ作成スキル v2.0?
由来: 作った現物が「ダサい」と判定された。そこで、別のAIサービスが同じ題材で作ったサイトを、自分で開いて測り、良い点を自分の言葉で手順にしたもの。好みではなく、実測値と、そのとき何を怠っていたかだけを書いてある。
最初に知っておくこと（これが全部の前提）
比べて分かったのは、差の大きな部分が作り始める前の段取りにあったことだった。その中で最も効いていたのは次の一手だった。
書き始める前に設計思想を言語化し、否定制約つきでファイルに固定する。
比べた相手のサイトは、スタイルシートの先頭に「どう見せるか」の方針と「やらないこと」が短く書かれていた。（書き方と型は reference/DESIGN_THESIS.md。Step 0 で使う形もそこにある。）
私の失敗版は、まさにその「やらないこと」に当たる「中央寄せの均等カードの反復」だった。 放っておくと必ずそこへ落ちることを知っていて、先に禁止していた。それだけの差だった。
この6つが全部
- 書く前にテーゼを書き、ファイルに固定する。 会話の中の宣言は流れて消える。
- 否定制約を2件以上入れる。 既定値を名指しで禁止しないと、既定値から離れられない。
- 明朝＋ゴシックの2書体。 1書体で通すと、何をやっても管理画面の顔になる。
- 中央寄せの均等カードを並べない。 非対称に割る。濃色帯を1つ置く。
- 画像0点は不可。 素材が無いなら生成する。生成なら「イメージ」と明記する。
- 描画して、自分の目で見るまで完成ではない。 「壊れていない」は評価ではない。
⚠ 過去に実際に起きた事故（3件）
事故1 — 「壊れていない」を「良い」と取り違えた
横スクロールが出ないか、表が収まるかを検査して出荷した。全部が破綻の検査で、魅力の評価が0件。 減点は無いが加点も無い成果物になった。
検出法: 検証ログに「◯◯が出ない」「◯◯が収まる」しか無いとき、この事故が起きている。
事故2 — 素材が無いという制約を、回避手段を検討せず受け入れた
「実写真が入手できない」→「画像なし」で確定した。画像生成に到達できたのに使わなかった。 誠実さは画像を諦める理由にならない。注記で担保する。
検出法: 依頼に含まれる要素（「写真も」など）を成果物から落としたら、必ず該当を疑う。
事故3 — 機械検査が全項目PASSした後に、目で見て崩れが見つかった
verify.py が全部緑になった後、25%に縮小して眺めたら h1 が途中で折り返して崩れていた（たとえば 焼きたてを、届けま／す。 のように、末尾の1〜2文字だけが次の行に落ちる形。例の文言は架空）。数値検査では絶対に捕まらない種類の不具合。
対策: §5 の目視を省略しない。verify.py は目視用の画像を自動で書き出す。必ず読むこと。
§1 手順
Step 0. テーゼを書く（HTMLより先・必須）
reference/DESIGN_THESIS.md を読む。 6つの型と、否定制約のカタログがある。
型を選ぶ → 名前を題材に合わせる → 否定制約を2件以上選ぶ → 最低1つは題材固有のものに差し替える → template.html の先頭コメントに書き込む。
Design: 「◯◯◯◯」— {視覚の主張を1文}。
Visual rules: {否定制約1}; {否定制約2}; {否定制約3}。
Information rule: {情報の置き方の規則}。
そのうえで、依頼した人へ1回だけ宣言する。ここで違和感が出れば書き始める前に止められる。
◆ デザイン方針
テーゼ: 「◯◯」— {主張}／禁じること: {否定制約2件以上}
配色: 里山(緑) / 藍 / 陶 ← どれか、または新調
級数: h1=1280pxで70px ／ h2=51px ／ 余白: セクション上下120px
画像: {実写真 / 生成イラストN点（イメージ注記つき） / 図版}
構成: hero → {ブロック} → 濃色帯 → 事実表 → 締め
Step 1. 事実を集める（対象が実在する場合）
- 公的データベースを最優先。 法人番号公表サイト、業種ごとの許認可・指定の公表システム（国や自治体が運営するもの）。業界ポータルより格が上で、許可番号・指定番号まで取れることが多い。例（架空）: 業界ポータルには名前と電話番号しか無かった「みどり町の◯◯教室」の指定番号が、自治体の公表ページで確かめられた ── という使い方をする。
- 出典が食い違ったら、正直に「表記差あり」と両方書く。 黙ってどちらかへ寄せない。
- 口コミが0件なら、口コミ欄を作らない。 創作は絶対にしない。
Step 2. 素材を用意する（画像0点で先へ進まない）
順に検討し、採れない理由を書けるまで「画像なし」で確定しない。
- 依頼主から実写真をもらう
- 生成する（画像を作る道具が使える環境なら、それで作る）＋ 出所の注記を必ず添える
- 図版・作図・データビジュアルで代替
- タイポグラフィと色面だけで成立させる（＝意図した選択として明示）
作風指定と禁止事項は reference/DESIGN_SYSTEM.md §6。人物の顔は生成しない。 生成後はWeb用に圧縮する（実績: 7.4MB → 566KB。1点1.8MBのまま出さない）。
Step 3. 組む
assets/satoyama.css … そのまま <link> する（配色は body の class で替える）
assets/template.html … {{ }} を全部置換する
非対称ヒーローと濃色帯の2つは必ず残す。 各ブロックの割り付けは reference/DESIGN_SYSTEM.md §5。⚠ h1 は1行7文字以内。 超えると自動折り返しで崩れる（事故3）。
Step 4. 測る
python ~/.claude/skills/homepage/verify.py path/to/index.html
テーゼの有無・否定制約の数・級数・余白・画像点数・書体分離・濃色帯・構造の反復・3幅での横はみ出しを実測し、目視用の画像を _review/ に書き出す。
Step 5. 見る（省略不可・機械では代替できない）
verify.py が書き出した _review/review-25percent.png と review-desktop.png を必ず読む。
- 縮小して眺める — メリハリが残っているか。全部が同じ灰色の帯に見えるなら濃色帯か余白が足りない。
- 見出しだけ拾い読む — 意味が通るか。目次語が並ぶだけならR-11違反。
- 第一画面を単体で見る — スクロールせずに「誰の、何の場所か」が伝わるか。
- 崩れを探す — 見出しの折り返し、はみ出し、画像の欠け。事故3はここでしか捕まらない。
- 良し悪しを1行で言語化する。 「破綻していない」は評価ではない。言語化できないまま出荷しない。
§2 実測の基準値（他AIの成果物との比較で確定）
| 項目 | 基準 | 過去に出した失敗値 |
|---|---|---|
| テーゼがファイルにある | 必須 | 無し |
| 否定制約の数 | ≥2件 | 0件 |
| h1 実描画（1280px） | ≥56px（推奨70px） | 46px ← clamp()上限で頭打ち |
| h2 実描画（1280px） | ≥40px（推奨51px） | 30px |
| セクション上下 padding | ≥100px（推奨120px） | 76px |
| 画像点数 | ≥1（推奨4） | 0 |
| 書体 | 見出しと本文で別書体 | 1書体 |
| 濃色の全幅帯 | ≥1箇所 | 0 |
| 構造の多様性 | 主要ブロックの半数以上が別構造 | 全部同一 |
⚠ 配色の数は差にならなかった。 失敗版の色トークンは15個で、優れた側の10個より多い。効くのはテーゼ・書体・級数・余白・画像・コピー。
§3 要件（満たさなければ出荷しない）
- R-1 見出しと本文で書体を分ける。日本語見出しは明朝を第一候補にする。
- R-2 1280pxの実描画でh1≥56px / h2≥40px。
clamp()の上限が頭打ちになっていないか実測。 - R-5 デスクトップのセクション上下padding ≥100px。情報量は密度の理由にならない。
- R-7 画像0点は不可（Step 2の4手順を経ること）。
- R-8 生成画像には「イメージ（実際の◯◯ではありません）」を視認位置に明記。
- R-9 全セクションが同一パターンにならないこと。濃色の全幅帯を1つ以上置く。
- R-11 セクション見出しに機能ラベルを使わない。目次語は
.label側へ逃がす。 - R-13 アクセシビリティ（skip-link / focus可視 / alt / reduced-motion）を省略しない。
- R-14 テーゼをファイル先頭に固定し、否定制約を2件以上書く。
- R-15 描画した画像を自分の目で読み、良し悪しを1行で言語化してから出荷する。
§4 内容の禁則（実在の店舗・施設を扱うとき）
- 口コミ・利用者の声を創作しない。 0件なら0件と書き、募集導線だけ置く。
- 実写真が無いことを、あるように見せない。 生成画像は必ず注記する。
- 他サイトの写真・文章を転載しない。 埋め込み（Instagram公式embed等）は可。
- 効果・改善を約束しない（医療・福祉・教育で特に）。掲載事実に留める。
- 公開は依頼主の許可を得てから。 実在の組織を名乗るページを無断で公開しない。練習・検討用ならファイル冒頭にその旨をコメントで残す。
- 子どもが写る素材を扱うときは、掲載可否を必ず確認する。
§5 ファイル
~/.claude/skills/homepage/
├── SKILL.md この手順書
├── verify.py 実測検査＋目視用画像の書き出し
├── assets/
│ ├── satoyama.css デザインシステム本体・3配色同梱
│ ├── template.html 骨組み（先頭にテーゼの枠）
│ └── placeholder.svg 素材未定でも成立させる仮画像
└── reference/
├── DESIGN_THESIS.md ★最重要。テーゼの書き方・6つの型・否定制約カタログ
└── DESIGN_SYSTEM.md 各数値の根拠・ブロック10種・言葉の作り方
着手時に読む順: DESIGN_THESIS.md → DESIGN_SYSTEM.md → template。数値だけ真似ても型は再現しない。テーゼが先。
§6 この体系を使わない場面
管理画面・ダッシュボード・比較表中心のLP・速報性の高い告知・ゲームUI・既にブランド規定があるもの。明朝の大見出しと広い余白が逆に働く。