📌 この記事のポイント

• コンセプトと操作の間に「現象」を挟むと動きが決まる

• 成長は「小さいものが大きくなる」でスケールに変換できる

• 無難な動きは自分の表現の引き出しが尽きたサイン

• 完璧なトレースが新しい表現を増やす近道

• 参考は書籍よりサイトを見て日々ストックする

2026年9月4日更新

動きのアイデアは、コンセプトを自然界の現象に置き換えると出る

動きのアイデアが出ない原因とは、コンセプトからいきなりツールの操作に飛んでいることです。「成長」というコンセプトを前にして、すぐ「スケールを大きくする」と考え始めると、選択肢が1つしか出てきません。間に「自然界でその言葉はどんな現象か」を挟むと、動きの候補が増えます。

モーションが苦手だと感じている人ほど、この現象を考える工程を飛ばしています。工程を1つ足すだけで、動きは決めやすくなります。

参考：本記事はNOT DESIGN SCHOOL主催ウェビナー「After EffectsからFigma Motionまで！はじめてのモーションデザイン入門」（2026年7月開催）の内容をもとに構成しています。登壇者はモーション歴10年のデザイナーで、NOT DESIGN SCHOOLのメンターを務めています。

コンセプトから動きへの変換表

変換の手順とは、コンセプト → 自然界の現象 → 動かすプロパティという3段階です。ウェビナーで挙げられていた例を表にすると、考え方の型が見えます。

中央の列に入る現象は1つに決まりません。「成長」から思いつく現象は人によって違いますし、いくつ挙げても構いません。複数出したうえで、最も少ない操作で再現できるものを選ぶのが実務的な進め方です。

「小さなものが大きくなる」であれば、スケールを変えるだけで再現できます。実装コストが低く、意図も伝わる。この2つが揃った案が採用されます。動かす手順そのものはモーションデザイン入門｜キーフレームとイージングの教科書にまとめました。

動きから考えると詰まる理由

操作から考えると選択肢が狭くなるのは、ツールが提供するプロパティが4つしかないからです。位置・スケール・回転・不透明度のどれを使うかという問いから始めると、答えは4通りしか出てきません。

現象から考えると、間に無数の候補が入ります。

• コンセプトから直接考える：成長 → スケールを大きくする（1案）

• 現象を挟んで考える：成長 → 芽が出る、積み上がる、広がる、小さいものが大きくなる → それぞれ別の動きに変換できる（複数案）

中間に言葉を1つ置くだけで、発想の幅が変わります。 これは動きに限らず、デザイン全般で使える考え方です。

無難な表現から抜け出す方法｜完璧にトレースする

「かっこいいと思うものはあるのに、自分で作るとベーシックになる」という状態とは、自分の中にある表現の引き出しを使い切っているサインです。知らない表現は作れないため、引き出しを増やす作業が必要になります。

有効なのは、好きな作品を完璧にトレースすることです。手順は次のとおりです。

1. Pinterestなどで作品を探す

2. 直感的に良いと感じたものを1つ選ぶ

3. 細部まで完璧に再現する

途中で「だいたい似ている」で止めないことが重要です。完璧に合わせようとする過程で、自分の中になかった表現方法に気づきます。 数値の取り方、タイミングのずらし方、イージングの選び方など、見ているだけでは気づかない判断が出てきます。

これを何度か繰り返すと、それまでなかった引き出しが増えていく感触が得られます。トレースは模倣のための作業ではなく、発見のための作業です。

好きなモーションをストックする習慣

上達に最も効くとして挙げられていたのが、普段から良いと感じた動きを保存しておく習慣です。SNSやWebサイトを見ていて気になった動きは、その場で残さないと再現できません。

手順はシンプルです。

1. 画面を録画する

2. 動きを再生し終えたら録画を止める

3. 保存先のツールに送る

ウェビナーの登壇者は、保存先をNotionに統一していました。ブラウザ拡張機能のSave to Notionを使い、スクリーンショットや動画をそのままページに送る運用です。形式はMP4で、容量の面でも現状は問題ないとのことでした。

参考として質が高いのはSNSです。X、Instagram、TikTokのようなサービスは世界中で使われており、動きが磨かれています。自分では気づけない自然な動きが日常的に流れてくる場所として、意識して見る価値があります。

参考にするのは書籍よりWebサイト

アニメーションの参考とは、書籍より実際に動いているWebサイトのほうが適しているというのが登壇者の見解でした。動きは静止画では伝わらないため、紙の情報では判断しにくいという理由です。

ウェビナーでは、用途別に3種類のサイトが挙げられていました。

具体的なURLはウェビナーのチャット欄で共有されました。記事に載せる際は、そのリンクを確認して掲載してください。

イージングについても一覧サイトが共有されています。代表的な種類は3つか4つですが、実際にはもっと多くの種類があります。名前だけでは動きが想像しにくいので、カーブと動きを見比べられる一覧を手元に置いておくと作業が速くなります。

学ぶ順序｜やりたいことを先に決める

学習の進め方とは、操作を覚えてから作るのではなく、作りたいものを決めてから必要な操作を調べるという順序です。チュートリアル本を最初から通してやる方法は、多くの人にとって続きません。

