SHEET K-48-V02

SVGによる表現 V02

Lottie アニメーション

デザイナーが作った動きを、軽いデータのまま SVG で再生する。読み込み中・完了・紹介のイラストまで、無料で使える素材がそろっている。

01動く実物

見て、動かして確かめる。

LottieFiles の無料素材から、凝った表現と、使う場面の多いものを選びました。画面に入ったものだけが動きます。

凝った表現紹介のイラストや、目を引きたい場面に

  • 旅行の計画・予約 サービス紹介のイラスト 作者 Abdul Latif/LottieFiles で見る
  • 転がる立方体 技術・仕組みの紹介の背景 作者 Sanjib Paul/LottieFiles で見る
  • 商品カードとカート 商品やサービスの見せ方 作者 Sanjib Paul/LottieFiles で見る
  • 達成のお知らせ 目標の達成・お祝い 作者 Sanjib Paul/LottieFiles で見る
  • スマホとメール お問い合わせ・連絡の案内 作者 Abdul Latif/LottieFiles で見る

使う場面の多いもの読み込み中・完了・処理中の合図に

  • 注文完了 ボタンを押した後の完了の合図 作者 Sumit Wagh/LottieFiles で見る
  • アイコンの変形 調べている・処理している途中 作者 Wilfred Joyce/LottieFiles で見る
  • 跳ねるキャラクター 読み込み中・待ち時間 作者 Abdul Latif/LottieFiles で見る

素材はどれも LottieFiles の無料素材で、Lottie Simple License(商用利用可・クレジット任意)で公開されています(2026年11月 確認)。

02この見せ方のよいところ

プロの動きを、すぐ使える。

  • プロの動きを、そのまま使える

    デザイナーが After Effects で作った動きを、作り直さずにそのまま載せられる。凝った動きでも、作る手間がかからない。

  • 軽く、拡大しても粗くならない

    動画ではなく、形と動きのデータ。数十KB の素材も多く、スマホでも大きな画面でも、くっきり表示される。

  • 色や速さを、あとから合わせられる

    中身はデータなので、会社の色に塗り替えたり、速さや繰り返しを変えたりできる。ページの雰囲気に合わせやすい。

  • 使う場面が多い

    読み込み中・注文完了・通知など、サイトでよく出る場面の素材がそろっていて、そのまま当てはめられる。

03向いている内容

こんな説明に向いています。

  • 読み込み中・処理中の表示
  • 注文や送信が終わった合図
  • サービスや機能を紹介するイラスト
  • 空の状態・エラーの画面をやわらげる

04無料相談

まずは、御社の業務についてお聞かせください。

導入の相談だけでも構いません。

無料相談を申し込む
  • 初回のご相談は無料です
  • オンラインでも対応します
  • ITに詳しくなくても大丈夫です
無料相談を申し込む