framer motionとは?
framer motionは、ノーコードUIデザインツール・プロトタイピングツール「framer」が提供するオープンソースアニメーションライブラリです。
▼framer motionのURLとGithub
framer motionを使用することで、より簡潔なコードでアニメーションを実装でき、効率的なウェブ開発が可能になります。また、豊富な操作オプションを活用することでカスタマイズの幅が広がり、高い拡張性を持つのも特徴です。
さらに、フレームベースのアニメーションを簡単に管理できる点もframer motionの強みで、コンポーネントベースの開発との相性が非常に良いです。そのため、モダンなフロントエンド開発においても需要が高まっています。
framerについて知りたい方は、「Framerとは?特徴や使い方、料金を解説【ノーコードでウェブサイトを制作】 」をご覧ください。
framer motionと他のアニメーションライブラリとの違い
framerは、Meta社とコミュニティによって開発されたJavaScriptライブラリであるReactを基盤にしたツールです。ウェブサイトのUI設計に用いられるReactは、ソースコードが理解しやすく、編集のしやすさや処理の速さが特徴です。
framer motionと他のアニメーションライブラリとの大きな違いは、Reactで作成されたアプリケーションに特化している点です。
Reactで作成されたアプリケーションであれば、CSSやJavaScriptを直接編集するよりも、アニメーションの設定が簡単かつ直感的に行えます。また、コードの記述が短く済み、読みやすさも向上するため、誤解やミスを減らせる点もframer motionの強みです。
続いてframer motionの特徴をより深く理解するために、メリット・デメリットを解説します。
framer motionのメリット
framer motionは、CSSで直接アニメーションを実装するよりもコーディングの手間を大幅に削減でき、簡単にアニメーションを作成できる点が大きなメリットです。
さらに、ホバリングやアニメーションの期間設定、ページ遷移など、さまざまな種類のアニメーションに対応しているため、ウェブサイトのさまざまな場面でframer motionを活用できます。
framer motionには、参考になるサンプルも豊富に揃っているので、下記のようなサンプルサイトをぜひ参考にしてみてください。
▼framer motionのアニメーションサンプルの例
framer motionのデメリット
framer motionのデメリットの一つは、SSR(サーバーサイドレンダリング)に対応していないことです。SSR非対応とは、サーバーサイドでページの内容を事前にレンダリング(データを処理してテキストや画像などを表示)できないことを意味します。
ページの内容がサーバーサイドでレンダリングされないと、検索エンジンのクローラがコンテンツを正しく解析できない可能性があります。そのため、データの処理に余計な時間がかかり、SEOやAdSenseの審査において不利になる恐れがあります。
SEOについて詳しく知りたい方は、「SEOとは?今日からできる対策と基本となる考え方」をご参照ください。
また、framer motionのパッケージサイズは2.3MBと比較的大きく、ビルドサイズやパフォーマンスに影響を及ぼす可能性がある点もデメリットです。例えば、同じアニメーションライブラリである「react-spring」のパッケージサイズは55.1KBであることからも、そのサイズの大きさがわかります。
framer motionの導入・セットアップ
framer motionを導入・セットアップするには、Node.jsとnpm(またはyarn)のインストールが必要です。Node.js(公式サイト)は、通常ブラウザ内でのみ実行されるJavaScriptをサーバーサイドでも実行可能にするプラットフォームです。
npmとyarnはどちらもNode.jsのパッケージマネージャーであり、ソフトウェアの更新や削除などを簡単に行うためのツールです。これにより、フロントエンドとサーバーサイドで同じJavaScriptを利用でき、エンジニアの作業負担が軽減されます。
framer motionの導入にはnpmとyarnのどちらを使っても問題ありませんが、一般的にはnpmがより広く使用されています。そのため、以下ではnpmを使用したセットアップ手順について解説します。

引用:framer motionのIntroduction
framer motionのインストール
まずは、framer motionをnpmからインストールするには、下記の方法で行います。
1.Reactのバージョンが18の場合
npm install framer-motion
2.Reactのバージョンが19の場合
npm install framer-motion@12.0.0-alpha.0
引用:framer motion Introduction
framer motionを経由してのインポート
framer motionをインストールしたら、このようにインポートできます。

