コンテンツにスキップ

デザインモックアップ生成スキル

目的

ブランディング案件でロゴ・VI候補が生まれたとき、「実際のタッチポイントでどう機能するか？」を体感レベルで検証するためのスキル。CSSベースの簡易モックアップとThree.js PBRレンダリングによるフォトリアル3Dモックアップの2段構えで、スピード（CSS）と説得力（3D）を使い分ける。v0.3以降は審美キャリブレーション層を追加し、「モックアップで物理的に検証するだけでなく、名匠の代表作と並置して美意識のズレを目視する」工程を必須化。v0.3.1 からは Claude の初期診断と工藤さんの最終判定を両方記述するデュアルレーン方式に変更し、工藤判定を常に優先しつつ Claude の第二意見も記録として残すことで、より良い企画判断を支援する。v0.4 から §5 「クライアント別 .potx 表紙クロスチェック」を新設し、kudo-client-template-factory との連携で「PPTX × 紙物 × 空間」の3点トライアングル検証が可能に。

スキル連携マップ

このスキルは単独でも使えるが、以下のスキルとの組み合わせで真価を発揮する：

上流スキル（入力を供給する）

  • kudo-brand-architecture → ブランド構造設計で版木・記憶の箱が定まった後、そのVIが実世界で機能するかを本スキルで検証
  • kudo-designer-lens-library → ペアレンズで定めた思想軸と、各デザイナーの代表作URLを本スキルの審美キャリブレーションで使う（§3参照）。旧kudo-design-partnersの戸田/徳田参照機能は本スキルに統合済み
  • kudo-brand-lens → ブランド現在地分析の後、リブランディング候補のビジュアル検証に使用
  • kudo-marketing-strategy → 4P設計のPlace/Promotionで「どのタッチポイントが最重要か」を特定し、そのシーンを優先的にモック化
  • kudo-client-template-factory（v0.4新設） → クライアント別 .potx 生成直後、表紙スライドを本スキルで画像化し既存モックに合成、ブランド一貫性を3点検証（§5参照）
  • kudo-gemini-image-bridge（v0.5新設／2026-04-25） → Nano Banana Pro（Gemini 3 Pro Image）で生成したKV／パッケージイメージ／空間イメージを、本スキルのThree.js PBRシーンにテクスチャとして供給（バッグに載せる／店舗壁面に投影する／ショッパーに印刷する等）。Phase γ 昇格時は別スキル kudo-gemini-api-executor から直接供給可能に拡張予定

下流スキル（出力を受け取る）

  • kudo-proposal-deck → モックアップ画像をスクリーンショットしてデッキに埋め込む。3Dシーンのcanvasを画像化してスライドに配置
  • kudo-briefing → デザイナーへの発注時、「このモックアップのクオリティを目指す」というビジュアルリファレンスとして添付
  • kudo-writing → モックアップと合わせてタグライン・コピーの検証（「この言葉は、この場所で、このサイズで機能するか？」）
  • kudo-brand-architecture v1.2 DESIGN.md納品 → 本スキルで生成したモックアップ画像（バッグ・名刺・ボックス・店舗・OOH等）を DESIGN.md §1 Visual Theme の "Mood Board References" の付録ビジュアルとして納品物に同梱

連携フロー例

kudo-brand-architecture（構造設計／DESIGN.md雛形作成）
  → kudo-designer-lens-library（デザイナーペアでロゴ方向づけ＋代表作URL）
    → kudo-design-generation-loop（ロゴ生成）
      → kudo-design-mockup（タッチポイント検証 + 審美キャリブレーション） ← 本スキル
        → kudo-client-template-factory（クライアント別 .potx 生成 v0.4で連携）
          → kudo-design-mockup §5（.potx 表紙クロスチェック）
            → kudo-proposal-deck（クライアント提案デッキ）
            → kudo-briefing（デザイナーへの指示書）
            → DESIGN.md §1 付録ビジュアル（AI時代の納品物）

1. DESIGN.mdとの統合（v0.2）

接続点

