ウェブ

SVGでアニメーションを簡単に作れるツールSVG Artista【プログラミング知識不要】

SVGアイキャッチ画像

Web上で動くファイル形式GIFがありますが、ファイル形式SVGでもアニメーションを作成することができる便利ツールがあり、プレビューでアニメーションを確認しながら簡単にアニメーションを作成できるのでSVG画像を用意するだけ。

アニメーション参考例 ↓
Run Penをクリック&タップ

See the Pen Untitled by pull-design (@design90806871) on CodePen.

▪SVG Artista

https://svgartista.net/

SVG Artista
SVG Artista

サクッと作れるように簡単に解説していきます。

サイトの動作確認

サイトの右上にあるPLAYをクリックすることでデフォルトの動作を確認することができます。

playをクリック
playをクリック

</>GET CODEをクリックでHTMLCSSが自動で発行される仕組みです。

GET CODE
GET CODE

illustratorで作成

まずは、illustratorで1文字に対して1レイヤーを作っていきます。

レイヤーを分ける
レイヤーを分ける

ポイントは最初に表示させたい文字を下に配置すること。

SVG ArtistaのサイトにSVGをアップロードした時に下のレイヤーから順番に表示される仕組みになっているためです。

レイヤーの順番
レイヤーの順番

SVGに書き出し

レイヤーの配置が完了した後はSVGの書き出しをします。

ファイル書き出し形式を選択。

SVG書き出し
SVG書き出し

ファイルの種類がSVGであることを確認して書き出しを選択。

SVG形式
SVG形式

※illustratorでSVGの書き出しが出来なかった場合はPNG~SVG変換サイトなどでSVGに変換しましょう。

▪ Convertion (画像変換サイト)

https://convertio.co/ja/image-converter/

Convertion
Convertion

SVGをアップロード

▪SVG Artistaのサイトに作成したSVGファイルをアップロードします。

https://svgartista.net/

OPEN SVGを選択。

OPEN SVG
OPEN SVG

作成したSVGファイルを選択して「開く」をクリック。

SVGアップロード
SVGアップロード

PLAYをクリックすることで文字が流れるアニメーションが完成しました。

SVG PLAY
SVG PLAY

動作に問題がなければGET CODEを選択してHTMLCSSを出力します。

左側がHTMLで右側がCSSとなっています。HTMLコードコピーはCOPY SVGを選択、CSSコードコピーはCOPY TRANSITION CODEを選択でコピーできます。

HTMLとCSS
HTMLとCSS

後は、コピーしたコードを張り付けたら動作します。

▪参考例になります↓
Run Penをクリック&タップ

See the Pen Untitled by pull-design (@design90806871) on CodePen.

Code Penの使い方は下記↓の記事で解説していきます。

SVGの利点について

SVGでアニメーションを作成することにはいくつかの利点があります。

スケーラビリティSVGはベクトル形式の画像であり、異なるディスプレイサイズや解像度に対してスケーリングが容易です。アニメーションも同様にスケーリングされ、高品質の表示が可能です。
軽量性SVGはテキストベースのフォーマットであり、画像よりもファイルサイズが小さくなる傾向があります。小さなファイルサイズはページの読み込み速度を向上させ、ユーザーエクスペリエンスを向上させるのに役立ちます。
柔軟性SVGはパスやシェイプ、属性などを使用してアニメーションを作成するため、細かい制御や複雑な効果を実現できます。CSSやJavaScriptを組み合わせて使用することもでき、多様なアニメーション効果を実現できます。
直感的な編集SVGはテキストベースであり、テキストエディタで直接編集することができます。また、一部のグラフィックエディタやアニメーションツールもSVGの編集機能を提供しており、直感的な編集が可能です。
インタラクティビティSVGアニメーションはユーザーとのインタラクションに応じて動的に変化することができます。マウスオーバーやクリックなどのイベントに応じてアニメーションを制御することで、ユーザビリティやユーザーエンゲージメントを向上させることができます。
SEO対応SVGはテキストベースであり、検索エンジンがSVGのコンテンツを理解しやすくなります。そのため、適切に最適化されたSVGアニメーションは、SEO(検索エンジン最適化)にも貢献することができます。
SVG利点

これらの利点により、SVGを使用してウェブ制作にアニメーションを組み込むことで、視覚的に魅力的なコンテンツやインタラクティブな体験を提供することができます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


上にスクロール 下にスクロール