このサイトについて

Web Motion Finder とは

Web Motion Finder（ウェブモーションファインダー）は、Webサイトで使われるアニメーション・モーションを「見た目のイメージ」や「曖昧な日本語」から逆引きできる辞典型のWebツールです。

「下からふわっと文字が出てくる」「スクロールすると画像が固定されて小さくなる」—— Webサイトでよく見るこうした動きには、Fade UpやPinといった名前があります。しかし、動きは説明できても名前が分からないと、調べることも、制作を依頼することも、生成AIに実装を指示することも難しくなります。

このサイトでは、それぞれのモーションについて以下を確認できます。

正式名称と読み方
実際の動きが分かるデモアニメーション
どんな動きか・よく使う場所の解説
生成AI（ChatGPT・Claudeなど）にそのまま渡せる指示文（プロンプト）
実装方法の候補（CSS / JavaScript / GSAPなど）と難易度

こんな方におすすめ

Web制作を勉強中の初心者・独学者の方
生成AIを使ってWebサイトを作っている方（デザイン・コーディング未経験でもOK）
「あの動きの名前が分からない」と困ったことのあるデザイナー・ディレクターの方
アニメーションの実装指示を正確に出したいコーダー・エンジニアの方

使い方

言葉で探す — トップページの検索ボックスに「ふわっと」「固定」など思いついた言葉を入力します。正式名称を知らなくても大丈夫です。
動きを見て確認 — 検索結果のカードや詳細ページのデモを見て、イメージしていた動きかどうか確認します。
AIプロンプトをコピー — 詳細ページの指示文をコピーして生成AIに渡せば、意図どおりのアニメーション実装を依頼できます。

運営者

本サイトは「シゴトノコバコ」が運営しています。 Web制作に役立つツールやコンテンツを公開しています。

お問い合わせは運営サイトよりお願いいたします。

免責事項

掲載しているモーションの名称は、業界で一般的に使われている呼び方をもとにしていますが、文脈やツールによって異なる名前で呼ばれることがあります。また、AIプロンプトの実行結果は利用するAIやバージョンによって変わる場合があります。本サイトの情報を利用して生じたいかなる損害についても、運営者は責任を負いかねます。