📌 この記事のポイント

• Framerのアニメーションは「エフェクト＋トリガー」の組み合わせで作る

• 出現・ホバー・スクロールの3つを押さえれば大半の動きが作れる

• カードの重なりはSticky＋Scroll Transformで実現できる

• AIプラグイン「Workshop」で対話しながらパーツを生成できる

• コードを書かずに公開まで完結できるのがFramerの強み

2026年7月17日更新

Framerのアニメーションは「エフェクトを付ける」だけでノーコードで作れる

Framerのアニメーションは、要素を選んで右パネルの「エフェクト」を追加するだけで、コードを書かずに作れます。出現・マウスオーバー・スクロールという3種類の動きを覚えれば、Webサイトで見かける動きの大半は再現できます。

この記事では、NOT DESIGN SCHOOLの講座「Framerではじめる Webアニメーション入門」を題材に、ポートフォリオサイトを動かしながら作り方を解説します。講師はFramer Japan Community（Slack約700人・2026年）を主宰するデザイナーのおかゆさんです。もちがスクールを運営していて感じるのは、コードを書かずに動きまで作れると、駆け出しでも提案の幅が一気に広がるということです。

参考動画：Framerではじめる Webアニメーション入門講座【前編】 / 【後編】（NOT DESIGN SCHOOL）

Framerそのものの特徴や料金はFramer入門ガイドにまとめています。この記事はその続編として、アニメーションに絞って解説します。

Framerアニメーションとは？できることの全体像

Framerアニメーションとは、Figmaに似た画面で要素にエフェクトを設定し、ノーコードで動きをつける機能のことです。この講座で作るポートフォリオでは、次の6種類の動きを扱います。

さらに、AIプラグインを使えば、カーソルに追従する背景画像のようなインタラクティブなパーツも作れます。Framerは、デザインからノーコード実装、公開までを1つのツールで完結できるのが強みです。

基本の仕組み｜エフェクトとトリガーを理解する

Framerのアニメーションは「エフェクト（どう動くか）」と「トリガー（いつ動くか）」の組み合わせで決まります。要素を選び、右パネルの「エフェクト」からプラスで追加し、トリガーと動きの詳細を設定する、という流れです。

トリガーは主に4種類あります。ここを理解すると、狙った瞬間に動きを出せるようになります。

エフェクトの種類ごとの使いどころは、Framer Japan公式の解説やneccoのまとめも参考になります。

補足の設定も覚えておくと便利です。Replayは条件を再び満たした時にもう一度再生する設定で、上下スクロールで何度も再生されると煩わしいのでオフにする場面が多いです。Enter/Exitは要素が画面に入る時と出る時の状態を分けて設定できます。最初に一度だけ見せたい出現アニメーションでは、Exitを消しておきます。

出現アニメーションの作り方（画像・テキスト・ボタン）

出現アニメーションとは、要素が現れる瞬間に透明度や位置を変化させて、ふわっと登場させる動きです。ここではファーストビューの画像・テキスト・ボタンに順番に付けていきます。

画像を中央からふわっと出す

画像を囲っている親のスタックを選び、エフェクトから「Appear」を追加します。トリガーはLayer in Viewを選び、Replayはオフ、Exitは消します。Enterの詳細を次のように設定します。

1. Opacity：0にする（透明から始める）

2. Scale：0.5にする（少し小さい状態から始める）

3. Offset：X −130、Y 30で中央寄りから出す

4. Transition：Time 1でゆっくりにする

5. Delay：2にする（ローディングが約2秒あるため、その後に出す）

Opacityを0から1へ、Scaleを0.5から等倍へ戻すことで、中央から浮かび上がるような出現になります。

テキストを互い違いに出す

テキストを囲うフレームを選び、同じAppearを付けます。今度は下から出したいので、OffsetのYを30〜40にします。3つのテキストを少しずつ遅らせたいので、Delayを2.2、2.3、2.5と互い違いに設定すると、順番にふわふわと出てきます。設定の手順が多いので、付けたエフェクトを右クリックでコピーし、他の要素にペーストして流用すると速いです。

ボタンの出現はコピーで流用する

Contactボタンには、画像に付けた親のエフェクトをコピーして、ボタンの中間フレームにペーストします。ボタンは画面の右下にあるので、上から出るようにOffsetのYを−30に変えます。これでファーストビュー全体に出現アニメーションが揃います。

マウスオーバー（ホバー）｜Transform 3Dで立体的に見せる

ホバーアニメーションとは、要素にマウスを乗せた時に動きをつけて反応させる演出です。Framerでは「Transform 3D」を使うと、平面の画像を立体的に傾けられます。

画像の子要素にHoverエフェクトを追加します。デフォルトでScaleが1.1になっているので、大きくしたくない場合は1に戻します。右パネルを下にスクロールすると「Rotate 3D」の値があり、ここで角度を調整します。たとえばZを18、Yを−35にすると、ホバー時に内側を向くように傾きます。

このとき、親要素と子要素にそれぞれ別のエフェクトを付けられるのがポイントです。動きがぶつかりそうな時は、入れ子にして親に1つ・子に1つと分けると、うまく動きます。テキストやボタンにも同じ要領でHoverを付け、Transform 3Dやオフセットを好みで調整します。Transform 3Dはパースペクティブも設定でき、値が小さいほど手前が大きく見える表現になります。

スクロールアニメーション｜追従ボタンとカードが重なる動き

スクロールアニメーションとは、スクロールの位置や量に合わせて要素を動かす演出です。ここが作れると、サイトの印象が大きく変わります。

Contactボタンをスクロールで移動させる

