ウェブサイトにアニメーションを取り入れることは、ユーザーの目を引く効果的な手段の1つです。しかし、「ウェブサイトにアニメーションを実装したいが、CSSのコーディングが手間」と感じている方も多いのではないでしょうか。
そこでおすすめなのが「framer motion」です。framer motionを使えば、framerで作成されたウェブサイトにおいて、CSSを直接編集するよりも短いコードでアニメーションを実装できます。
本記事では、ウェブサイトに簡単にアニメーションを実装したいと考えている方に向けて、framer motionの導入方法や使い方を詳しく解説します。
目次
framer motionは、ノーコードUIデザインツール・プロトタイピングツール「framer」が提供するオープンソースアニメーションライブラリです。
▼framer motionのURLとGithub
framer motionを使用することで、CSSを直接編集するよりも短いコードでアニメーションを実装でき、効率的なウェブ開発が可能になります。また、豊富な操作オプションを活用することでカスタマイズの幅が広がり、高い拡張性を持つのも特徴です。
さらに、フレームベースのアニメーションを簡単に管理できる点もframer motionの強みで、コンポーネントベースの開発との相性が非常に良いです。そのため、モダンなフロントエンド開発においても需要が高まっています。
framerについて知りたい方は、「Framerとは？特徴や使い方、料金を解説【ノーコードでウェブサイトを制作】 」をご覧ください。
framerは、Meta社とコミュニティによって開発されたJavaScriptライブラリであるReactを基盤にしたツールです。ウェブサイトのUI設計に用いられるReactは、ソースコードが理解しやすく、編集のしやすさや処理の速さが特徴です。
framer motionと他のアニメーションライブラリとの大きな違いは、Reactで作成されたアプリケーションに特化している点です。
Reactで作成されたアプリケーションであれば、CSSやJavaScriptを直接編集するよりも、アニメーションの設定が簡単かつ直感的に行えます。また、コードの記述が短く済み、読みやすさも向上するため、誤解やミスを減らせる点もframer motionの強みです。
続いてframer motionの特徴をより深く理解するために、メリット・デメリットを解説します。
framer motionは、CSSで直接アニメーションを実装するよりもコーディングの手間を大幅に削減でき、簡単にアニメーションを作成できる点が大きなメリットです。
さらに、ホバリングやアニメーションの期間設定、ページ遷移など、さまざまな種類のアニメーションに対応しているため、ウェブサイトのさまざまな場面でframer motionを活用できます。
framer motionには、参考になるサンプルも豊富に揃っているので、下記のようなサンプルサイトをぜひ参考にしてみてください。
▼framer motionのアニメーションサンプルの例
framer motionのデメリットの一つは、SSR（サーバーサイドレンダリング）に対応していないことです。SSR非対応とは、サーバーサイドでページの内容を事前にレンダリング（データを処理してテキストや画像などを表示）できないことを意味します。
ページの内容がサーバーサイドでレンダリングされないと、検索エンジンのクローラがコンテンツを正しく解析できない可能性があります。そのため、データの処理に余計な時間がかかり、SEOやAdSenseの審査において不利になる恐れがあります。
SEOについて詳しく知りたい方は、「SEOとは？今日からできる対策と基本となる考え方」をご参照ください。
また、framer motionのパッケージサイズは2.3MBと比較的大きく、ビルドサイズやパフォーマンスに影響を及ぼす可能性がある点もデメリットです。例えば、同じアニメーションライブラリである「react-spring」のパッケージサイズは55.1KBであることからも、そのサイズの大きさがわかります。
framer motionを導入・セットアップするには、Node.jsとnpm（またはyarn）のインストールが必要です。Node.js（公式サイト）は、通常ブラウザ内でのみ実行されるJavaScriptをサーバーサイドでも実行可能にするプラットフォームです。
npmとyarnはどちらもNode.jsのパッケージマネージャーであり、ソフトウェアの更新や削除などを簡単に行うためのツールです。これにより、フロントエンドとサーバーサイドで同じJavaScriptを利用でき、エンジニアの作業負担が軽減されます。
framer motionの導入にはnpmとyarnのどちらを使っても問題ありませんが、一般的にはnpmがより広く使用されています。そのため、以下ではnpmを使用したセットアップ手順について解説します。
まずは、framer motionをnpmからインストールするには、下記のコマンド入力を行います。
1.framer motionのバージョンがReact18対応の場合
2.framer motionのバージョンがReact19対応の場合
framer motionをインストールしたら、このようにコマンド入力を行うとインポートできます。
framer motionでは、このようなコマンドでアニメーションを実装していきます。
以下のように、xの後ろの数値を変更するだけで簡単に値を調整できます。最新の値に応じてアニメーションが自動生成されるため、アニメーションの作成や編集が手軽に行えます。
framer motionの導入・セットアップが完了したら、いよいよアニメーションの実装です。ここでは代表的なアニメーションの事例を3つ紹介しますが、公式サイトでは他にもさまざまなアニメーションの設定方法について解説しています。あわせてご覧ください。
▼公式サイト
キャプチャの通り、framer motionでは「animate」に値を指定するだけで、基本的なアニメーションを設定できます。
animateの値を調整することで、アニメーションを自在に制御できます。
また、”transition”で横に細かく動くよう指定することもできます。
さらに、徐々に要素が表示されていくアニメーションや、要素が飛び出てくるアニメーションも作成可能です。これらの詳細については、framer motionの公式サイトを参照ください。
ユーザーの動きに連動したアニメーションを効果的に活用することで、直感的で分かりやすいサイトを作成できます。
ジェスチャーをサイトに取り入れる場合、"while+動作"を設定することで、ユーザーの行動に応じた動作を簡単に追加できます。
例えば、"whileHover"を使えば、ホバー時に対象が浮き上がるアニメーションを実装できます。
引用：Gestures
引用：Gestures
また、"whileTap"を設定することで、タップ時に指定した動作を実装できます。
引用：Gestures
スクロールに応じたアニメーションを取り入れることで、ユーザーはページをどこまで読み進めたかわかる上、興味をひく演出も可能です。
例えば、”useScroll”と入力すればスクロールに連動したアニメーションを実装できます。下の例で実装しているのは、スクロールでページの下に移動するほど上の赤色バーが伸びていくアニメーションです。
また、”whileInView”と指定すれば、スクロールにより要素が表示されたときに限りアニメーションを起動できます。
framer motion以外にも、コーディングを効率化して作業時間を短縮する方法はいくつかあります。ここでは、特に覚えておきたい3つのテクニックをご紹介します。
ウェブサイトは一般的に「ヘッダー」「フッター」「メインコンテンツ」といった要素に分かれています。同じウェブサイトであれば、これらの要素は類似したパターンを使うことが多いため、同じHTMLやCSSを再利用する場面は珍しくありません。
すでに存在する類似のコードを一から作成する（車輪の再発明）ことは、無駄な時間と労力を費やす結果になります。そのため、よく使うコードをテンプレートとして保存しておくと、作業時間を大幅に短縮できます。
テンプレートを活用することで、1つの作業ではわずかな時間短縮に過ぎないかもしれませんが、ウェブ開発では膨大なコード量を扱うため、長期的には大きな効果を発揮します。
エディタの拡張機能を活用することで、HTMLやCSSの入力を効率化できます。同じコードを何度も入力する手間が省けるため、作業時間の短縮やミスの防止に役立つテクニックです。
代表的な拡張機能には、VSCodeやAtomなどのエディタで使える「Emmet」があります。例えば、<h2></h2>と入力したい場合、"h2"と打ち込んでEnterを押すだけで、自動的に<h2></h2>が挿入されます。
Emmetには他にも多くの便利な機能があるため、詳しくは公式のチートシートをご参照ください。
framer motion以外にも、コーディングを効率化するツールは数多く存在します。これらのツールを使いこなすことで、作業や確認の手間を減らし、コーディング作業をさらに効率化できます。
▼コーディングの効率化に役立つツールの例
framer motionは、framerが提供するオープンソースのアニメーションライブラリです。Reactに簡単にインストールでき、CSSで直接実装するよりも、ジェスチャーやスクロールなどのアニメーションを手軽に導入できます。
ウェブサイトのコーディングは手間がかかりますが、framer motionを使えば、短いコードで多様なアニメーションを実装できるため、業務の効率化が図れるでしょう。
もしframerを利用していて、framer motionで特定のアニメーションを実装したい場合は、公式サイトの設定方法を参考にしてください。
ただし、マーケティング施策においては、ウェブサイトで人目を引くデザインだけでは不十分な場合もあります。場合によっては、ウェブサイト以外のメディアや施策が効果的なこともあります。自社のマーケティング戦略に迷った際は、ぜひCoziesにご相談ください。
framer motionは、framerが提供するオープンソースアニメーションライブラリです。CSSで直接編集するよりも短いコードでアニメーションを実装できるため、ウェブ開発を効率化してくれます。
類似パターンのHTML・CSSをテンプレートとして保存・活用することで、一からコーディングする手間を省けます。また、エディタの拡張機能でコードの簡略化も可能です。さらには、コーディングの効率化に役立つツールも多数存在します。
