動きのあるWebサイトが増えている背景

かつてはFlashによる、インタラクティブなアニメーションがウェブを彩っていました。ところが、iPhoneがFlash非対応となり、HTML5が主流に。サイトの速度や、スマートフォンなどのモバイル端末からの閲覧しやすさが重視されるようになり、動きのあるWebサイトは敬遠されるようになりました。

しかし時代は流れ、最近ではLottieやWebGLなどの新しい技術の登場もあって、再びアニメーション、モーショングラフィックス表現を使ったデザインに対する注目が集まっています。

併せて、「モバイル端末の性能向上」「高速なインターネット接続が普及」したことで、動きのあるコンテンツが扱いやすくなってきました！

今は、静止画ベースのデザインにとらわれることなく、モーショングラフィックスを扱った魅力的なWebサイトを構築できるようになっています。

モーショングラフィックスは、ストーリーテリングやブランドメッセージをバラエティ豊かに表現し、ユーザーの心に強い印象を残すことができます。ページビュー数、滞在時間、クリック率、コメント数、シェア数といったユーザーエンゲージメントを高めるためのツールとして活用してみてはいかがでしょうか？

近年登場した形式

Lottie

Lottieとは、Airbnbが作ったJSONベースのアニメーションファイルのことです。
ベクターアニメーションをウェブに統合することができ、ファイルサイズを小さく保ちながら高品質のアニメーションを作れるのが特徴です。

・コードを書かなくて良い
・動画やGIFよりも軽量
・拡大しても画質が悪くならない

ウェブやアプリで使え、ロゴやローディング、いいねボタンなんかにもピッタリです。スクロールやクリックに反応するアニメーションも作れちゃいます！

デザイナーがAfter Effectsで作ったアニメーションを拡張プラグインでLottieに書き出し、エンジニアがそのファイルを埋め込むだけなので、作業もスムーズになります。

IllustratorでAiファイルを作って、After Effectsでアニメーションを組み込んで、JSONファイルに書き出し、プレビューして、Webサイトやアプリに実装していきます。

WebGL

WebGLは3Dグラフィックスのレンダリングをウェブブラウザ上で実現できる技術です。立体的でリッチな表現をすることが可能です。

Chrome・FireFox・Safariをはじめ、すべてのブラウザで動作させることができます。Flash PlayerやUnity Web Playerとは異なり、ブラウザのプラグインを導入しなくても、Webサイト上に3Dグラフィックスを表現できてしまいます！
3Dで商品のモデルを設置して、ぐるぐると見てもらい、訴求力を高めることも。

WebGLで主に利用されているライブラリとしては下記4つがあります。
・three.js
・Vanta.js
・BabylonJS
・PixiJS

直感的に操作できるものから、コードで自在に扱えるもの、リアルタイムレンダリング、シェーダーの種類など用途に合わせて選ばれています。

WebM

WebMはGoogleが開発・提供している動画ファイル形式です。透明（アルファ）も扱うことができ、高画質でありながら比較的軽いという特徴があります。

以前までは対応ブラウザが限られていましたが、2023年にこれまで非対応だったSafariもWebM対応になっということで今後に期待のフォーマットです。

従来からの形式

上記のLottieやWebGLは最近登場した技術のため、実装者（コーダーさん、エンジニアさん）側にもある程度の知識が必要となります。そのため、現状では依頼・担当できる実装者が限られてしまうというデメリットも。手軽にアニメーション要素をWebサイトに取り入れたい時は、従来通り動画のファイル形式を使った方法がおすすめです。

GIF

「GIFアニメは古い」なんて思っていませんか？実はまだまだポテンシャルがあります。ほとんどのブラウザに対応しているGIF。最大256色しかない色数を逆手にフラットなデザインに活用したり、今ではPhotoshopでの変換時、色を最適化する精度が向上しています。短い数秒のアニメーションをループさせ、Webサイトを活気づけてくれます。

MP4

mp4は高品質の動画をさまざまなデバイスやブラウザで再生できる拡張子ですね。一番使われている動画ファイル形式ではないでしょうか。ストリーミングにも対応しているので、動画をウェブ上でシームレスに共有できるのも嬉しいですよね。

情報量の多い動画データなのでどうしてもファイルサイズが大きくなり、ページの読み込み速度に影響を与えることもあります。画質の許容範囲を見極め、適切な圧縮・コーデックによりファイル容量を軽くする必要があります。また企画時には、動画尺が短くなるようストーリープランを練ることが大切です。透過させることができないため、背景と組み合わせたデザイン表現は難しいというデメリットもあります。

APNG

PNGの強みはなんといってもアルファチャンネルで透過画像が使えることですよね！圧縮しても画質が落ちにくく、ほとんどのブラウザで表示されます。

さらにPNGを拡張して開発されたAPNGはGIFのようなノイズが出ることがなく、よりクリアに透過画像をアニメーションさせることができます。

WebP

WebPは高い圧縮率を持ち、小さなファイルサイズで劣化が少なく、高品質な画像を表示できます。

