「あのふわっと出るやつ」のような曖昧なやり取りが、消えます。 Webサイトのアニメーション部品集です。 109個の動きを、技術名ではなく「使う場面」で並べました。 開幕・ローディング／KV・ヒーロー／スクロール連動／テキスト表現／ ナビ・メニュー／ホバー／カード・UI部品／背景・装飾／ページ遷移。 デザイナーが実際に考える順番で並んでいるので、 「あのへんの動き」を頭の中の言葉のまま探せます。 ▼ この道具の中心は、動きの数ではありません 各パーツに「使わない方がいい場面」が書いてあります。96パーツぶん。 　velocity-skew（スクロール速度で歪む） 　→ 本文・フォーム・ナビ。読める必要がある要素には絶対に使わない 　countup（数字のカウントアップ） 　→ 誇るほど大きくない数字、和・伝統ブランド。数字を誇る文化と合わない 　toast（トースト通知） 　→ 重要なエラー、確認が要る通知。自動で消えてはいけない情報には使わない コードは無料でいくらでも手に入ります。 手に入らないのは「ここでは使わない」という判断のほうです。 大原則は2つだけ。 1画面で同時に動くものは3つまで。迷ったら入れない。 ▼ 収録内容 ・109パーツ／12カテゴリ ・各パーツに「使わない方がいい場面」（96パーツ） ・全パーツにデモ、その場で数値を変えられるつまみ、コピーできるコード ・導入の順番（この順で足せば失敗しない） ・実装依頼テンプレート（コピーして使える） ・受け入れチェックリスト（実装が上がってきたら） ・よくある不具合と原因の逆引き表 ・業種別ガイド（8業種。トーン・設計値・推すパーツ・避けるパーツ） ・ジェネレーター（グラデーション／影／フィルター／Flex／画面幅チェッカー ほか） ・案件カラーの置き換え（自分の案件の色を入れると、デモもコードも全部その色になる） ▼ 単一HTMLファイル1枚です ・外部依存ゼロ。ライブラリも、CDNも、外部画像も使っていません ・ダブルクリックでブラウザが開き、オフラインでも全部動きます ・インストール不要。アカウント登録も不要 ・素のHTML／CSS／JavaScript。どのフレームワークにも持ち込めます ▼ こんな人に ・Web制作をするデザイナー 　→ コードを書かずに「この動き」と指定できます ・ディレクター、進行管理をする人 　→ 実装依頼のテンプレートと受け入れ基準が最初から入っています 　　 パーツ名で指定できるので、伝言ゲームが起きません ・経験の浅いコーダー 　→ 「何を選べばいいか」の判断が全パーツに書いてあります ▼ こんな人には向きません ・自分でアニメーションを設計できるエンジニア 　→ 書けるものにお金を払う必要はありません ・コピペできるコードだけが欲しい方 　→ 無料のライブラリのほうが手軽です この道具の価値は、コードではなく判断のほうにあります。 そこにお金を払う気がない場合、買わないほうがいいです。 ▼ ライセンス ・購入者ご本人が、商用・非商用を問わず制作物に組み込めます ・コードの改変・部分利用は自由です ・クレジット表記は不要です ・このファイル自体の再配布・共有・転売はできません ・素材集やテンプレートなど、本ライブラリを主たる価値とする商品への再収録はできません チーム・法人でのご利用は、商用・チームライセンスをご購入ください。 ライセンスは購入単位で有効で、購入者以外への譲渡はできません。 ※ライセンス全文はファイル内のフッターに記載しています。 ▼ ご購入前にご確認ください ・zipファイルです。展開してHTMLファイルをダブルクリックしてください ・ダウンロード商品のため、購入後の返品・返金はお受けできません ・PCのブラウザでご利用ください（Chrome / Edge / Safari / Firefox の最新版） ・ファイルサイズは約86KB（展開後 約300KB）です ・アップデートがあった場合は、同じダウンロードページから無料で取得できます ▼ バージョン v1.0.0（2026-09） 109パーツ／12カテゴリ 制作：DEEB お問い合わせ：kw.seiya.works@gmail.com