引用:framer motion Introduction
アニメーションの実装方法
framer motionでは、このようにアニメーションを実装していきます。

以下のように、xの後ろの数値を変化させるだけでアニメーションが自動生成されます。

引用:framer motion Introduction
framer motionで実装できるアニメーションの例
framer motionの導入・セットアップが完了したら、いよいよアニメーションの実装です。ここでは代表的なアニメーションの事例を3つ紹介しますが、公式サイトでは、アニメーションの挙動のほか、さまざまなアニメーションの設定方法について解説しています。あわせてご覧ください。
▼公式サイト
基本的なアニメーション
キャプチャの通り、framer motionでは「animate」に値を指定するだけで、基本的なアニメーションを設定できます。

引用:framer motion Animation
animateの値を調整することで、アニメーションを自在に制御できます。

引用:framer motion Animation
また、”transition”で横に細かく動くよう指定することもできます。

引用:framer motion Animation

引用:framer motion Animation
さらに、徐々に要素が表示されていくアニメーションや、要素が飛び出てくるアニメーションも作成可能です。これらの詳細については、framer motionの公式サイトを参照ください。
ジェスチャー
ユーザーの動きに連動したアニメーションを効果的に活用することで、直感的で分かりやすいサイトを作成できます。
ジェスチャーをサイトに取り入れる場合、"while+動作"を設定することで、ユーザーの行動に応じた動作を簡単に追加できます。
例えば、"whileHover"を使えば、ホバー時に対象が浮き上がるアニメーションを実装できます。

引用:Gestures

引用:Gestures
また、"whileTap"を設定することで、タップ時に指定した動作を実装できます。

引用:Gestures
スクロール
スクロールに応じたアニメーションを取り入れることで、ユーザーはページをどこまで読み進めたかわかる上、興味をひく演出も可能です。
例えば、”useScroll”と入力すればスクロールに連動したアニメーションを実装できます。下の例で実装しているのは、スクロールでページの下に移動するほど上の赤色バーが伸びていくアニメーションです。

引用:Scroll animations

引用:Scroll animations
また、”whileInView”と指定すれば、スクロールにより要素が表示されたときに限りアニメーションを起動できます。

引用:Scroll animations
アニメーションのコーディングを効率化するテクニック
framer motion以外にも、コーディングを効率化して作業時間を短縮する方法はいくつかあります。ここでは、特に覚えておきたい3つのテクニックをご紹介します。
テンプレートの活用
ウェブサイトは一般的に「ヘッダー」「フッター」「メインコンテンツ」といった要素に分かれています。同じウェブサイトであれば、これらの要素は類似したパターンを使うことが多いため、同じHTMLやCSSを再利用する場面は珍しくありません。
すでに存在する類似のコードを一から作成する(車輪の再発明)ことは、無駄な時間と労力を費やす結果になります。そのため、よく使うコードをテンプレートとして保存しておくと、作業時間を大幅に短縮できます。
テンプレートを活用することで、1つの作業ではわずかな時間短縮に過ぎないかもしれませんが、ウェブ開発では膨大なコード量を扱うため、長期的には大きな効果を発揮します。
コードの簡略化
エディタの拡張機能を活用することで、HTMLやCSSの入力を効率化できます。同じコードを何度も入力する手間が省けるため、作業時間の短縮やミスの防止に役立つテクニックです。
代表的な拡張機能には、VSCodeやAtomなどのエディタで使える「Emmet」があります。例えば、<h2></h2>と入力したい場合、"h2"と打ち込んでEnterを押すだけで、自動的に<h2></h2>が挿入されます。
Emmetには他にも多くの便利な機能があるため、詳しくは公式のチートシートをご参照ください。
ツールの活用
framer motion以外にも、コーディングを効率化するツールは数多く存在します。これらのツールを使いこなすことで、作業や確認の手間を減らし、コーディング作業をさらに効率化できます。
▼コーディングの効率化に役立つツールの例
