SVGアニメーションでページに動きをつける

最近のWebサイトにはいろいろなアニメーションが入っていたりします。
読み込みの待ち時間に出てくるローディング画面や、ボタンにポインターを合わせると形状が変わったり、画像をふわっと表示したりと、よりWebページを楽しく閲覧できるようになっています。
適度なアニメーションは、UX(ユーザー体験)向上にも繋がりますが、必要ではない要素などに多用すると、かえってコンテンツの内容が入ってこなかったりなど、注意も必要です。
訴求のポイントや、操作や読み込みに関する箇所に使うとよいかもしれません。
今回はSVGでのアニメーションを試してみたいと思います。
●SVGとは
SVGとは、JPEGや、PNG、GIFなどの画像フォーマットの一種で、拡大してもカクカクとシャギらないベクター画像です。
(このあたりの話はまた次回にでもご紹介します。)
点と点の座標データを持っており、その点を線で結ぶ事で表示されるので、Retinaディスプレイなどの高解像度のモニタで見ても綺麗です。
おおよそ単純な作りのアイコンやロゴなどに向いています。
いろいろ試してみたいと思います。
■線で描くストロークアニメーション
svgアニメーション1
svgアニメーション2
svgアニメーション3
ブラウザで拡大(ctrl + +)してみると、分かるのですが、通常の画像みたいにカクカクしたりしません。
スマートフォンやPCなど、端末が変わっても、綺麗に表示されます。
■回転系アニメーション

ロゴ

ロゴ

■移動 + フェードアニメーション

ロゴ

ロゴ

■拡大縮小 + フェードアニメーション

ロゴ

ロゴ

アニメーションが発動するタイミングも、ページの読み込み時、スクロール表示時、クリック時、ポインターをあわせた時など設定する事が可能です。
効果的に適度なアニメーションを施し、Webサイトの表現力を広げていきましょう。

ファイブスターコーポレーションでは、ホテル・宿泊施設の集客や運営に
お困りの事業主様・オーナー様をサポートする様々なサービスを提供しています。
まずはお気軽にご相談ください。

ファイブスターコーポレーションの紹介動画はこちら⇓

関連記事

カテゴリー

最近の記事

  1. 【2025年版】海外の祝日カレンダーでインバウンドを攻略!

  2. 行動経済学から学ぶ『選ばれるプラン』の作り方

  3. 沖縄の梅雨を正しく理解し賢く旅行しよう!

  4. 【JUNGLIA OKINAWA】ついに公式サイトでのチケット販売開始!開業に備えよう

  5. ホテルの客室名って実は大事!客室名で伝える魅力とサービスクオリティ

月間ランキング Monthly Ranking

お問い合わせINQUIRY

お気軽にご相談をください。

宿泊施設の運営にお困りの事業主様、これから宿泊施設を運営したいとお考えの方
ご質問・ご相談などお気軽にご相談ください。

お問い合わせはこちら

採用情報RECRUITMENT INFO.

私たちと一緒に働きませんか

明るく、人と接することが好きな人で向上心がある人をお待ちしております。
(ホテル業・観光業・旅行業・営業職の経験者を優遇)

採用情報はこちら

WEB集客コンサルティング

売上UPに直結するWEBサイト(自社公式サイト)制作

必要なデータを一括管理ねっぱん!++

ファイブスターコーポレーション・クリエイティブサービス|実はいろいろやってます!

ファイブスターコーポレーション・クリエイティブサービス|多言語対応Web制作サービス

ファイブスターコーポレーション・クリエイティブサービス|撮影サービス

TOP