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

SVGアニメーションとは？

SVG (Scalable Vector Graphics) は、どのサイズでもピクセルが壊れないベクターベースのグラフィックです。アイコン、ロゴ、さまざまなビジュアル要素に適しており、小さな画面でも大きな画面でも鮮明に表示されます。

• ビットマップ画像がピクセルの集合であるのに対し、SVGはプロセッサが描く命令セットで構成されています。

• 点と形を基にしているためサイズ調整が自由で、ピクセルベースではなくコードベースなので修正や再利用が容易です。

• ファイルサイズが小さく、ロードが速いです。そのため、現代のウェブデザインで広く利用されています。

SVGアニメーションの歴史

• 1990年代後半: 初のSVGアニメーションの事例登場

• 2003年: 一部のブラウザでサポート開始

• 2011年: 主なブラウザで正式サポート

• 2018年: SVG2リリース → 簡単に使えるアニメーションツールの開発拡大

過去には別途プログラムやプラグインが必要でしたが、SVG2以降は本格的に注目を集め始めました。

JavaScriptとHTMLのSVGアニメーション

ウェブサイト速度がGoogle検索ランキングを左右する重要な要素となったため、ここ10年でGIFの使用は減少する一方で、JavaScriptとHTML5ベースのSVGアニメーションが急速に人気を得ました。

重いGIFを使用してサイトが遅くなるとランキングが下がる一方で、SVGは軽くて速く、修正も簡単なため、GIFの代替として地位を確立しました。

SVGアニメーターの原理

SVGアニメーションはペンで絵を描くのに似ており、パス(path)に沿って動く指示を実行する方式です。たとえば、ペンで絵を描く人に指示を出すと考えてみてください。「手を左に7.5cmほど動かした後、右に180度、再び13.5cm動かしてください。」といった具合です。

• SVGパスは始点、終点、長さを持ち、パスに沿って0 → 全長まで描く過程をアニメーション化できます。

• これにより、線が一本ずつ現れるか、図形が完成するような視覚効果を与えることができます。

FramerのAnimatorコンポーネント(Benjamin den Boer作成)は、この過程を自動処理してくれ、キャンバスのSVGと接続してプロパティを設定するだけで簡単にアニメーションを作成できます。

Framerの新しいベクトルツールでSVGアニメーション作成

Framerの新しいベクトル編集機能は、SVGを直接描いたり取り込んで管理しアニメーション化する過程をこれまで以上に簡単にしてくれます。キャンバスの上で直接作業でき、コードを書く必要もありません。

1ステップ: SVGを描くまたは取り込む

SVGをFramerに追加する方法は二つあります。

1. 直接描く: Insertメニュー → Vectorを選択し、キャンバス上でベクトル図形を直接作成できます。

2. 取り込む: 既存のSVGファイルをドラッグ＆ドロップすると、自動的にVector Setに変換されます。（アイコンやイラストを一つのセットとしてグループ化）

2ステップ: Vector Setに整理する

Vector Setは、デザインをすっきりと拡張可能に管理する助けになります。

1. ベクトルグループを右クリック → Create Vector Setを選択するか、Assetsパネルで新しいセットを作成可能

2. Vector Set専用キャンバスで整理、編集、検索が可能

追加機能は以下です。

• 変数サポート: ストロークカラー、不透明度などの属性を個別に変更可能

• アイコン再利用性向上: 同一アイコンを複製することなくインスタンスごとにカスタマイズ可能

• マルチトーンアイコン作成: デュオトーン、マルチトーンカラーアイコンを一つのセットとして作成可能

3ステップ: ストローク効果でアニメーションを適用する

新しいストロークアニメーション効果を利用してベクターグラフィックを生き生きと変化させることができます。

1. ベクターを選択し、Propertiesパネルに移動

2. EffectsセクションでStroke Animationを選択して追加

ストロークアニメーション属性

• Length: 線が描かれる長さの調整 (0 ~ 100%)

• Gap: 線の間の間隔を調整

• Offset: 開始地点を移動してアニメーションの方向/位置を変更

ループモード

• None: 一度だけ再生

• Loop: 繰り返し再生

• Ping-Pong: 前後に往復再生

まとめ

SVGアニメーションは、小さく素早く、視覚的に魅力的です。Framerのベクター道具とAnimatorコンポーネントを利用すれば、コーディングせずに簡単にSVGアニメーションを作成できます。

これから皆さんなら、どんなアイコンやロゴにアニメーションを加えてみたいですか？上記の説明だけではイメージが掴めない場合は、以下のチュートリアル動画を見ながら一緒に試してください。プロセスを視覚で確認しながら作業すると、より素晴らしいSVGアニメーションを速く完成させることができるでしょう。

本記事はFramer公式ブログの「デザイナーのためのSVGアニメーションマスタリー」を翻訳・アレンジしたコンテンツです。