受け取りガイド

雰囲気は見て選ぶ。
動きは話しかけて足す。

このセットは 図鑑2冊＋ショールーム＋スキル5本＋MCP でできています。
インストールが要るのは1つだけ（2コマンド）。あとはブラウザで開くだけです。
このページの通りに進めれば、5分で全部使えます。

1入っているもの

まずは中身の確認から。インストールが必要なのは3つ目だけです。

📖

雰囲気図鑑yuuさん作・インストール不要

作りたい雰囲気を実例から目で選ぶと、配色・書体・構成・コピーの方向性・「避けること」まで入った制作プロンプトが書き出されます。用途で2冊に分かれています。

LP版を開く（見本89本）→ サイト版を開く（28本）→
🎞️

モーションパレットちせさん作・インストール不要

動くデモ46本と、技の図鑑413技のショールーム。気に入ったものの「プロンプトをコピー」を押してAIに貼るだけでも使えます。サイト構成から指示書を組み立てるプロンプトビルダーつき。

パレットを開く →
✨

動きの強化室ちせさん作・これだけセットアップ

AIに話しかけるだけで、お手本の分析から動きの実装までを任せられる統合プラグイン（omakase-motion）。スキル5本とモーション図鑑MCP（413技をAIが直接検索）が1回のセットアップで入ります。

trace-siteお手本サイトのURLを渡すと、イージング・duration・staggerまで実測して分析
motion-sommelier業種・題材に合う演出を松竹梅で提案
art-director漠然としたイメージを、実測1,123サイトに接地した設計図に翻訳
motion-brief選ぶだけで実装指示書ができる
motion-enhance既存サイトに動きを後載せ。外せば元通りのルールつき

スキル名を覚える必要はありません。「このサイトのアニメーションを強化して」のように普段の言葉で頼めば、AIが適切な入口を選びます。

2セットアップ（2〜3分・1回だけ）

「動きの強化室」だけインストールします。やることは、AIにこの1行を貼るだけです。

AIに、これを貼ってください

Claude Code / Codex / Cursor どれでも同じ1行でOK。新しいチャットを開いて、そのまま貼り付けてください。

https://koubou-dl.pages.dev/plugin/setup.md を読んで、書いてあるとおりにセットアップして

あとはAIが全部やります。お使いのAIの種類を自分で判定して、必要ならバージョンの確認と更新まで面倒を見てくれます。
モーション図鑑MCPの設定も自動なので、設定ファイルを手で書く必要はありません。

入ったかの確認は、AIに「このサイトのアニメーションを強化して」と話しかけて反応が返ってくればOKです。
更新も同じ1行。もう一度貼れば最新版に入れ替わります。
うまくいかなかったら、エラー画面をそのままAIに見せてください（対処法も手順書に書いてあるので、AIが読んで直します）。

ターミナルから自分で入れたい方へ（上級者向け・任意）

Claude Code をお使いなら、次の2コマンドでも入ります。事前に claude --version が 2.1.224以上である必要があります（古い場合は claude update）。上の1行ならこの確認もAIがやってくれるので、迷ったら上を使ってください。

claude plugin marketplace add https://koubou-dl.pages.dev/plugin/claude/.claude-plugin/marketplace.json claude plugin install omakase-motion@omakase

3使い方（あなたはどっち？）

おまかせサイト工房をお持ちかどうかで、少しだけ手順が変わります。

ルートA｜おまかせサイト工房を持っている

いちばん強い組み合わせです。方向は図鑑が決め、品質は工房のゲートが担保します。

  1. 選ぶ — 図鑑で実例を選ぶ →「AIに渡す制作プロンプトを書き出す」→ 自分の商品情報を書き足す
    売りページならLP版、店舗・会社のホームページならサイト版
  2. 建てる — いつも通り工房に「おまかせでサイトを作って」と話しかけ、書き出したブリーフを一緒に貼る（「この方針で作って」）
  3. 動かす — 建った後に「このサイトのアニメーションを強化して」。雰囲気ヒアリング→松竹梅の提案→実装→検収まで進みます
    お手本にしたいサイトがあるなら「このサイトのアニメーションを分析して」＋URL から始めるのも強いです