kudo-brand-architecture v1.2 で導入された DESIGN.md 出力プロトコルにおいて、本スキルが生成するモックアップ画像は §1 Visual Theme & Atmosphere の付録ビジュアル＋ §4 Component Stylings の質感参照として機能する。

役割分担

DESIGN.md セクション モックアップの役割 推奨シーン
§1 Visual Theme - Mood Board 版木の佇まいを「実物で証明する」視覚物 店舗・OOH・バッグ
§4 Component Stylings - Cards/Buttons UI質感の物理リファレンス アプリUI（CSS）・名刺（3D）
§6 Depth & Elevation 紙質・光・影の参照値の根拠 名刺・ボックス（3D PBR）
§7 Do's and Don'ts - 視覚証拠 「これがDO」「これがDON'T」の実例画像 任意のシーンの良/悪比較

納品時の運用

  1. クライアントへの DESIGN.md 納品時、本スキルで生成した PNG 画像（推奨：4-6点）を assets/mockups/ フォルダに配置
  2. DESIGN.md §1 "Mood Board References" の項目にファイルパスを Markdown リンクで記載 
    ### Mood Board References
- ![Bag Mockup](assets/mockups/01-bag.png) — 紙質と影の規範
- ![Storefront](assets/mockups/02-store.png) — 店舗ファサード参照
  3. AI エージェント（Claude Code / Cursor / v0 等）が DESIGN.md を読み込んだ際、画像も同時に視覚規範として参照される

禁則

  • DESIGN.md §1 に「ミニマル」「洗練」等の抽象語だけを書いてモックアップを添付しないこと
  • §1 はデザイナーレンズ記述＋モックアップ画像 のセットで運用すること

2. 生成シーンと技術仕様（v0.1ベース）

7シーンテンプレート一覧

# シーン 描画方式 用途 カスタマイズ可能要素
1 アプリアイコン＋UI CSS アプリストア/ホーム画面での視認性 アイコンサイズ、UI配色、ナビ構造
2 OOH（渋谷スクランブルスクエア） CSS 大型ビルボードでのスケール感 設置場所、時間帯（昼/夜）、周囲ビル
3 ショッピングバッグ Three.js 3D 紙質・ロープハンドル・床面反射 バッグサイズ、紙色、ハンドル素材
4 名刺 Three.js 3D コンクリート台座・マット紙・正体トップビュー カード色（白/黒）、情報レイアウト
5 スニーカーボックス Three.js 3D マット黒・金箔ロゴ・蓋開き ボックス色、箔色、コラボパートナー名
6 フラッグシップストア Three.js 3D ガラスファサード・通行人・壁面サイン 店舗スタイル、照明トーン
7 鑑定タグ＋コラボハングタグ CSS 認証バッジ・ブランドコラボ表現 タグ形状、QR有無、パートナー名

（Three.js PBR設定・CanvasTextureロゴ描画パターン・シーンパラメータ等、技術詳細は v0.1 から変更なし。本ファイルの末尾「付録」を参照）

3. 審美キャリブレーション層（v0.3新規）

3.1 なぜ必要か

モックアップは「物理的に機能するか」を検証するが、「美しいか」は検証しない。美しさは作家の手から生まれた実作品との比較でしか検証できない。v0.2までの運用では、モックアップの見栄えに満足して「これで行こう」となるリスクが残っていた。

工藤拓真の原則「概念ばかり先行して、最後の最後、ダサくなるリスク」を、最終段階で防ぐレイヤーとして本層を設置する。

3.2 キャリブレーション・プロトコル（3ステップ）

モックアップ生成直後に必ず以下を通す：

STEP 1：名匠作品との並置（2分）

モックアップPNGと、kudo-designer-lens-library の該当ペアレンズの代表作URL（例：可士和×Saville）を左右に並べたHTMLを生成する。

