雰囲気は見て選ぶ。
動きは話しかけて足す。
勉強会㊳ ちせさんとyuuさんのツールを使ったサイト作成 — 先行配布した4つの道具で、今夜いっしょに1サイト作ります。
準備：受け取りページ https://kakuchou-pack-guide.pages.dev のとおりに「動きの強化室」を入れておく（5分）。まだの人は第0章の1行を貼るだけで大丈夫です。
今夜の3点。ここだけでも持って帰る
雰囲気は、言葉で説明しない。図鑑を「見て選ぶ」
yuuさんの雰囲気図鑑は見本117本。選ぶと、配色・書体・構成・「避けること」まで入った制作プロンプトが出ます。
動きは「話しかけて足す」か「プロンプトをコピー」
ちせさんの動きの強化室とモーションパレット。追加した動きは外せば元通りなので、公開済みのサイトにも足せます。
順番は 雰囲気 → 建てる → 動き
おまかせサイト工房があってもなくても、同じ順番です。今夜はこの順で、実際に1本作ります。
今夜の進め方と、導入の確認
5分実演: 導入の確認（園長の画面で「強化して」と話しかける）
今夜は実演がメインです。「見るだけ」でもまったく問題ありません。手を動かせる方は、同じ手順で一緒に進めてください。告知でも書いたとおり「リアタイできる方は、この時間に一緒にサイトを作りましょう」の回です。
導入できているかの確認
お使いのAI（Claude Code / Codex / Cursor）に「このサイトのアニメーションを強化して」と話しかけて、反応が返ってくればOKです。返ってこない場合は、下の1行を貼ってください。
https://koubou-dl.pages.dev/plugin/setup.md を読んで、書いてあるとおりにセットアップして
Claude Code / Codex / Cursor どれでも同じ1行です。新しいチャットを開いてそのまま貼ってください。所要2〜3分・1回だけ。お使いのAIの種類を判定して、バージョン確認・更新まで全部AIがやります。モーション図鑑MCPの設定も自動（設定ファイルを手で書く必要はありません）。更新のときも同じ1行です。うまくいかないときは、エラー画面をそのままAIに見せてください。
Codexで「このフォルダを信頼しますか」と出て止まったら：「はい、信頼します（Yes, trust this folder）」を選んでください。新しいフォルダで最初に一度だけ出る正常な確認です。選べばそのまま1行の指示が進みます。
図: 今夜の90分タイムライン。オレンジの3つが実演パート、最後の10分がQ&Aです。
なぜ道具が要るのか — 「建つ」と「売れるレベル」の距離
5分実演: 「おまかせでサイトを作って」だけで建てた場合の手触りを見せる
「おまかせでサイトを作って」と話しかければ、サイトが建つ時代になりました。でも「建つ」と「売れるレベルで仕上がる」のあいだには、まだ距離があります。理由は2つです。
雰囲気を言葉にできない
「上品で、清潔感があって…」までは頭にあるのに、プロンプトに書けない。だから出てくるものが毎回違う。
動きをつけられない
「ふわっと」「ぬるっと」がAIに伝わらない。結果、静止画みたいなサイトで止まってしまう。
案件だと、この「おしゃれに」の解釈違いが、そのままやり直しの回数になります。だから道具が要ります。今回の道具を作ったのは、LP案件で受注しているyuuさんと、現役エンジニアのちせさん。2人が自分の現場で使うために作ったものです。
雰囲気図鑑を作った人
ウラチカのメンバー。実績報告チャンネルへの投稿は12件で、コミュニティ内でいちばん多い方です。2026年3月の入会から、7月17日の時点で「AIを活用した事業サポートや制作案件の受注が合計100万円を超えました」と本人が報告しています。
動きの道具を作った人
本業はフリーランスのエンジニア（Web制作・EC構築（Shopify）・アプリ開発）。以前はAI研修の会社で教材づくりをされていました。
コミュニティの中では、メンバーの分析ツールのコードレビューと自動テストを仕事として引き受けていて、依頼したメンバーは「仕事が爆速なうえ、本当に丁寧」と書いていました。
この資料で言う「売れるレベル」とは：yuuさんが実際にLP案件として受注し、納品しているレベルのことです。正直に書いておくと — 「あなたのサイトで商品が売れるかどうかは、商品と集客で決まります。このセットが引き受けるのは『サイトの側で負けない』ところまでです」
図: 「建つ」と「売れるレベル」のあいだにある2つの壁と、それぞれを越える道具。
中身の地図 — 4つの道具と、順番
5分実演: 4つの道具を実際に開いて、どれがブラウザだけで使えるかを見せる
LP雰囲気図鑑
1枚で完結する売りページ向けの見本 89本。インストール不要、ブラウザで開くだけ。
サイト雰囲気図鑑
複数ページのホームページ向けの見本 28本。インストール不要。LP版と合わせて117本。
モーションパレット
その場で動くデモ 46本と、奥に動きのサンプル 413。インストール不要、ブラウザで開くだけ。
動きの強化室
統合プラグイン omakase-motion＝スキル5本＋モーション図鑑MCP。セットアップが要るのは、これだけです。
土台（任意）：おまかせサイト工房（園長）。持っていれば「建てる」工程がつながりますが、無くても4つの道具はそれぞれ単体で完結します。
順番は決まっています
雰囲気（図鑑）→ 建てる → 動き（強化室）。動きは最後が基本です。同時に頼んでも、内部では先に建ててから動きが付きます。お手本にしたいサイトがある場合だけ、先に「このサイトのアニメーションを分析して」で実測してから作り始めると精度が上がります。
図: 入口→土台→仕上げの3段。工房があってもなくても、通る3段は同じで、変わるのは真ん中の「土台」だけです。
見て選ぶ → 制作プロンプトを書き出す
または Codex・Claude Code
話しかける または プロンプトを貼る
雰囲気を「見て選ぶ」— yuuさんの雰囲気図鑑
15分実演: 図鑑で1本選んで、制作プロンプトを書き出す（園長の画面）
まず、LP版とサイト版どちらを開くか
1枚で完結する売りページ（ランディングページ）ならLP版、複数ページのある店舗・会社のホームページならサイト版です。図鑑のページ上部のリンクで行き来できるので、迷ったら両方見て構いません。
- LP雰囲気図鑑（89本）https://tone-composer.pages.dev/
- サイト雰囲気図鑑（28本）https://tone-composer.pages.dev/site.html
使い方は4ステップ
図鑑を開いて、近い実例を選ぶ
作りたい雰囲気に近い実例を選びます。業種で絞れますし、「ことばで探す」入口もあります。
「採用方針」が出る
配色3色（HEX指定）・見出しと本文の書体・想定セクション構成・コピーの方向性・「避けること」が出ます。
「AIに渡す制作プロンプトを書き出す」を押す
採用方針が、そのままAIに渡せる文章になって出てきます。
自分の商品情報を書き足して、AIに貼る
CodexやClaude Codeに貼るだけ。分からない項目は空欄でOK — 足りない情報はAIの側から質問してきます。
なぜブレないのか：方向を決める工程が、プロンプトを書く前に終わっているからです。AIが迷う余地が減るので、出てくるものがブレません。
図: 図鑑 → 採用方針（5項目）→ 制作プロンプト → AI。方向を決める工程が先に終わるので、AIが迷いません。
② 見出しと本文の書体
③ 想定セクション構成
④ コピーの方向性
⑤ 避けること
yuuさん自身は、現場でこう使っている
打ち合わせでクライアントに図鑑から2本選んでもらい、そのブリーフで建てる。「雰囲気が違う」「構成が違う」というすり合わせを先に終わらせるので、そのあとの文章や細部のやり取りが早く終わる — という使い方です（9月6日のウラチカ配信「路地裏① LP図鑑解説」より）。
「以前は ヒアリング→リサーチ→構成→提案 を毎回ゼロから長時間かけていましたが、今は短時間で精度の高い初期提案が作れるようになりました」
「作ってきたLP図鑑がかなり役立ちました」
— yuuさん（8月の実績報告より）
建てる — 工房あり／なし、どちらでも
10分実演: 書き出したプロンプトを貼って建てる（建っている間に第5章の説明へ）
おまかせサイト工房を持っている人
①選ぶ／図鑑で実例を選び「AIに渡す制作プロンプトを書き出す」→ 自分の商品情報を書き足す。
②建てる／いつも通り工房に「おまかせでサイトを作って」と話しかけ、書き出したブリーフを一緒に貼る（「この方針で作って」）。
③動かす／建った後に「このサイトのアニメーションを強化して」。過去に工房で建てたサイトも、③だけ実行すれば対象になります。
工房は持っていない人
①選ぶ／同じく図鑑で選んでプロンプトを書き出す。
②建てる／Codex や Claude Code にそのまま貼る。足りない情報（店名・商品・ゴール等）はAIの側から質問してきます。
③動かす／「このサイトのアニメーションを強化して」、またはパレットで気に入ったデモの「プロンプトをコピー」を貼る。
次の制作プロンプトのとおりにサイトを作ってください。 足りない情報があれば、作り始める前に質問してください。 <図鑑の「AIに渡す制作プロンプトを書き出す」で出た文章を、ここにそのまま貼る> 店・商品の情報: - 店名 / 商品名: <店名や商品名> - 何をしている: <1〜2行で> - このサイトのゴール: <予約・問い合わせ・購入 など、1つ>
山括弧 < > の部分を、自分の情報に置き換えてから貼ってください。工房を持っている方は、「おまかせでサイトを作って。この方針で作って：」と書いたあとに、同じものを貼れば大丈夫です。
図: ルートAとルートBの分岐。入口と仕上げは同じで、違うのは真ん中の「どこに貼るか」だけです。
動きを足す — ちせさんの道具
20分実演: 建ったサイトに「アニメーションを強化して」→ 松竹梅から選ぶ → 動く
頼み方は3通り
自分で動きを決めたい人
モーションパレットで動くデモを見て「プロンプトをコピー」→ AIに貼る。これだけならインストールも要りません。
AIに任せたい人
「このサイトのアニメーションを強化して」と話しかける → AIが業種に合う動きを松竹梅で提案してくれます。
参考にしたいサイトがある人
「このサイトのアニメーションを分析して」＋URL → イージング・duration・staggerまで実測します。
図: 頼み方3通りの分岐。自分の状況（決めたい／任せたい／お手本がある）で入口が決まります。
モーションパレットの歩き方
- モーションパレットhttps://motion-palette.pages.dev/
トップに、動くデモ46本
GIFではなく、その場で動く実物が並んでいます。雰囲気8種×強度3段階で絞り込めます（例:「静謐・和」「テック・未来」×「ひかえめ／標準／大胆」）。
各デモに「プロンプトをコピー」
配色・イージング・タイミングまで数値で入っているので、AIに貼るだけで再現が利きます。
奥に、動きのサンプル413
1つずつ試して、複数選んでまとめてコピーできます。
プロンプトビルダーつき
サイト構成から指示書を組み立てられます。ギャラリーの29本は、この46本の動きを全部どこかで使っています。
園長の主観です：「私はWebのアニメーションがここまでの本数と粒度で、数値つきで整理されているものを、他に知りません」
動きの強化室の中身（スキル5本）
| スキル | やってくれること | 普段の言葉での頼み方 |
|---|---|---|
| trace-site | お手本サイトのURLを渡すと、イージング・duration・staggerまで実測して分析 | 「このサイトのアニメーションを分析して」＋URL |
| motion-sommelier | 業種・題材に合う演出を松竹梅で提案 | 「和菓子屋に合う動きを提案して」 |
| art-director | 漠然としたイメージを、実測1,123サイトに接地した設計図に翻訳 | 「高級感のある方向に整えて」 |
| motion-brief | 選ぶだけで実装指示書ができる | 「動きは未定なので指示書を作って」 |
| motion-enhance | 既存サイトに動きを後載せ（外せば元通りのルールつき） | 「このサイトのアニメーションを強化して」 |
スキル名を覚える必要はありません。普段の言葉で頼めば、AIが適切な入口を選びます。動きのサンプル413をAIが直接引ける「モーション図鑑MCPサーバー」も同梱されていて、セットアップのときに自動で設定されます。
このサイトのアニメーションを強化して
このサイトのアニメーションを分析して <お手本サイトのURL>
<モーションパレットで「プロンプトをコピー」した文章を、ここにそのまま貼る>
1つめ＝おまかせ（松竹梅で提案が返ります）／2つめ＝お手本分析（山括弧をお手本のURLに置き換え）／3つめ＝自分で選ぶ（山括弧をコピーした文章に置き換え）。
図: 提案は松竹梅の3段階。強度だけを選べばよく、数値は道具の側が持っています。
「外せば元通り」だから、公開済みのサイトにも足せる
公開済みサイトへの適用は、追加した動きを外せば元のサイトに戻る形で実装される決まりになっています。園長の環境で機械的に確認しました — 動きを後付けし、外してから元と比較したところ差分ゼロ（バイト単位で完全復元）。納品済み・運用中のサイトにも足せます。心配な方はコピーで試してから本番に入れてください。
図: 「外せば元通り」。足す→外す→元と比較して差分ゼロ。だから納品済みのサイトにも試せます。
お手本分析の線引き：持ち込むのは動きの手法とパラメータだけ（イージング・duration・staggerなど）。ブランド名・文章・画像・動画・フォント・配色システム・レイアウト・コードは複製しません。trace-site がその線引きを守って分析します。
実物29本で「型の効き方」を見る
10分実演: ギャラリーを開いて、同じ業種でも動きが違うのを見る
- 制作デモ・ギャラリー（29本）https://urachika-collab-demos.pages.dev
この道具だけで作った制作デモが29本あります。業種は — 占い／記念日レストラン／個展／パティスリー／保育園／ハンドメイド／マルシェ／士業／割烹／ガジェットEC／ヨガ／ラーメン／工芸／ウェディング／不動産／キッチンカー／進学塾／ベビーEC／AIコンサル／ドリンク／採用／宿／歯科／花屋／珈琲／アウトドアギアEC／サウナ／パーソナルジム／ピアノ教室。全部ちがう業種で、全部ちがう動きです。「どの道具を使ったか」で絞り込めます（図鑑＋強化室／図鑑＋工房＋強化室／図鑑＋工房／工房＋強化室の4分類）。
対照実験の4本（GPT-6 Astra が建てたもの）
Codexの最新モデル GPT-6 Astra（2026年9月時点）に、道具の組み合わせを変えて建ててもらった4本です。4本とも独立検証を通過しています（2026-09-07デプロイ）。
| 組み合わせ | サイト | URL |
|---|---|---|
| 図鑑＋動き（工房なし） | アウトドアギアEC「TRAIL & CO.」 | https://gear-trail-ec.pages.dev |
| 図鑑だけ（動きなし） | 「ひびきピアノ教室」 | https://piano-hibiki.pages.dev |
| 工房＋動き（図鑑なし） | 「サウナと銭湯 湯気の森」 | https://sauna-yugenomori.pages.dev |
| 図鑑＋工房＋動き | 「KIZASHI PERSONAL GYM」 | https://gym-kizashi.pages.dev |
図: 図鑑あり／なし × 工房あり／なしで見た、GPT-6 Astra が建てた4本の位置。右上の2本は同じ条件（図鑑あり・工房なし）で、動きの有無だけが違う対照です。ギャラリー側の絞り込みは 図鑑＋強化室／図鑑＋工房＋強化室／図鑑＋工房／工房＋強化室 の4分類。
あり
なし
「賢いモデルほど、方向を決める材料（図鑑）と、動きの数値（パレット）があれば、迷わず一発で仕上げてくる。モデルが良くなるほど道具の効きは大きくなる」
— 園長
つまずきポイント（FAQ）
5分実演: よく止まる場所（Codexの信頼確認）を画面で再現して見せる
順番は決まってる？
雰囲気（図鑑）→ 建てる → 動き（強化室）。動きは最後が基本です。同時に頼んでも、内部では先に建ててから動きが付きます。お手本サイトがある場合は、先に 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）」を選んで続行してください。途中で「ツールの実行を許可しますか」（モーション図鑑MCPの初回呼び出し）が出たら、許可してください。
必要な環境と費用は？
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種以内」という設計ルールが入っています。提案は松竹梅から選べるので、控えめにしたい場合は「梅」を選んでください。
セットアップの1行（再掲）
https://koubou-dl.pages.dev/plugin/setup.md を読んで、書いてあるとおりにセットアップして
Claude Code / Codex / Cursor どれでも同じ1行。新しいチャットを開いてそのまま貼ってください。所要2〜3分・1回だけ。更新も同じ1行です。
上級者向け（任意）: Claude Code の2コマンドで入れる
事前に claude --version が 2.1.224 以上であることを確認してください（古ければ claude update）。
claude plugin marketplace add https://koubou-dl.pages.dev/plugin/claude/.claude-plugin/marketplace.json claude plugin install omakase-motion@omakase
必要な環境と費用
| 要るもの | 費用 | 何に使うか |
|---|---|---|
| Codex CLI + ChatGPT Plus または Claude Code + Claude Pro | 約$20/月（約3,000円）のどちらか | プロンプトの実行・サイト生成 |
| ブラウザ | 無料 | 図鑑・パレットの閲覧とコピー |
| Node.js 18以上 | 無料 | 強化室のプラグイン本体・図鑑MCP |
| おまかせサイト工房 | 任意 | あれば「土台」としてつながる |
工房を持っている人へ／持っていない人へ
5分実演: 過去に建てたサイトのフォルダを開いて、そこに動きを足してみる
過去に建てたサイトが、全部「動きを足す対象」になる
作り直しは不要です。手元に完成サイトが多い人ほど効きます。
「イメージと違う」が減る
工房は雰囲気20種・業種パック・品質6ゲートで崩れないサイトを建てる道具。方向は図鑑で決め、品質は工房のゲートが担保する分業になります。
追加の環境投資はゼロ
工房が動いている環境ならそのまま。やることは1行のセットアップだけです。
工房を持っていない方へ：このセットは単体で完結します。先にセットだけ使って、土台の工房を後から揃える順番でも大丈夫です。
図: 工房を持っている人が、このセットを足すと変わること（前後）。追加の環境投資はゼロで、やることは1行のセットアップだけです。
販売について（1行だけ）：このセットは「プロの型でサイト作りセット」として近日Brainでリリース予定です（価格未定）。会員のみなさんは、先行配布の受け取りページをそのまま使えばOKです。なおツール類のURLは、正式リリースまで外部への拡散を控えてください（受け取りページの注記のとおりです）。
土台のおまかせサイト工房（園長）はBrainで販売中です → https://brain-market.com/u/nariti/a/bxUTM0UjMgoTZsNWa0JXY（通常¥29,800→¥14,800 買い切り・120部以上）
今夜〜今週で、1本作って投稿する
実演: 投稿する時のスクショの撮り方・URLの貼り方まで見せる
- 図鑑で1本選び、「AIに渡す制作プロンプトを書き出す」→ 自分の店・商品の情報を足す
- Codex／Claude Code（工房がある人は工房）に貼って建てる
- 「このサイトのアニメーションを強化して」→ 松竹梅から選ぶ
- 公開URL（またはスクショ）を、いつものチャンネルに投稿する（作者2人と園長が見ます）
図: 宿題の4ステップ。今夜の実演と同じ順番です。1本目は、自分の店でも架空のお店でも構いません。
今夜の答え合わせ
持ち帰るのは、この3点
- 雰囲気は「見て選ぶ」（図鑑117本）。言葉で説明しないから、ブレません。
- 動きは「話しかけて足す」か「コピーして貼る」（強化室・パレット）。外せば元通りだから、公開済みのサイトにも使えます。
- 順番は雰囲気 → 建てる → 動き。工房があってもなくても同じ。今夜作った1本の作り方を、そのまま自分の案件で使ってください。