💡 過去に工房で建てたサイトも対象です。 手順3だけを既存サイトに実行すればOK。追加した動きは「外せば元通り」で入るので、公開中のサイトにも安全に足せます。

ルートB｜工房は持っていない

3つとも単体で完結します。工房が無くても大丈夫です。

  1. 選ぶ — 図鑑で実例を選んでプロンプトを書き出す
  2. 建てる — Codex や Claude Code にそのまま貼る。足りない情報（店名・商品・ゴール等）はAIの側から質問してきます
  3. 動かす — 建った後に「このサイトのアニメーションを強化して」（またはパレットで気に入ったデモの「プロンプトをコピー」を貼る）

4実物を見る

この道具だけで作った制作デモを29本、公開しています。「どの型を選ぶとどうなるか」がそのまま見られます。

デモサイト29本のギャラリーを見る →

占い／レストラン／個展／パティスリー／保育園／ハンドメイド／マルシェ／士業／割烹／ガジェットEC／ヨガ／ラーメン／工芸／ウェディング／不動産／キッチンカー／進学塾／ベビーEC／AIコンサル／ドリンク／採用／宿／歯科／花屋／珈琲／アウトドアギアEC／サウナ／パーソナルジム／ピアノ教室

よくある質問

つまずきやすいところを先に。

順番は決まってる？

雰囲気（図鑑）→ 建てる → 動き（強化室）。動きは最後が基本です。同時に頼んでも、内部では先に建ててから動きが付きます。お手本サイトがある場合は、先に trace-site（「このサイトのアニメーションを分析して」）で実測してから作り始めると精度が上がります。

公開済み・納品済みのサイトに使って大丈夫？

大丈夫です。追加した動きは「外せば元通り」のルールで実装されるので、運用中のサイトにも足せます。心配な方は、コピーで試してから本番に適用してください。

工房が無いと使えない？

それぞれ単体で完結します。工房があると「建てる」工程の品質まで自動で担保される、という関係です。

Claude Code と Codex、どっちでも使える？

Claude Code / Codex / Cursor の3つに対応しています。Claude Codeは2コマンド、CodexとCursorはAIに1行貼るだけです（この1行はClaude Codeにも使えます）。

Codexで「このフォルダを信頼しますか」と聞かれて止まった

正常です。Codexは新しいフォルダで作業を始めるとき、最初に一度だけ「信頼するか」を確認します。「はい、信頼します（Yes, trust this folder）」を選んで続行してください。そのあと1行の指示がそのまま進みます。途中で「ツールの実行を許可しますか」（モーション図鑑MCPの初回呼び出し）が出た場合も「許可」でOKです。それでも進まないときは、新しい空のフォルダを作ってそこでCodexを開き直し、同じ1行を貼ってください（2026-09-07・ウラチカ配布スレの報告をもとに追記）。

必要な環境と費用は？

Codex CLI + ChatGPT Plus、または Claude Code + Claude Pro のどちらか（約$20/月）。図鑑とパレットはブラウザだけで使えます。「動きの強化室」には Node.js 18以上が必要です（Claude Codeの場合は claude --version 2.1.224以上も）。Cursorにも入れられます。

図鑑のLP版とサイト版、どっちを使えばいい？

1枚で完結する売りページ（ランディングページ）ならLP版、複数ページのある店舗・会社のホームページならサイト版です。図鑑のページ上部のリンクで行き来できます。

お手本にしたいサイトがあるんだけど、真似していい？

お手本から持ち込むのは動きの手法とパラメータだけです（イージング・duration・staggerなど）。ブランド名・文章・画像・動画・フォント・配色システム・レイアウト・コードは複製しません。trace-site がその線引きを守って分析します。

trace-site が動かない

初回だけ、同梱の skills/trace-site/scripts/ で npm install と npx playwright install chromium が必要になる場合があります。AIに「trace-siteの初期セットアップをして」と頼めば進めてくれます。

動きを足しすぎて重くならない？

強化室には「同時に動くものは3つまで、イージングは2種以内」という設計ルールが入っています。提案は松竹梅から選べるので、控えめにしたい場合は「梅」を選んでください。