<!DOCTYPE html>
<html><head><style>
  body { margin:0; background:#1F1F1F; color:#FFFFFF; font-family:'Noto Sans JP',sans-serif; }
  .split { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:24px; }
  .col { background:#161616; border-radius:12px; padding:20px; }
  .col h3 { color:#C9C5BD; margin:0 0 12px; font-weight:400; }
  .col img { width:100%; border-radius:8px; }
  .diag { background:#161616; padding:20px; margin:16px; border-left:3px solid #BC002D; }
  .diag h4 { color:#003F6B; margin:12px 0 6px; font-weight:400; }
  .diag .kudo { border-left:3px solid #2D5A3A; padding-left:12px; margin-top:8px; }
</style></head><body>
  <div class="split">
    <div class="col"><h3>モックアップ（本案）</h3><img src="mockup-bag.png"></div>
    <div class="col"><h3>名匠A：佐藤可士和 / UNIQLO (2006)</h3><img src="reference-kashiwa-uniqlo.png"></div>
    <div class="col"><h3>名匠B：Peter Saville / Factory Records (1978)</h3><img src="reference-saville-fac.png"></div>
    <div class="col"><h3>モックアップ（本案・別アングル）</h3><img src="mockup-card.png"></div>
  </div>
  <div class="diag">
    <h4>Claudeの初期診断（客観レイヤー）</h4>
    <p>...（Claudeが記入）</p>
    <h4 class="kudo">工藤さんの最終判定</h4>
    <p class="kudo">...（工藤さんが記入）</p>
    <h4 class="kudo">Claudeとのズレ／合意</h4>
    <p class="kudo">...（同意／異議＋理由）</p>
  </div>
</body></html>

カラーコードは工藤さん指定の濃色1(#1F1F1F)／濃色2(#161616)／淡色2(#C9C5BD)／アクセント1(#BC002D)／アクセント2(#003F6B、Claudeレーン)／アクセント3(#2D5A3A、工藤レーン)を使用。

STEP 2：5軸のズレ診断（5分）

並置画面を見ながら、以下の5軸でモックアップと名匠作品のズレを言語化する。Claudeが先に初期診断を記入し、工藤さんが最終判定を別レーンで記入する。2レーンの差分が、工藤さんの美意識の独自性を可視化する。

軸 問い Claude初期診断 工藤の最終判定 合意／異議
色温度 暖／寒／ニュートラル？ モックアップ側と名匠側のズレは？ （Claude記入） （工藤記入） ○同意 ／ ✕異議：[理由]
余白密度 情報：余白の比率はモックアップ xx:xx、名匠 yy:yy。ズレは？
線質 シャープ／ソフト／有機／幾何？
重心 視線の集まる場所は中央／上／下／左右？
記号密度 記号は何個あるか？ モックアップと名匠の差は？

Claude初期診断の書き方ルール - 「モックアップ＝X、名匠＝Y、ズレ度：大／中／小」の3文形式で書く - 作品URL（kudo-designer-lens-library WORKS.md）の該当箇所を引用して根拠を示す - 断言を避け「〜に見える」「〜の傾向」と留保をつける（工藤さんの判断余地を残すため）

工藤の最終判定の書き方ルール - Claudeの診断に同意する場合は「○同意」1文字でよい - 異議ありの場合は「✕異議：自分はこう見た／この軸はもっと重要／Claudeは××を見落としている」等、理由付きで書く - 迷う場合は「保留：追加で見たい作品URL」を書いて次回まで持ち越す

ズレが大きい軸（Claude診断・工藤判定の両方で「モックアップと名匠が真逆」となっている軸）があれば、モックアップを戻してデザイナーレンズの軸別引き出しに戻る。

STEP 3：光学補正・タイポ感情論・彩度エネルギー論のチェック（5分）

knowhow-catalog.md 2026-04 から抽出された3つの実証原則でロゴを検証する。各原則について Claude初期判定＋工藤最終判定 の2段構え。

（A）光学補正（Card #10） - 円形は「幾何的に正円」だと視覚的には小さく見える。10-15%の光学的な拡大が必要か確認 - 三角形の重心は「幾何的な重心」より下に感じる。上に 5-8% 補正しているか - 水平線は中央を「0.3-0.5px 上げる」と視覚的に水平に見える。確認したか - Claude初期判定：OK ／ 要補正（箇所を具体的に） - 工藤最終判定：○同意 ／ ✕異議：[理由]

（B）タイポ感情論（Card #61） - 書体が運ぶ感情は、ブランドが運びたい感情と一致しているか - サンセリフ＝近代・合理・企業／セリフ＝伝統・権威・古典／丸ゴシック＝親しみ・やわらかさ／ディスプレイ＝主張・個性 - 書体変更は「単体では効かないが継続で効く」非対称装置。今後5年使えるか - Claude初期判定：OK ／ 要再検討（なぜ） - 工藤最終判定：○同意 ／ ✕異議：[理由]

（C）彩度エネルギー論（Card #60） - 彩度は感情エネルギーの操作子。高彩度＝主張／中彩度＝調和／低彩度＝静粛 - ブランドの感情的ポジションと彩度水準は一致しているか - 最新の学術研究（Card #60原典）では、彩度変更は認知想起を有意に動かすことが示されている - Claude初期判定：OK ／ 要調整（どう） - 工藤最終判定：○同意 ／ ✕異議：[理由]

3.3 診断結果の扱い

判断は工藤さんの最終判定が常に優先。Claudeの初期診断は「第二意見」として残す（後で振り返ると、工藤さんの判断軸の独自性が浮かび上がる）。

  • 工藤判定で3軸以上ズレ：モックアップを「不採用」とし、kudo-designer-lens-library §4「軸別引き出し」に戻る
  • 工藤判定で1〜2軸ズレ：モックアップを「改善要」とし、該当箇所を修正してSTEP 1〜3を再実施
  • 工藤判定でズレ0軸：採用候補として kudo-proposal-deck へ送る
  • Claudeと工藤の判定が大きく食い違った場合：食い違いそのものを WorkFlowy に記録（「🎨 #claude-gap」タグ）。蓄積が10件を超えたら、工藤さんの美意識の固有パターンをスキルとして抽象化する（§3.5参照）

3.4 AIエージェントの運用ルール（v0.3.1）

工藤さんが本スキルを起動した際、Claudeは以下を必ず実行する：

  1. モックアップHTML生成後に、自動で「審美キャリブレーション並置HTML」を追加生成する（STEP 1のテンプレート）
  2. kudo-designer-lens-library のペアレンズが未定義の場合、先に呼び出す
  3. STEP 2/3の「Claude初期診断」欄を必ず記入してから工藤さんに渡す。空欄で渡さない。記入の際は作品URL（WORKS.md）を引用して根拠を示し、断言を避けて留保をつける
  4. 「工藤の最終判定」欄は空欄のまま渡し、工藤さん自身に書かせる。Claudeはこの欄を代筆しない
  5. 診断結果を WorkFlowy の該当案件ノードに「🎨 #art-recalibration-result」タグで記録。Claude判定と工藤判定が食い違った場合は「🎨 #claude-gap」タグも追加
  6. 10件蓄積後に自動提案：#claude-gap タグが10件を超えたら、「工藤さんのClaudeとのズレパターンをスキル化しますか？」と提案（§3.5参照）

3.5 #claude-gap蓄積後の抽象化ループ（v0.3.1新規）

ClaudeとのズレはClaudeの欠陥ではなく、工藤さんの固有のデザイン判断軸の発露である。10件以上蓄積したら、以下の手順で工藤さんの美意識の独自パターンをスキル化する：

  1. Claude（または kudo-skill-extraction）が10件のズレを読み、パターンを抽出（例：「工藤さんは色温度判定でClaudeより常に暖色寄りに評価する」等）
  2. 抽出したパターンを「kudo-aesthetic-signature（仮称）」として新規スキル化の候補に
  3. 以後、Claudeの初期診断は工藤さんの固有パターンを考慮した形に調整される

4. 動詞群4 5孫スキル別・検証パターン（v0.3.2新規）

動詞群4の5孫スキルそれぞれで、本スキルに要求される検証パターンが異なる。孫スキル起動時のFIX段階で、以下の対応表に従って検証を実行する。

4.1 kudo-logo-craft-protocol（ロゴ／VI）との接続

推奨シーン：名刺（3D） / ショッピングバッグ（3D） / フラッグシップストア（3D） / アプリアイコン（CSS） - C5縮小耐性（16px Favicon／名刺／ポスター10m）検証：アプリアイコンCSSで16pxプレビュー、名刺3Dでサイズ感確認、OOH CSSで10m距離感確認 - C2既存資産評価：旧ロゴと新ロゴの並置HTMLを生成、視覚的な断絶度を目視 - 必須シーン数：最低3シーン（アプリ／名刺／バッグ）、リブランディング時は5シーン全て

4.2 kudo-ad-kv-composition（広告KV／サイトTV）との接続

推奨シーン：OOH（CSS） / サイトTVブラウザモック（CSSカスタム） / 新聞紙面（CSSカスタム） / デジタルバナー（CSSカスタム） - C4切り抜き耐性検証：KVを正方形／9:16縦型／16:9横型で各1枚切り抜き、単独で意味が立つか目視 - C6媒体別数値チェック：OOH 1/20文字サイズ、サイトTV 80vh Hero、新聞の紙面白黒耐性 - C5別文脈シミュレーション：HTMLに「性別／人種／年齢」別のコメント欄を生成、第三者視点で記入 - 必須シーン数：最低2シーン（主媒体＋切り抜きテスト）、キャンペーン展開時は5シーン

4.3 kudo-motion-kv-composition（映像・動画）との接続

推奨シーン：TVCMキーフレーム（静止画切り出し） / サムネイル（YouTube/Instagram/TikTok 3形式） / モーションロゴ第1フレーム・最終フレーム対比 / 音なし字幕対応 - C2キャッチフレーム検証：動画の情動ピーク（秒数指定）を切り出し、静止画で単独機能するか - C5残像設計：動画終了後3秒の残像を言語化、モックアップでその残像要素のみ抽出展示 - C7マルチ環境耐性：TV大画面／スマホ縦型／OOHデジタル（音なし）の3環境でそれぞれモック化 - 必須シーン数：最低3シーン（キーフレーム＋縦横サムネ＋音なし字幕版）

4.4 kudo-package-design-protocol（パッケージ）との接続

推奨シーン：ショッピングバッグ（既存3D） / スニーカーボックス（既存3D） / 商品棚陳列（CSSカスタム：競合並置） / 開封体験（CSSカスタム：段階展開） - C1棚耐性検証：競合商品との並置HTMLで、3m離れた視点での識別性をシミュレート - C2シリーズ展開：同一パッケージの色替え3〜5点を並べ、シリーズとしての一貫性を目視 - C6開封体験：箱→内封→商品の3段階を順番に並置、開封の演出が意図通りか - 必須シーン数：最低3シーン（単品＋棚陳列＋シリーズ並置）、開封演出が核なら4シーン

4.5 kudo-spatial-experience-design（空間・体験）との接続

推奨シーン：フラッグシップストアファサード（既存3D） / 店内VMD動線（CSSカスタム：1F/2F平面図） / サイネージデジタル（CSSカスタム：時間帯変化） / ポップアップ屋外（CSSカスタム） - C1主目的4択（認知／販売／体験／コミュニティ）との整合性：モックアップが選定した目的と整合しているか - C3 SNS拡散性：写真映えする瞬間（フォトジェニックポイント）が空間内にあるか、モック画面内で特定 - C4再訪動機：2回目以降の訪問で何が変わるか（季節展開・商品入替・イベント連動） - 必須シーン数：最低3シーン（ファサード＋店内平面図＋フォトジェニックポイント）、大型展開時は7シーン

4.6 横断運用：FIX段階でのチェックリスト

孫スキル起動時、本スキルのFIX段階で以下を必ず通す：

  1. 該当孫スキルの「必須シーン数」を満たしているか
  2. §3 審美キャリブレーション（Claude診断＋工藤判定）を通したか
  3. §3.2 STEP 3 の3原則（光学補正／タイポ感情論／彩度エネルギー論）チェックを通したか
  4. kudo-designer-lens-library で選定したペアレンズの代表作との並置を実施したか
  5. 結果を kudo-proposal-deck に引き渡す形式（PNG出力）に変換したか

5. クライアント別 .potx 表紙クロスチェック（v0.4新設）

5.1 なぜ必要か（PPTX × 紙物 × 空間 の3点トライアングル）

kudo-client-template-factory が生成する .potx は、PowerPoint上では正しく表示される。しかし「そのテーマで組まれたデッキの表紙が、紙物（バッグ）／空間（店舗）と並べて違和感がないか」は別問題。

ブランドの世界観は単一メディアでは検証しきれない。PPTX上でのCrimsonと、ショッピングバッグに印刷されたCrimsonと、フラッグシップストアファサードのサイネージで光るCrimsonは、同じ #BC002D でも体感印象が大きく異なる。

v0.4 では、.potx 表紙スライド × 既存3Dモック × 既存OOHモック の3点並置で「ブランド一貫性」を体感ベースで検証する運用を新設する。

5.2 3点トライアングル検証プロトコル

Step 1：.potx 表紙スライドを画像化

  • kudo-client-template-factory で生成された .pptx の Slide 1（表紙）を PDF経由で PNG化
  • LibreOffice headless 利用：soffice --headless --convert-to pdf {file}.pptx && pdftoppm -jpeg -r 150 {file}.pdf cover
  • 推奨解像度：1920×1080 px（PPTX標準16:9）

Step 2：3点並置HTML生成

以下のテンプレートで3点並置HTMLを生成し、ブラウザで体感比較：

<!DOCTYPE html>
<html><head><style>
  body { margin:0; background:#161616; color:#FFFFFF; font-family:'Noto Sans JP',sans-serif; }
  .triangle { display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; padding:32px; }
  .col { background:#1F1F1F; border-radius:12px; padding:20px; }
  .col h3 { color:#C9C5BD; margin:0 0 12px; font-weight:400; font-size:11px; letter-spacing:0.05em; text-transform:uppercase; }
  .col img { width:100%; border-radius:8px; aspect-ratio:16/9; object-fit:cover; }
  .diag { background:#1F1F1F; padding:24px; margin:24px 32px; border-left:3px solid #BC002D; }
  .diag h4 { color:#BC002D; margin:0 0 12px; font-weight:600; font-size:14px; }
  .diag table { width:100%; border-collapse:collapse; }
  .diag th, .diag td { text-align:left; padding:8px 12px; border-bottom:1px solid #2C2B28; font-size:13px; }
  .diag th { color:#7E7B76; font-weight:400; }
</style></head><body>
  <div class="triangle">
    <div class="col"><h3>① PPTX 表紙（.potx 出力）</h3><img src="cover-pptx.png"></div>
    <div class="col"><h3>② 紙物：ショッピングバッグ（3D PBR）</h3><img src="mockup-bag.png"></div>
    <div class="col"><h3>③ 空間：フラッグシップストアファサード（3D PBR）</h3><img src="mockup-store.png"></div>
  </div>
  <div class="diag">
    <h4>3点トライアングル診断</h4>
    <table>
      <tr><th>軸</th><th>① PPTX</th><th>② バッグ</th><th>③ 空間</th><th>整合判定</th></tr>
      <tr><td>シグネチャー色の体感濃度</td><td></td><td></td><td></td><td></td></tr>
      <tr><td>余白の余裕感</td><td></td><td></td><td></td><td></td></tr>
      <tr><td>タイポの威厳／親しみ</td><td></td><td></td><td></td><td></td></tr>
      <tr><td>視覚重量バランス</td><td></td><td></td><td></td><td></td></tr>
    </table>
  </div>
</body></html>

Step 3：4軸での整合判定

軸 問い
シグネチャー色の体感濃度 PPTX上で見るCrimsonと、紙に印刷されたCrimsonと、サイネージで光るCrimsonの「強さ」は揃って見えるか？
余白の余裕感 PPTXの余白率と、バッグのロゴ余白と、空間サインの周辺余白の「呼吸の深さ」は揃っているか？
タイポの威厳／親しみ 凸版文久見出し明朝が、PPTX／印刷／サイネージの3メディアで同じ「人格」を運んでいるか？
視覚重量バランス 3点を並べて、どれかが「軽すぎる／重すぎる」と感じないか？

各軸について「○整合／△若干ズレ／✕大ズレ」で判定。△以上が2軸以上なら .potx 設計に戻る（kudo-client-template-factory の PRE 段階に戻り、シグネチャー色の彩度や Pattern B のサイズ比率を見直す）。

5.3 トリガー条件

以下のいずれかで本節を起動： - kudo-client-template-factory で .potx 生成完了直後（自動） - ブランド世界観の最終確認段階で工藤さんから「PPTXとバッグと店舗、並べて見たい」と依頼があったとき - リブランディング案件で「現行ブランドのPPTX × 新案バッグ × 新案空間」を比較したいとき

5.4 §3 審美キャリブレーションとの違い

観点 §3 審美キャリブレーション §5 .potx 表紙クロスチェック
比較対象 モックアップ vs 名匠作品 PPTX vs 紙物 vs 空間（自己一貫性）
目的 美意識のズレ診断（Claude vs 工藤） ブランド世界観の3メディア整合
タイミング モックアップ生成直後 .potx 生成直後／提案前最終確認
判定者 Claude＋工藤 デュアルレーン 工藤単独（体感判定）

両者は補完関係。§3 は「美しいか」、§5 は「揃っているか」を検証する。

5.5 連携：kudo-client-template-factory への戻し

§5 で「△以上が2軸」となった場合の戻し先：

ズレ軸 kudo-client-template-factory での修正点
シグネチャー色の体感濃度 PALETTE 辞書の accent1 を彩度調整（例：#BC002D → #A0001F）／予備色（Wine Burgundy）への切替検討
余白の余裕感 build_kudo_template.py のサンプル6枚レイアウトで余白比率を見直し
タイポの威厳／親しみ majorFont を Pattern B → 別書体（游明朝・筑紫オールド明朝等）に切替検討
視覚重量バランス accent2（Prussian）の使用比率調整／Layer 1 ニュートラル比率の再計算

戻し→再生成→再 §5 検証 のループを最大3回まで。3回でも整合しない場合は kudo-brand-architecture に戻ってパレット設計から見直す。

付録：技術仕様詳細（v0.1から変更なし）

Three.js PBRレンダリング設定

Three.js r128を使用。以下が全シーン共通の設定値：

レンダラー 

renderer = new THREE.WebGLRenderer({canvas, antialias:true, alpha:false});
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.15;
renderer.outputEncoding = THREE.sRGBEncoding;

キャンバスサイズ：レンダリング 640×840px、表示 320×420px（Retina対応の2倍レンダリング） シャドウマップ：メイン2048×2048、補助1024×1024、bias -0.0005 ライティング：Key Light(0xfff5e6, 1.0-1.3) + Fill(0xe0e8ff, 0.3-0.45) + Rim(0xfff0dd, 0.25-0.35) + Ambient(0.3-0.5)。店舗のみSpot×3＋Hemisphere＋Point。

CanvasTextureロゴ描画

選択されたロゴバリアントの全プロパティを受け取り、2D Canvasに描画してThree.jsのCanvasTextureとして使用。ロゴバリアントが持つプロパティ：v.ff / v.fw / v.fz / v.ls / v.tx / v.ln / v.lt / v.st / v.bg / v.t / v.cn

drawLogoOnCanvas(ctx, v, cx, cy, scale, forDarkBg) 関数はラインタイプ（lt）と構造タイプ（st）の全組み合わせを処理する。

プロシージャルテクスチャ

関数名 用途
mk3NoiseTex(w,h,bR,bG,bB,amt) 紙・汎用ノイズ
mk3ConcreteTex(w,h) コンクリート面

統合パターン

  1. CDN読込（メインスクリプト前に配置）
  2. HTMLプレースホルダ生成（<canvas> 要素）
  3. requestAnimationFrameでDOMへの反映を待ってからシーンビルド

ホバーインタラクション

Three.jsシーンには全てホバー回転アニメーション実装。回転対象：バッグ＝bag+fold+handles、名刺＝card、ボックス＝box+lidPivot、店舗＝なし。

案件ごとのカスタマイズ指針

  • 飲料 → ボトルラベル（Cylinder）
  • アパレル → ハンガータグ（Plane）
  • 不動産 → サインボード（Box）
  • テック → ウェブサイトヘッダー（CSS）

CSS vs Three.js 判断基準

判断基準 CSS Three.js
立体感・質感が重要 ✕ ◎
光の回り込み・反射が必要 ✕ ◎
テクスチャが必要 △ ◎
平面的なUI/グラフィック ◎ △
大量のテキスト情報 ◎ △
レンダリング速度 速い やや遅い

原則：物理的なプロダクト → Three.js、デジタルスクリーン → CSS

注意事項

  • Three.js r128を使用。r142以降の CapsuleGeometry は不可
  • Object.assign(mesh, {position: ...}) パターン可
  • シャドウは castShadow と receiveShadow 両方必須
  • CanvasTextureは encoding = THREE.sRGBEncoding 必須
  • 複数マテリアルは geometry.groups の materialIndex で制御

改訂履歴

  • v0.5（2026-04-25）：上流スキルに kudo-gemini-image-bridge を追加。親 kudo-design-generation-loop v1.3 との整合化により、Nano Banana Pro（Gemini 3 Pro Image）で生成したKV・パッケージイメージ・空間イメージを本スキルのThree.js PBRシーンにテクスチャとして供給する連携を確立。バッグに広告KVを載せる／店舗壁面に空間イメージを投影する／ショッパーにパッケージラベルを印刷する等、写実的生成物を3Dモックアップへシームレスに流し込める。description末尾にv0.5改訂サマリを追記。
  • v0.4（2026-04-24）：§5「クライアント別 .potx 表紙クロスチェック」を新設。kudo-client-template-factory との連携を明文化し、PPTX × 紙物 × 空間 の3点トライアングル検証プロトコル（4軸判定＋ズレ時の戻し先マッピング）を整備。connections-mapに kudo-client-template-factory を追加。description にクロスチェック関連トリガーを追加。
  • v0.3.2（2026-04-21）：動詞群4の5孫スキル体制確立に合わせて§4「5孫スキル別・検証パターン」を新設。logo-craft（C5縮小耐性）／ad-kv（C4切り抜き耐性／C5別文脈）／motion-kv（キーフレーム静止画化／サムネ3形式／音なし字幕）／package（棚陳列競合並置／開封体験3段階）／spatial（ファサード／動線／フォトジェニック／ポップアップ）の各必須シーン数と検証観点を規定。§4.6に横断FIXチェックリストを追加。description本文に5孫スキル対応を明記。
  • v0.3.1（2026-04-20）：§3.2–§3.4 を「Claude初期診断＋工藤最終判定」のデュアルレーン方式に改修。診断表を5列化（軸／問い／Claude初期診断／工藤の最終判定／合意or異議）、Claude初期診断の記入ルール（URL引用必須・留保付き・断言回避）と工藤判定の記入ルール（○同意／✕異議＋理由／保留）を明文化。§3.5 を新設し、#claude-gap が10件以上蓄積した段階で kudo-aesthetic-signature スキルへの抽象化を自動提案する工程を定義。判断は常に工藤優先、Claude診断は第二意見として残す設計。
  • v0.3（2026-04-20）：§3 審美キャリブレーション層を新設。名匠作品との並置HTML生成、5軸のズレ診断、光学補正/タイポ感情論/彩度エネルギー論の3原則チェックを必須化。knowhow-catalog.md 2026-04 Card #10/#60/#61 と連携。
  • v0.2（2026-04）：DESIGN.mdとの統合節を新設。DESIGN.md §1 Mood Board References への画像同梱運用を定義。
  • v0.1（初版）：7シーンテンプレート（CSS4＋Three.js3）、PBRレンダリング、CanvasTextureロゴ描画、プロシージャルテクスチャ運用を定義。