WebPのデータはjpeg、png、gifなど他の画像形式に比べてデータが軽いのでウェブページの読み込みが速く、ユーザーエクスペリエンスの向上が期待できます。静止画のほかアニメーション、透過もサポートしています。

APNGとWebPの歴史に関して、2017年のものになりますが興味深い記事がありました。https://otogeworks.com/blog/history-apng-webp-war/

Webサイト内でモーショングラフィックスを使うメリット

提案の幅や独自性が高まり、クライアント満足度につながる

これまでは諦めていた動きのある表現も、モーショングラフィックスを使えば実現できます！イラストや背景をちょっと動かしてみるといったギミックの追加提案も可能です。

リクエストに応えるだけでなく、その期待を超える提案ができるようになれば、お客様の満足度ももっともっと上がること間違いなし、と思います！

その上、最新のモーショングラフィックスを取り入れられれば「あの会社の作るサイトは一味違う」「またお願いしたい」といったように、他社との差別化も図れ、リピーターとして長期的な関係を築くこともできるのではないでしょうか。

ユーザーが世界観に没入できるWebサイトを実現できる

没入感のあるWebサイトは、サービスの特長をより直感的に理解できるので、ユーザーが「これ、実際に使ってみようかな」と購入や問い合わせといった具体的なアクションを起こしやすくなります。

モーショングラフィックスを使ったWEBサイトは記憶にも残りやすく、こういった印象深いサイトはユーザーの口コミやソーシャルメディアでもどんどんシェアされやすくなります。「このサイト、めっちゃ面白かった！」「ちょっと見てみて」といった投稿が増えることでフォロワーに認知され、自然とサイトの新しいトラフィックが増え、新規ユーザーの獲得にもつながります。

ワークフローを最適化できる

これまで動きの設計は、デザイナー（デザイン）とエンジニア（実装）の間のやりとりの中で作られることが多く、明確な担当者がいない領域でした。そこへモーションデザイナーが入ることでデザイン、動き、実装と分業できスムーズな制作プロセスをふむことができます。また、実際に実装する前にAfter Effectsといった映像編集ソフトを使い、Webサイトの動きをテストするためのデモを作ることも可能です。

また外部へのスポットでの依頼は、予算を抑えながらも特定の目的に沿ったモーショングラフィックスを制作できるため、非常に効果的だと考えます。

特定の商品やサービスの紹介ページ、キャンペーンページ、またはコンタクトフォームなど、
「このロゴマークに動きが欲しい！」
「スクロールに応じて動かしたい」
といった箇所にはモーショングラフィックス会社にピンポイントで依頼することで、その他の業務にリソースを割きながら、納得のいくモーションを実装できるのはないでしょうか。

Webサイト内でモーショングラフィックスを使うデメリット

ページ速度の低下

過剰なモーショングラフィックスはページが読み込みにくくなります。特に大きなファイルサイズのアニメーションには注意していきましょう！

ページの読み込み時間は短い方がさくさく閲覧でき、ユーザーが離脱しにくくなりますよね。モーショングラフィックスを使用する際は、動作が重くならないようにファイルサイズを調整し、適切なフォーマットで表示します。

必要以上に多くのモーショングラフィックを使用せず、Webサイトのパフォーマンスを意識するのがベターです。

ユーザーエクスペリエンスへの影響

モーショングラフィックを多用すると、目がチカチカしたり、集中力を途切れさせたり、かえって目立たなくなります。使いにくい、見にくい、知りたい情報が見つからないなど、ユーザーエクスペリエンス（UX）も低くなってしまいます。

より強く訴求したい箇所にピンポイントで取り入れ、モーションを止めたりスキップできるようなオプションもあると、ユーザーが自分のペースでより快適にコンテンツを閲覧できます。

やはり、ユーザーがより快適に滞在できるような「配慮」が重要なんですよね。

SEOへの影響

モーショングラフィックスはSEOに不利にはたらくケースもゼロではありません。検索エンジンがアニメーションを情報として読み取れなかったとき、検索結果の上位表示が狙いにくくなる可能性があります。

モーショングラフィックスに代替テキスト、画像のalt属性や動画の説明文などを適切に設定し、検索エンジンがモーショングラフィックスをコンテンツとして解釈できる工夫が必要になってくるんですね。

先ほどお話ししたユーザーエクスペリエンスも併せて、サイトの評価につながるため、使いやすく見やすい、テキスト情報も不備のないよう調整していきましょう。

モーショングラフィックスのWebサイト活用事例

ローディング、またはファーストビュー時のロゴモーション

Webサイトのデザインに動きを加えるロゴモーションは、ロゴが画面に浮かび上がったり、回転したり、拡大縮小したりすることで、ブランドのロゴが生き生きとした印象を与え、視覚的に強いインパクトを与えます。
ほかにも、レストランのロゴを例にしてみますと料理が出てくるような演出だったり、技術系の会社様ですとロゴから回路が形成されるような演出で、ブランドの持つ価値や雰囲気が伝わりやすくなります。

ファーストビューのメインビジュアル

