「この動き入れたい。でも名前がわからない」をなくす。

参考サイトで見つけた、あの動き。使いたいのに名前が分からない。

Web Motion Skillは、その「名前が分からない動き」を実際に見ながら選んで、番号や言葉でAIに伝えて、Webサイトへの実装までつなげるための商品です。

95種類のMotionを収録した Web Motion Library と、 AIで使う Web Motion Skill。この2つを組み合わせて使います。

Codex 画像 2026年9月2日 23_39_16.png

こんな経験、ありませんか？

参考サイトを見て「この動き使いたい」と思った。でも名前が分からない
名前が分からないから、どう検索すればいいか分からない
AIに「なんか横にこう動くやつ」と説明しても、違うものが出てくる
そもそも、どんな動きがあるのかを知らない

動きを作る時間より動きを探して、言葉にして、説明している時間のほうが長い。

Webサイトを作っていると、こういう時間が地味に積み重なっていきます。

Web Motion Skillを作った理由

私自身Webサイトを作っていて止まりやすかったのが、
「入れたい動きは分かっているのに、その名前が分からない」という場面でした。

参考サイトで見つけても検索できない。
AIに動きを言葉で説明して、違ったらまた説明する。

作りたいものは決まっているのに
「探す・言葉にする・AIへ伝える」ところで時間がかかる。

この工程そのものを減らしたくて作ったのが、Web Motion Skillです。

ここからが、この商品の中身です

Web Motion Skillの仕組み

「探す」と「伝える」が、最初からつながっています

この商品は、2つを組み合わせて使います。

① Web Motion Library

Webサイトで使える 95種類のMotion を、実際に動いている状態を見ながら探せるLibraryです。

すべてのMotionに番号が付いています。

例：No.061 / No.062

スクリーンショット 2026-09-02 18.50.57.png

② Web Motion Skill

Web Motion Libraryと組み合わせて使う、AI用のSkillです。

Motion番号や言葉を受け取って、登録されている仕様をもとに、Webサイトへの実装につなげます。

Motionを指定する入口は、3つあります

入口こんなとき指示のしかたLibraryから目で見て選ぶどんな動きがあるか見たいとき一覧を見て、動きを確認して選ぶMotion番号で直接指定する使いたい動きが決まっているとき「No.052使って」言葉・擬音語から探す名前も番号も分からないとき「横にスクロールするやつ」「ふわっと」「ゆらゆら」

アニメーションの名前を知らなくても大丈夫です。この3つのどこから入っても、最終的にはSkillが登録されている仕様を参照して、実装につながります。

動きを探すところから、AIへ渡すところまでが、最初から一つになっています。

実際の流れ

Libraryで見て、番号で伝えるだけ

1. Web Motion Libraryを開く

2. 動いている状態を見て、使いたいMotionを見つける

3. Motion番号を確認する（例：No.052）

4. AIへ「No.052使って」と指示する

5. Skillが該当Motionの仕様を取得し、Webサイトへの実装につながる

スクリーンショット 2026-09-02 19.01.25.png

番号が分からないときは、言葉から探せます

「横にスクロールするやつ」「ふわっと」「ゆらゆら」

こういった言葉や擬音語からも、Motionの候補を探せます。

候補が複数ある場合は候補を提示する設計になっていて、 勝手に1つへ確定しません。 最後に選ぶのは自分です。

「なんか横にこう動くやつ」を説明していた工程が番号ひとつ、あるいは言葉ひとつに変わります。

実演｜Libraryで見た動きが、そのままサイトに入るところ

ここが、この商品でいちばん見ていただきたい部分です。

販売前のテストとして、仮の高級ヴィラのHP「UMI VILLA」を制作し、実際にLibraryのMotionを使って確認しました。

メインデモ｜No.052

STEP 1｜LibraryでNo.052を見る

「全画面の映像が、スクロールで枠に収まる」という動きです。 Library上で、実際に動いている状態を確認します。

STEP 2｜AIへ「No.052使って」と伝える

長い説明文も、参考サイトのURLも、擬音語も使いません。 番号だけです。

STEP 3｜UMI VILLAのファーストビューへ実装

Skillが該当Motionの仕様を取得し、ファーストビューに実装されます。

STEP 4｜Libraryで見たNo.052と同じMotionになることを目視確認

Libraryで見たあの動きと、サイトに入った動きが一致していること。 この一連の流れが、この商品の中心です。

サブ実演｜No.031

「下にスクロールすると横に流れる」Motionを、 UMI VILLAの客室紹介セクションへ実装しました。

こちらも、LibraryのNo.031と同じMotionになることを目視確認しています。

収録されていない動きは、勝手に作りません

もうひとつ確認したことがあります。

「Heroで炎が燃えるやつ」と指示してみました。

このとき、中心となる「炎」「燃」という概念が95種類の中に存在しないため、 safety判定が働き、 勝手に炎のアニメーションを作らず、そこで止まることを確認しています。

スクリーンショット 2026-09-02 23.14.35.png

これは制限というより、設計です。

それっぽいものが勝手に出てくるのではなく、 収録されているMotionの中から探して、仕様に沿って使う。

だからこそ、Libraryで見た動きと、実装された動きがつながります。

ここから先は、補足です

Web Motion Libraryには、95種類のMotionを収録しています。

名前を知らなくても、Library上で実際の動きを見ながら選べます。

「こんな動きもあったのか」と、知らなかった表現まで選択肢にできる。

スクリーンショット 2026-09-02 23.18.47.png

この商品で変わること

Before After動きを探す参考サイトを見て名前を調べるLibraryで動いている状態を見て選ぶAIへの指示「なんか横にこう動くやつ」「No.052使って」名前が分からないとき検索が止まる言葉や擬音語から候補を探せる収録外の動きそれっぽいものが出てくることがある該当なしとして扱われる表現の幅自分が知っている動きの範囲95種類から選べる