最初は中央付近にあるContactボタンを、スクロールすると右下へ移動させます。一番親のフレームにScrollアニメーションを付け、トリガーはSection in Viewを選びます。対象セクション（作品一覧）に「Scroll Section」でIDを付け、そのセクションを指定します。Viewportは、セクションの先頭が画面のどこに来たら発動するかの設定で、真ん中に来たら発動するようにします。Enterでは、それ以前の位置をOffset X −200、Y −100で左上に置いておきます。これで、作品一覧が真ん中まで来た瞬間にボタンが右下へ移動します。

作品カードが重なりながら小さくなる

カードの重なりは、Position StickyとScroll Transformの組み合わせで作ります。作品を囲うWorks（高さ100vh×3枚）をSticky、Top 40で上部に固定します。そのうえで、カードと同じ高さに透明のトリガー用要素（カード1・2・3）を用意し、それぞれにScroll SectionでIDを付けておきます。

カードにScroll Transformエフェクトを付け、トリガーはSection in Viewにします。Section in Viewは、指定セクションの中で始まりから終わりまでどう変化するかを設定する使い方です。From/Toで次のように段階をつけます。

「Add Section」で多段に設定し、あとはコピーして各カードにペーストし、対象セクションを付け替えます。すると、カードが重なりながら少しずつ小さくなり、奥へ流れていく動きになります。

定番の動き｜ティッカーとローディング

サイトでよく見る「流れ続ける動き」と「起動時のつなぎ」も、Framerなら仕組みで作れます。

ティッカー（無限に流れる動き）

ティッカーとは、ロゴや文字が横に流れ続ける動きです。横長の要素に「Ticker」エフェクトを付けるだけで流れ始めます。Speedを30%程度に落とし、Directionで向きを選びます。斜めに流したい時は、要素自体をRotate −15度に傾け、中の要素を＋15度にして相殺すると、レイアウトを保ったまま斜めに流せます。

ローディング（コンポーネント×バリアント）

ローディングアニメーションは、コンポーネントとバリアントを使って作ります。バリアントとは、1つのコンポーネントが持つ複数の状態のことで、Framerが状態間の変化を自動で補間してくれます。

グレーのフレームを白フレームに入れてコンポーネント化し、バリアント1からバリアント2でグレーを右に出す変化を作ります。バリアント間の遷移はAppearで1.5秒後などに設定し、要素を並べてオートレイアウト（Gap 0）でさらにコンポーネント化します。ページに配置したらPosition Fixed、上下左右0、Height Viewport、Z-index 77で最前面に固定します。

仕上げに、読み込み後は下の要素を操作できるよう、バリアントで高さを最小にし、Pointer Events Noneを設定します。これで、ローディングが要素をブロックし続ける問題を防げます。

AIでインタラクティブなパーツを作る｜Workshop・MCP連携

FramerのAIは、対話でインタラクティブなパーツを作れる段階まで来ています。講座では、カーソルに追従する背景画像のコンポーネントをAIで生成しています。

使うのは公式プラグインの「Workshop」です。ツールバーのプラグインアイコンから「ワークショップ」を検索して起動し、日本語で「背景に画像を設定できるテキストコンポーネントを作りたい。画像はアップロードでき、テキストは変更でき、カーソルの動きに追従して背景が微妙に動くようにしたい」のように指示すると、Framerがコードを書いて生成します。うまくいかない部分はチャットで「画像が見切れないようにしたい」と伝えて修正を重ねます。生成したパーツは右パネルに設定項目まで用意されるので、フォントや画像を自分で差し替えられます。

Workshopは公式プラグインで、Claude 4.5を搭載し、プロジェクトのフォントや色を引き継いでインタラクティブなコード部品を生成します（Framer公式、2026年）。計算機・多段フォーム・カウントダウンなど、ロジックのある部品づくりに向いています。

もう1つ、MCP（Model Context Protocol）プラグインを使うと、Claude DesktopやCursorなどのエージェントからFramerを操作できます。こちらは第三者が提供するプラグインで、キャンバスの操作やCMS管理、React書き出しなどに使えます。Workshopが「新しく作る」のに対し、MCPは「既存のものを操作・管理する」役割だと考えると分かりやすいです。

よくある質問（FAQ）

Q. Framerのアニメーションにコードは必要ですか？

基本的に不要です。要素にエフェクトを付けて、トリガーと詳細を設定するだけでノーコードで作れます。AIパーツを生成するWorkshopもコードは書かずに対話で進められます。

Q. まず何から覚えればいいですか？

出現（Appear）・マウスオーバー（Hover）・スクロール（Scroll）の3つです。この3種類でWebサイトの動きの大半をカバーできます。

Q. カードが重なるアニメーションはどう作りますか？

Position StickyでカードをTop 40などで固定し、Scroll TransformとSection in Viewでスクロールに応じてScaleとOffsetを段階的に変化させます。透明のトリガー用要素を各カードの高さに置くのがコツです。

Q. FramerとFramer Motionは違いますか？

違います。この記事のFramerはノーコードのWebサイトビルダーです。Framer MotionはReact向けのアニメーションライブラリで、コードで実装するものです。

Q. AIでどこまで作れますか？

公式のWorkshopで、カーソル追従の背景やカウンター、フォームのようなロジックのあるパーツを対話で生成できます。生成後は右パネルの設定項目で細かく調整できます。

Q. 作ったサイトはそのまま公開できますか？

できます。Framerはデザインから公開までを1つのツールで完結できます。プランや条件は変わるため、詳しくはFramer入門ガイドを参照してください。