理由は単純で、数百ページある本を最後まで進めるだけの動機が保てないからです。しかも一通り終えても、その後に自分で作らなければ身につきません。

現実的な進め方はこうなります。

1. 小さくやりたいことを決める：ボタンをホバーしたときに色を変えたい、テキストの横の矢印を右に動かしたい

2. ツールを触ってみる：分からないことが具体的に出てくる

3. その部分だけ調べる：チュートリアルは辞書として使う

「操作を覚える」ではなく「これを実現するために操作を覚える」という順番にすると、学習が進みます。これはIllustratorでもPhotoshopでもBlenderでも共通する構図です。

上達の手段そのものは、デザインと変わりません。今日学んだことが明日できるとは限らない領域なので、日々の積み重ねになります。

4つのうちどれが欠けているかを確認すると、次にやることが決まります。 作る量は多いのに上達を感じない場合、フィードバックとトレースが抜けていることが多くなります。

Figma Motionの学び方｜コミュニティのチュートリアルから

Figma Motionの学習リソースとは、公式ドキュメントより先にFigmaコミュニティのチュートリアルです。ウェビナーの登壇者も、公式ドキュメントは一度も見ずに触りながら覚えたと話していました。

Figma MotionはAfter Effectsと比べて機能が絞られているため、触っているうちに覚えられる範囲に収まっています。新機能が追加されるとコミュニティにチュートリアルが並ぶので、定期的に見に行くと更新に追いつけます。

海外のチュートリアルを扱う場合、Figmaのエージェントにテキストの翻訳を指示するという方法も、ウェビナー中のやりとりで案として出ていました。

「全案件で使う」と決めると上達が加速する

登壇者がモーションを身につけた過程は、すべての案件でAfter Effectsを使うと決めたことが転機になっています。モーション歴は10年ですが、順風満帆だったわけではありません。

学生時代はAfter EffectsのUIが小さく分かりにくいと感じ、なぜこのソフトを使わなければいけないのかと思いながら過ごしていました。大学3年頃には嫌になり、グラフィックデザインだけをやろうと決めています。

再開したのは社会人になってからです。Webサイトを作るうちに、動きのほうが自分の表現が伝わると感じる場面が増えたことがきっかけでした。そこで全プロジェクトでAfter Effectsを使うという目標を立て、社会人4年目から5年目まで続けています。

その延長で、After Effectsでは3D表現に限界を感じてBlenderに手を出し、最終的にBlenderで納品まで到達しました。苦手意識のあった領域から入って、3Dまで扱えるところに広がったという流れです。

最初は手間のかかる作業が多く、数時間かけて作ったものが数秒にしかなりません。達成感が得にくい領域であることは事実です。ただ、そこを越えると扱える表現の幅が変わります。

限界と注意点

コンセプトを現象に置き換える手法は、すべての案件に当てはまるものではありません。 ブランドのトーンが明確に決まっている案件や、既存のデザインシステムに沿わせる案件では、発想を広げるより既存ルールに合わせる判断が優先されます。

トレース練習で作ったものは、公開や納品には使えません。 あくまで自分の引き出しを増やすための練習として行う必要があります。参考にした作品をそのまま実務に転用すると、権利の問題が生じます。

参考サイトの情報は変わります。 この記事で触れた3種類のサイトはウェビナーのチャットで共有されたもので、公開時にはURLと現在の状態を確認してから掲載してください。サイトの閉鎖や仕様変更が起きる可能性があります。

よくある質問

Q. モーションを始めたいのですが、何から手をつければいいですか？

作りたいものを1つ決めるところからです。ボタンをホバーしたときに色を変える、矢印を少し右に動かすといった小さな動きで構いません。それを実現するためにツールを触り、分からない部分だけチュートリアルで調べる順序が続きます。チュートリアルを最初から通してやる方法は挫折しやすくなります。

Q. かっこいい動きが作れず、毎回同じような表現になります。

自分の中の表現の引き出しを使い切っている状態です。好きな作品を1つ選び、完璧にトレースしてみてください。細部まで合わせようとする過程で、自分になかった表現方法が見つかります。数回繰り返すと引き出しが増えていく感触が得られます。

Q. 参考にする動きはどうやって保存していますか？

画面を録画して、保存先のツールに送る方法が共有されていました。登壇者はNotionに集約しており、ブラウザ拡張機能のSave to Notionを使ってスクリーンショットや動画をページに送っています。形式はMP4です。

Q. モーションの参考は書籍とWebサイトのどちらがいいですか？

Webサイトです。アニメーションは動いている状態を見ないと判断できないため、静止画中心の書籍では情報が足りません。トランジション、UI、テキストアニメーションのように用途別の一覧サイトを使い分けると効率が上がります。

Q. モーションが上達したかどうかは、どう判断すればいいですか？

作れる動きの種類が増えているかで判断できます。同じ案件で以前は1案しか出せなかったものが、現象を複数思いつけるようになっていれば前進しています。人に見せてフィードバックをもらう機会を作ると、自分では気づかない癖も見えてきます。