こんな人におすすめです

HP・LP・Webサイトを作りたい人、作っている人
AIを使ってWeb制作をしている人
Claude Code、Codex、ChatGPTをWeb制作に使っている人
サイトにアニメーションを入れたいけれど、動きの名前が分からない人
AIへ動きを説明する工程を減らしたい人
Webサイトで使える表現の選択肢を増やしたい人

コードに詳しいプロのエンジニアだけを対象にした商品ではありません。

商品内容・対応環境

含まれるもの

Web Motion Library（95種類のMotion）
Web Motion Skill 本体
関連ファイル一式
INSTALL.md（導入手順）
LICENSE

対応環境・導入について

導入方法は、以下の環境について用意しています。

Claude Code
Codex
ChatGPT

ただし、環境によって導入方法・使い方が異なります。詳細な導入手順は、商品に付属するINSTALL.mdでご案内します。

なお、すべてのブラウザ・端末・AI環境で完全に同じ動作を保証する商品ではありません。

販売前に確認していること

Motionの検索から、実際のWebサイトへの実装まで
スマートフォン表示を含む実装後の確認
Claude Code / Codex / ChatGPT への導入

また、95種類にない動きを勝手に確定しない安全判定についても確認しています。

一通り確認したうえで販売しています。

価格

発売初日のみ：4,980円

2026年9月4日（金）20:00 販売開始 2026年9月5日（土）19:59 まで

2026年9月5日（土）20:00 以降：9,800円

9,800円を基準価格としています。

買い切り型です

本商品は買い切り型です。月額費用はありません。

購入後に本製品のアップデートが提供された場合、既存の購入者は追加料金なしで利用できます。

今後、Motionの追加やSkillの更新、内容の拡充を行う可能性があります。それに伴って、新規販売価格を変更する可能性があります。

ただし、アップデートの実施・内容・時期・頻度・継続を保証するものではありません。

「将来増えるから」ではなく、現時点の95種類とSkillそのものに対しての価格です。

動きを探して、名前を調べて、AIに説明して、違ったからまた説明する。

この工程が、Libraryを見て番号を伝えるだけに変わる。

その分を、サイトの中身を考えることに使えます。

レビュー特典｜Web Motion活用パック

購入後にレビューを投稿いただいた方へ、 Web Motionをさらに使いやすくするための特典を3点お渡しします。

特典①｜Web Motion 実装指示テンプレ集（全18テンプレ）

AIへ実装を依頼するときの、指示文のテンプレート集です。 「どう実装する？」 の部分を埋めます。

特典②｜業種別Web Motionレシピ＆おすすめ組み合わせ集（10業種 × 2パターン／全20レシピ）

どの業種のサイトに、どのMotionを使うか。 「どれを使う？」 で迷ったときの資料です。

特典③｜Web Motion設計AIプロンプト（全12テンプレ＋使用例2点）

サイト全体のMotion設計をAIと一緒に組み立てるためのプロンプトです。 「サイト全体にどう配置する？」 を考えるときに使えます。

レビューの内容や評価の高さは条件にしていません。投稿いただいた方であれば受け取れます。

受け取り方法は、購入後にご案内します。

本体のWeb Motion Skillだけでも使い始められますが、もう一歩踏み込んで使いたいときに役立つ内容にしています。

購入者限定｜アップデートROOM

Web Motion Skill購入者限定のオープンチャットを用意しています。

ここでは、

新しいMotionの追加情報
Web Motion Skill / Libraryのアップデート情報
新機能や改善のお知らせ
「こんなMotionが欲しい」というリクエスト

などを共有します。

今後アップデートを行った際に、「何が追加されたのか」「どこが変わったのか」を確認できる場所としてご利用ください。

また、

「こういう動きを追加してほしい」
「探していたMotionが見つからなかった」
「この言葉でも検索できるようにしてほしい」

といったリクエストも受け付けています。

いただいた内容は、需要や汎用性、Web Motion Skillとの相性などを見ながら、今後のアップデート候補として検討します。

※すべてのリクエストの採用・実装を保証するものではありません。
※個別の技術サポート窓口ではありません。

参加方法は購入後にご案内します。

ご購入前に必ずお読みください

ライセンスについて

1購入＝1ユーザーです
購入者本人のみ、Skill本体を使用できます
同一法人、制作会社、チーム内であっても、Skill本体の共有は禁止です
Skill本体、data、scripts、reference等の再配布・共有・転売は禁止です

商用利用について

商用利用が可能です
クライアントワークで使用できます
Skillを利用して生成・実装したコードやWebサイトは、クライアントへ納品できます

動作・生成物について

生成されたコードは、購入者ご自身で確認・検証したうえでご使用ください
すべてのブラウザ・端末・AI環境での完全動作を保証する商品ではありません

返金について

購入者都合によるキャンセル・返品・返金はできません（法令上必要な場合を除きます）

準拠法

本商品に関する事項は日本法に準拠します

Brainの紹介機能について

本商品は、Brainの紹介機能に対応予定です。紹介報酬率は50%を予定しています。

まずはご自身のWeb制作に使っていただいて、良ければ紹介いただけたらうれしいです。

「この動き入れたい。でも名前がわからない。」をなくす

Libraryで動きを見て、番号や言葉で伝えて、そのままサイトへ。

名前が分からない動きを探すところから、実装までを一つにするための商品です。

発売初日のみ 4,980円 2026年9月4日（金）20:00 〜 9月5日（土）19:59

2026年9月5日（土）20:00 以降 9,800円

買い切り型。月額費用はありません。レビュー特典と購入者限定アップデートROOMも付いています。

▼ ご購入はこちらから