おしゃれなSVGファイルを無料で扱っているunDrawのSVGファイルを、無料から使えるデザインツールであるFigmaで加工して、SVGファイルをCSSでアニメーションさせるための下準備の手順を紹介します。
unDrawの使い方を先にまとめると、サイトで検索してイラストを選び、画面右上の色設定でメインカラーをサイトに合わせてからSVG(またはPNG)をダウンロードするだけです。会員登録は不要で、商用利用も可能、クレジット表記も求められません。そのまま使うだけならここで終わりですが、パーツごとにCSSで動かしたい場合は、この記事のようにFigmaでグループ化してid付きで書き出す下準備が必要です。
unDrawとFigmaでSVGをCSSでアニメーションさせるための下準備手順
unDrawでSVGファイルをダウンロード
まずはunDrawでSVGファイルを選択してダウンロードします。
https://undraw.co/
無料で商用にも使えます。
サイト上でできることは次のとおりです。
- 上部の検索欄に英語のキーワード(例:
coding、team)を入れてイラストを探す - 右上のカラーピッカーでメインカラーを変えると、全イラストのアクセント色が一括で変わる
- イラストをクリックして「Download SVG for your projects」または「Download PNG」を選ぶ
色はサイト上で1色しか変えられないので、細かい配色の調整やパーツ単位の編集は次のFigmaで行います。
FigmaでSVGを修正
次にFigmaでSVGを修正します。
https://www.figma.com/
Figmaは無料から使えるデザインツールで、UI/UXのデザインやSVGの作成、編集などいろいろなことができます。
登録するかGoogleのアカウントでログインする必要があります。
不要な部分を削除
Figmaにログインしたら、新しいキャンバスを作成して、そこにダウンロードしたSVGファイルをドラッグ・アンド・ドロップします。
そして、影や、使わない部分などの不要なパスを削除していきます。
色を調整
サイトやアプリのイメージに合わせて、色を調整していきます。
Linearでグラデーションを付けたいときは、複数選択しているとグラデーションの方向を変更できません。
一つずつ選択すれば方向を変更できます。
パスの調整や付け足したいものがあれば作成する
パスの調整や付け足したいものがあれば作成します。
この時点で、アニメーションを意識して調整できていることが重要です。
これができていないと、再度微調整に時間を取られることになります。
グループ化して名前をつける
不要な部分を削除して、パスの調整が終わったら、グループ化して名前をつけます。
後ほど、この名前がid属性としてexportできるようになるので、それを意識したid名にしておくといいです。
たとえば腕を振らせたいならarm-right、浮かせたい雲ならcloud-1のように、CSSのセレクタにそのまま使える英数字とハイフンだけの名前にします。
Exportする
Exportsの欄で、SVGを選択します。
Contents Onlyにチェックが入っていることを確認します。
そして、Include “Id” attributeにチェックを入れます。
そしてexportします。
Id attributeにチェックを入れると、グループ化したときの名前のままid属性が付いてexportされるので、忘れずにチェックを入れてください。
背景が不要の場合は、Backgroundの欄の Show in exportsのチェックを外しておくといいです。
以上が下準備です。
後は、ダウンロードしたSVGファイルをプロジェクトに取り込んでいけば利用できます。
書き出したSVGをCSSで動かす最小例
id付きで書き出したSVGをHTMLにインラインで貼り付けると、各パーツをCSSのセレクタで直接動かせます。
#cloud-1 {
animation: float 3s ease-in-out infinite;
transform-origin: center;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
}<img>で読み込んだSVGは内部のidにCSSが届かないので、動かしたい場合はインラインSVGにします。
transition・animation・keyframesの基本はCSSアニメーションの作り方、文字を動かすサンプルはCSS文字アニメーションのサンプル集を参考にしてください。