このドキュメントは、Framerを学ぶ国内ユーザーが韓国語の資料不足で直面する困難を解決するために、公式ブログの内容を日本語に翻訳し、実務に役立つ情報を追加しました。Framerを使用する皆様に少しでもお役に立てれば幸いです。

Framer

ほとんどのウェブサイトビルダーと言えば、単純なホバー効果や初期のアニメーションのみを思い浮かべます。しかし、Framerはそれよりもずっと洗練されたエフェクトを提供するツールです。

• スクロール時に自然なフェードイン

• クリック・スワイプに対応したアニメーション

• シーケンスとループアニメーション

• ロード状態を保持するインタラクション

このように、Framerは複雑なアニメーションをすぐに実現するのをサポートするツールです。最も特別な点は、コードを知らなくてもUIだけでアニメーションをすぐに作成できることです。チームで協力して、プレビューで変更をすぐに確認できる機能は、チーム単位でのユーザーに好まれるツールです。すべてのアニメーションはコンポーネント単位で管理されるため、一貫性を保つことが容易です。

Motion

Framerがほとんどの単純なウェブサイトエフェクトに適しているなら、Motionは複雑なインタラクティブな機能と詳細なアニメーション制御を求める開発者により適したツールです。サムネイルから全画面への要素のスムーズな拡大や、カーソルベースのドラッグ＆ドロップインターフェイスを作成する場合、Motionはすべてのディテールを精密に制御できるツールです。

最近Framerから独立したオープンソースライブラリであるMotionは以下の特徴を持っています。

• ReactとVanilla JSでどちらでも使用可能

• GSAPのような他ライブラリより最大90%少ないコード量を使用

• スクロールアニメーションで75%軽量なコード量でロード時間を最適化

Motionの特異な点は、アニメーションを指定する際に宣言的なアプローチを取ることです。開発者はアニメーションの開始と終了で望む効果を簡単に指定でき、Motionはその効果を自動的に処理してくれます。

サイトへ移動>

LottieFiles

LottieFilesは、Airbnbで初めて開発されたLottieアニメーション形式の代表的なプラットフォームで、従来の形式よりも5倍速くロードされることが特徴です。

• Lottie JSONファイルはGIFより60%、dotLottieは98%軽量です

• ベクター基盤のアニメーションでどんな解像度でも鮮明なアニメーションを提供

このようなLottieFilesの特徴は、ヒーローセクションやロードインジケーターなど、ページ性能を優先するすべての場所に適しています。また、LottieFilesではコラボレーションできるワークスペースを提供しており、これを活用すればチームメンバーと共同作業ができますし、完成したアニメーションを開発チームに簡単に引き渡せます。

さらに、FramerのLottieFilesプラグインを使えば、簡単にウェブサイトにLottieアニメーションを追加できますので、参考にしてください。

サイトへ移動>

GSAP

GreenSock Animation Platform(GSAP)はJavaScriptベースのアニメーションライブラリの中で最も繊細な制御が可能です。スクロールベースのアニメーションからSVG操作まであらゆることを処理可能で、多様な情報を提供するコミュニティを通じてどんなアニメーションも簡単に実現できます。

ただし、GSAPファイルは容量が大きくアニメーションステップを逐一定義しなければならない煩わしさがありますが、精巧なプロジェクトに必要な精密な制御機能を提供し、細かいタイミング制御が必要なときに適したツールです。また、プラグインシステムを通じて、テキスト効果から形状変形まで特別なアニメーションのための追加機能を提供します。

サイトへ移動>

Rive

Riveはステートマシーンを統合する機能を含み、複雑なアニメーションをデザインインターフェイスで直接処理する最先端のアニメーションツールです。

• 簡素化されたインターフェイス、リアルタイムコラボレーション機能提供

• ゲームエンジンレベルの高フレーム速度

Riveはウェブ、モバイル、ゲームエンジンなど多様なプラットフォームをサポートしており、Lottieよりも小さいファイルを品質を落とさずに制作できます。骨格アニメーション、メッシュ変形、レスポンシブレイアウトといった高度な機能に加え、ジオメトリやオーディオサポートは最先端のインタラクティブプロジェクトに特に適したツールです。

FramerのRiveプラグインを利用すれば、Riveのプロジェクトをウェブサイトへ直接インポートできます。

サイトへ移動>

Adobe After Effects

After Effectsは主にビデオアニメーションツールとして知られていますが、Lottie, SVG, CSSキーフレームを活用してウェブアニメーションにも適したツールとして使用されます。簡単なGIFから複雑なアニメーションまで幅広く制作可能です。

After Effectsは多くの人が基本的なウェブアニメーションに使用するよりも多機能を提供しますが、プロダクションクオリティの作業のためにこれらの機能は標準的に使用されます。特にPhotoshopやIllustratorといった他のAdobeソフトウェアを使用する場合、After Effectsはこれと連携できるという利点があります。

サイトへ移動>

Spline

Splineはウェブベースの3Dアニメーション作成ツールで、リアルタイムコラボレーション機能などアクセスしやすく、チーム単位で3Dアニメーションを協力して作成できるようにするツールです。

• 3Dモデリング、シミュレーション、ゲームコントロールサポート

• Framerとの互換性が優れており、ウェブサイトに3Dオブジェクトをすぐ追加可能

また、コンポーネントベースのデザインシステムとさまざまなレイヤリングツールを通じてプロジェクトを詳細に作業することができます。

サイトへ移動>

Jitter

Jitterは迅速な制作とコラボレーションに特化したウェブアニメーション作成ツールです。タイムラインベースのエディタと簡素化されたワークフローのおかげで制作プロセスがシンプルで迅速なのが特徴です。

• 事前に制作されたアニメーションテンプレートを提供

• GIF, Lottie, ビデオでエクスポート可能

さらに、Jitterを使えば複数のチームメンバーが簡単に協力できます。デザイナーはアニメーションを制作し、マーケターはコンテンツを直接更新し、開発者は必要な技術情報に簡単にアクセスできます。このように、チーム単位での連携で役割分担ができ、効果的な協力を引き出すのに優れたツールです。

サイトへ移動>

どのツールを選ぶべきか？

どのツールを選ぶべきか悩んでいる方のために、以下に各ツールの特性をまとめました。これを参考にして、状況やプロジェクトの特性に応じて効果的なツールを使用し、素晴らしいアニメーションを作成してください。

• コードなしで開始: Framer

• 精密な制御: Motion, GSAP

• 3D要素追加: Spline

• 高級ブランドアニメーション: After Effects + Lottie

• 最小容量 & 迅速なロード: Rive

• 迅速な協力とマーケティング主導の制作: Jitter

まとめ

アニメーションは単なる装飾ではなく、ブランド体験とユーザー没入を決定する要素です。Framerで基礎を固め、プロジェクトの性格に応じてMotion/Spline/Riveなどのツールを組み合わせて使用してみることをお勧めします。

この記事はFramer公式ブログの「デザイナーのための8つの必需ウェブアニメーションツール」を翻訳・アレンジしたコンテンツです。