WEB MOTION SKILLCODEX / CLAUDE CODE
動きを、
言葉で実装する。
専門用語を知らなくても大丈夫です。見せたい場所と雰囲気を伝えるだけで、サイトの目的に合うモーションを提案し、実装まで進めます。
この見出しを、上品に印象づけたい。
伝えたいことが、静かに立ち上がる。
ZIPを解凍してCodexまたはClaude Codeに導入し、編集したいサイトのファイルを渡して使います。導入方法を見る
01 — CAPABILITIES
何ができるかを、
動きで確かめる。
項目を選ぶと、右のステージで動きを確認できます。配布スキルが扱う10種類のモーションの実装例です。素材やサイト構造に合わせて実装を調整します。
「もう一度見る」で動きを再生できます。
暮らしに、静かな余白を。
日常に馴染む、手仕事の道具。
コレクションを見る →- 01相談目的を聞く
- 02設計動きを決める
- 03公開端末で確認する
暮らしの輪郭を、
丁寧に設計する。
動画を読み込めませんでした。動画ファイルを開く
3つの部品が、ひとつの製品へ。
見出しを読む順番へ視線を導く
「この見出しを、一行ずつ上品に出して」
02 — REQUEST STYLES
完成形がわからなくても、 始められます。
伝えられる範囲に合わせて、5つの進め方を使い分けます。
03 — PROMPT BUILDER
選ぶだけで、指示文になる。
専門用語の代わりに、場所・印象・目的を選んでください。そのまま使える文章を生成します。
このサイトのファーストビューの見出しに、控えめで上品な印象のモーションをつけてください。内容が読みやすく伝わることを優先し、PCとスマホの両方で自然に見えるようにしてください。
INSTALLATION
ダウンロードして、
AIにスキルを渡す。
CodexまたはClaude Codeが利用できる環境と、編集するWebサイトのファイルをご用意ください。
ZIPを解凍する
web-motion.zipをダウンロードして解凍します。中にある
web-motionフォルダを、SKILL.mdやreferencesごと配置してください。使用するAIのスキルフォルダへ配置する
Codex
ユーザーフォルダ内の
.agents/skills/web-motion/へ配置します。Windows：
C:\Users\ユーザー名\.agents\skills\web-motion\SKILL.md呼び出し例：
$web-motionClaude Code
ユーザーフォルダ内の
.claude/skills/web-motion/へ配置します。Windows：
C:\Users\ユーザー名\.claude\skills\web-motion\SKILL.md呼び出し例：
/web-motionフォルダがなければ作成してください。スキルが表示されない場合はCodexを再起動、またはClaude Codeで新しいセッションを開始して確認します。
既存サイトを開き、依頼する
対象サイトの作業フォルダをCodexまたはClaude Codeで開き、スキル名・変更する箇所・希望する動きを伝えます。
web-motionを使って、このサイトの見出しを一行ずつ表示してください。文章と配色は変えず、スマホと動きの軽減設定にも対応してください。見本に近い動きを希望するときは、このページのURLと項目名、対象箇所を伝えてください。商品画像や動画を使う演出には、ご自身の素材も必要です。
ZIPにはAIが参照する指示と設計・実装ガイドが入っています。デモページの完成コードや商品素材は含まれません。AIが対象サイトに合わせてコードを実装するため、見た目や動きは依頼内容・素材・技術環境に応じて調整されます。
導入先の公式資料：Codex · Claude Code
04 — IMPLEMENTATION POLICY
動きより先に、伝わり方を考える。
目的から選ぶ
装飾ではなく、視線・理解・操作を助ける動きを設計します。
既存を尊重する
文章やブランドを勝手に変えず、必要な範囲だけへ追加します。
端末に合わせる
スマホでは距離や時間を抑え、読みやすい構成へ調整します。
無理なく動かす
軽減設定や性能も考慮し、情報が失われない実装にします。
NAMAKEMONOTECH / WEB-MOTION
「どう動かす？」を、一緒に考えるスキル。
思いついた言葉から始めてください。足りない情報は、web-motionが確認します。
web-motionスキルをダウンロードZIP ↓ZIPファイルをダウンロードできます。