Webサイトの顔となるメインビジュアル。モーショングラフィックスなら、静止画では伝えきれない情報を短時間かつ効果的に伝えられるので、サイトの目的、メッセージ、コンセプトを潜在的にイメージづけるにはもってこいです！

例えば、SDGs（持続可能な開発目標）に取り組む企業のサイトを例にすると、緑豊かな森が再生するアニメーションや、海洋プラスチックがリサイクルされるプロセスを描いたビジュアルで見せることができます。

これにより、ユーザーは企業の活動を一目で理解できますし、そのビジュアルがユーザーに刺されば「もっと詳しく見てみたい」「他ににどんなことしてるんだろう？」と関連ページを閲覧してくれる可能性も高まり、回遊率がUPします。

各コンテンツの動くイメージ素材

各コンテンツ内でモーショングラフィックスを使うと、情報がさらに生き生きと伝わります。例えば、グラフやチャートのイメージ素材に動きをつけると、複雑な情報も直感的に理解しやすくなります。素材を動かすだけでも、コンテンツの魅力が増し、ユーザーエクスペリエンスが向上します。

また、メニューやお問い合わせなど、クリックして欲しい場所のアイコン素材を動かしてあげると「どこからリンクが見れるの？」「今すぐ問い合わせたいのに・・・」と混乱させることもなく、ユーザーに優しいサイト作りができますね！

動画バナー

動画バナーが目を引くのは言うまでもないですよね。操作せずに眺めているだけで、どんどん新しい情報が出てきます。スクロールするのもちょっと億劫なユーザーも増えてきていますし、そういった方にも訴求力が高いのではないでしょうか。

動きの中で情報量を増やしたり、ストーリーを持たせることも簡単です。時間がないユーザーにもすばやく情報を発信できるのは、やっぱり動画ならではかと思います！

ただ、最後まで見てもらえるとは限らないのも事実なんですよね。意図せずにループしてしまうようなクオリティの高いモーショングラフィックスでユーザーを引き込んで、滞在率を上げていきたいところです！

背景アニメーション

ウェブサイトの背景にアニメーションをあしらえば、サイト全体が呼吸するかのような、いきいきとしたデザインになります。

例としては、風になびく自然の風景や抽象的なパターンのアニメーションなど。さりげなくブランドイメージを強調したいときに取り入れてみると良いのでは、と思います！

2D・3Dどちらのモーショングラフィックスを選ぶべき？

モーショングラフィックスには大きく2D・3Dでの表現があります。どちらが優れているということはなく、それぞれの特徴と得意分野があります。

一般的には、短い納期や予算が限られている、シンプルに説明したいプロジェクトには2D。世界観を作ったり、リアルな表現、没入感を重視するプロジェクトでは3Dが適しています。

2Dモーショングラフィックス

平面的なアニメーションを使用して、静止画像を動かしたり、アニメーションさせたりする2Dモーショングラフィックス。手描き風からアニメ調、フラットデザインまで様々なテイストのアニメーションでの制作が可能です。

また、2Dでの制作は比較的コストが抑えられ、制作スピードも早いので人気があります。シンプルなイラストや図形でも表現できるため、データや概念をわかりやすく説明するインフォグラフィックスにも適しています。

3Dモーショングラフィックス

3Dモーショングラフィックスは、リアリティや立体感があり、思わず見入ってしまうような没入感があります。2Dに比べ、ブランドの世界観をよりリッチに表現できます。

商品の3Dモデルを作成してユーザーに商品の特徴をより鮮明に伝えたり、質感にこだわったりとバリエーション豊富です。まるでそこにあるかのようなミニチュアやジオラマのような世界観を作る！なんてこともできます。

カメラワークや照明にこだわって出力できるので、臨場感のある動きや、光と影の演出でディテールにこだわったモーションが魅力。
「水しぶきがパシャッと跳ねる」
「風で毛並みがなびく」
「トロリとなめらかなクリーム」
といった質感にクローズアップしたいときには、ぜひ試していただきたい手法です！2Dと組み合わせて使ってもなじみが良く、表現の幅が広がります。

モーショングラフィックス制作をご検討中なら

モーショングラフィックスは、サイト全体のユーザーエクスペリエンスを上げながら、ブランドのコンセプトや商品の魅力を、ユーザーも意図することなく潜在的に印象付けることができます。

ロゴアニメーションや2D・3Dモーション、動画バナー、背景アニメーションなど、モーショングラフィックスはバリエーション豊かに活用できるんですね。

ただ、モーショングラフィックスを過剰に使用すると、ページの読み込み速度が遅くなったり、かえってユーザーエクスペリエンスが損なわれる可能性もありますので、導入の際には、ページ速度やSEO対策にも十分に配慮する必要があります。

モーショングラフィックスの制作にお困りでしたら、ぜひ株式会社１コマにご相談ください。丁寧なヒアリングから制作まで一貫してサポートし、お客様のニーズに合った魅力的なグラフィックスをご提供いたします。

ぜひ、お気軽にお問い合わせくださいませ。