目次
目次
このドキュメントは、Framerを学ぶ日本のユーザーが日本語の資料不足で直面する困難を解決するために、公式ブログの内容を日本語に翻訳し、実務に役立つ情報を追加しました。Framerを使用する皆様に少しでもお役に立てれば幸いです。
インターネット初期のウェブサイトは主にテキストと画像で構成された単純な静的ページでした。しかし今は違います。ウェブサイトアニメーションはストーリーテリングとインタラクション、感情的な没入を可能にし、静的デザインでは表現できない体験を提供します。
アニメーションは単に視覚的な魅力を加えるだけでなく、ユーザーの視線を自然に導き、ページの流れを整理し、インタラクションを直感的にしてくれます。適切なアニメーションとインタラクションを適用すれば、静的なウェブページもユーザーに対してインスピレーションを与え、行動を引き出す体験に変えることができます。今回の記事では、Framerギャラリーから選ばれた様々なウェブサイトアニメーションの事例を紹介します。ホバー効果、スクロールトランジション、背景アニメーションなど、多様な手法がブランドを差別化し、ユーザーエクスペリエンスを強化し、コンバージョン率を向上させる役割について見ていきます。
背景アニメーション
背景アニメーション（Background Animations）はウェブサイトに動きと没入感を与えます。グラデーションアニメーションのように控えめに適用することも、パララックス効果のようにページデザインの中心要素として利用することもできます。どの方法であれ、背景アニメーションはサイトの視覚的な流れを強化し、訪問者が閲覧する際に雰囲気を形成します。
例-Yuna
Yunaは子供の年齢に合わせたパーソナライズされたインタラクティブな童話を作成するアプリです。読書習慣の形成と創造力・想像力の発達に役立つサービスとして知られています。Yunaのウェブサイトは、この特徴を絵本のようなアニメーションでよく表現しています。
特にパララックス背景が重要な役割を果たしています。3つのレイヤーが異なる速度で動き、親が子供と一緒に本を読むシーンが演出されます。前景にはゆっくりと動く雲と葉が配置され、童話的な雰囲気を創り出します。スクロールを下ろすと登場アニメーションとアイコンの軽快な動きが続き、楽しく活気ある印象を与えます。
ホバーエフェクト
ホバーエフェクト（Hover Effects）はユーザーがクリックできる要素を直感的に区別できるようにします。同時に、探索過程をより動的で興味深くし、ブランドイメージを強化する機会にもなります。ボタンやメニューの色、サイズ、方向を調整する単純な効果から、精巧に設計されたインタラクションまで多様な方式で活用できます。
例-Unifiers of Japan
日本の歴史をテーマにしたこのウェブサイトは、全体的に華やかなアニメーションが際立っています。特に歴史上の人物が武将に変身するダイナミックな演出が強い印象を与えます。
メニューインタラクションも細かく構成されています。例えば、『Menu』という言葉にカーソルを合わせると下線が滑らかに現れ、各メニュー項目はカーソルを合わせた際に該当するグラフィックに自然に変わります。これらの小さなインタラクションが集まり、サイトを生き生きとした反応性の高い空間にしています。
ページトランジション効果
一般的にウェブサイトでのページ移動は単に新しいページがロードされる過程で終わります。しかしページトランジション効果（Page Transitions）を適用すると、この過程がよりスムーズで洗練され、専門的な印象を残すことができます。フェードインやスライドインのような効果は小さなディテールのように見えますが、訪問者の体験に大きな違いを生むことができます。
例-Dynex
ブロックチェーンと量子コンピューティングを扱うDynexは、先端技術を扱うだけにウェブサイトも未来志向のイメージを示す必要があります。Dynexのウェブサイトは洗練されたデザインとともに、ページトランジションにも工夫を凝らしています。メニューをクリックすると新しいページが左から右へと自然に現れます。ユーザーはこれを意識的に認識できなくても、ブランドの専門性と信頼性を自然に感じることができます。
エントランスアニメーション
訪問者がウェブサイトの初画面でテキスト塊と対面すると負担に感じることがあります。余白と画像を活用して内容を分離するのも効果的ですが、エントランスアニメーション（Entrance Animations）を活用するとメッセージを段階的に示し、ユーザーの視線を自然に案内できます。
例-Tellet
Telletのウェブサイトを開くと、タイトル、画像、説明、クリックスルーを促す文言など、上部のすべての要素が上にゆっくりと現れます。スクロールを下ろすと画面はより動的不運になり、グラフィックと統計が右から左に動くアニメーションで製品から展開されます。これにより、ユーザーは情報に圧倒されることなく各データを十分に理解できます。
エントランスアニメーションは過度に使用すると陳腐になり得ますが、適切に適用するとブランドの延長線として機能します。明るいネオンカラーと親しみやすいトーンを特徴とするTelletのブランドは、ウェブサイトで活用されたエントランスアニメーションと自然に調和しています。
ローディングアニメーション
ウェブサイトの訪問者は待ち時間に耐えられません。Googleによればページロード時間が1秒から3秒に増加すると、離脱確率が32%増加します。ロード時間が長くなるほど、多くのユーザーが他の場所に移動します。ローディングアニメーション（Loading Animations）は実感する待ち時間を短縮する役割をします。単に進捗バーでスピードを示すこともできますし、『スケルトン画面』のようにページの輪郭を先に見せ、細部を埋めていく方式もあります。
例-Coding for Designers
一般的なローディング画面は単純な回転アイコンがほとんどです。しかしオンライン教育サービスのCoding for Designersでは、「Learn, Design, Code！」というメッセージをアニメーションで見せ、ブランドを強化しました。ロードが終わると画面が上にスムーズに上がり、ウェブサイト本文が現れます。
この方式は単純なローディング画面とは異なり、ユーザーが正しい場所に来たことを認識させます。また、YouTubeの動画開始前に短いイントロを思わせる印象を与え、邪魔にならずにブランドとよくマッチします。
スクロールトリガーアニメーション
静的なウェブサイトはユーザーが自己主導で探索を誘導しなければなりません。しかしスクロールトリガーアニメーション（Scroll-Triggered Animations）を適用すれば、ウェブサイトがまるでインタラクティブなスライドのように動作し、スクロールするたびに意図的に新しいテーマに集中させることができます。この方式は情報を小さな単位で示すため、没入度を高めながらも負担を軽減します。
例-tinyPod
オリジナルのiPodのクラシッククリックホイールをご記憶でしょうか？tinyPodの制作者もその記憶を共有したかのようです。tinyPodはApple Watchのフォームファクターを2001年発売のiPodの縮小版形状に変えるケースです。非常に興味深い発想であり、単なる写真一枚で説明するにはやや複雑です。それゆえ段階的に物語を紡ぐスクロールベースの「ストーリーテリング」ランディングページとは完璧な相性です。
ページをロードすると最初に見えるのは雲の中から降りてくる、回転するtinyPodです。その後スクロールすると製品の多様な機能やアプリの事例として電話、音楽、メッセージなどが順を追って登場します。最終場面ではtinyPodがユーザーの手に置かれ、その横には購入理由を説明するメッセージが現れ、ストーリーが完了します。
マイクロインタラクション
マイクロインタラクション（Microinteractions）はユーザーの小さな行動に応答するアニメーションです。ツールチップ、アコーディオンメニュー、ホバー効果、パスワード強度表示、有効性確認メッセージなどがこれに該当します。これらはユーザーが自身の行動が認識されたことを確認できるようにし、使用性を高める一方でデザインに個性を加えることができます。
例-Ozone
AIビデオ製作ツールのオゾン（Ozone）はマイクロインタラクションを積極的に活用しており、ホームページのある区画だけでも3つの例を確認できます。マウスを置いたときにカーソルが変わるビデオ編集アニメーション、様々な形式で製品成果物を見せるウィジェット、そして協業機能の強調を示すアイコンサイズ拡大アニメーションを確認できます。
マウストリガーアニメーション
マウストリガーアニメーション（Mouse-Triggered Animations）はウェブサイトにさらに豊かなインタラクションを提供します。マウス追跡エフェクトを使用すれば、要素がカーソル位置に従って動きます。3Dオブジェクトの回転やパララックス効果など、一般的なマウストリガーアニメーションもあります。
マウスでトリガーされるアニメーションはユーザー入力に直接応答し、より没入的な体験を提供し、ユーザーがウェブサイトの特定のセクションに留まるようにし、新しいレベルの機能を体験する機会を提供します。
例-GitBook
GitBookのウェブサイトは基本がよく整ったデザインをしています。スッキリとしたレイアウトと余白、カラーパレットに加え、マウスに応答するアニメーションを活用して体験を強化しました。
ランディングページの各セクションは製品機能を説明する画像で構成されており、これらの画像は3Dで制作されてユーザーのカーソルの動きに応じて反応します。これによりユーザーの関心を引き付け、各機能にさらなる没入を促します。
インタラクティブ製品アニメーション
ユーザーにデモ予約や製品使用説明書視聴を求める代わりに、インタラクティブ製品アニメーション（Interactive Product Animations）を通じてわずか数秒で製品の価値を見せることができます。ユーザーに製品機能を段階的に案内するか、主要機能の一つを直接デモンストレーションするか、製品アニメーションはユーザーが製品を理解し、コンバージョン率を向上させるのに役立ちます。
例-Cradle
Cradleはタンパク質配列の変異体をクリック数回で設計できるバイオテクノロジー企業です。非常に専門的な分野ですが、ウェブサイトではこれを直感的に示しています。
ユーザーはウェブサイトで模擬製品画面を体験でき、『Generate variants』ボタンをクリックすると変異体生成過程をアニメーションで確認できます。この単純なミニデモは製品を理解しやすくし信頼を高めます。
テキストアニメーション
テキストアニメーション（Text Animations）はスタイルを加える要素でありながらも、ユーザーの視線を誘導する手段になります。これによって参加を促し、デザインとブランド表現、ストーリーテリングの幅を広げることができます。代表的な方式としてタイピングエフェクト、フェードイン、スライドインなどがあります。
例-Biograph
Biographは高価なカスタム健康管理サービスを提供する企業で、デザインもまたプレミアムイメージを強調します。ウェブサイトではテキストアニメーションを活用し高級で神秘的な雰囲気を演出しています。ホームページを開くとタイトルが徐々に焦点が合って現れ、スクロールするとその他のタイトルもぼやけた状態から鮮明に変わり、ユーザーがしばらく立ち止まり集中するよう促します。
3Dエフェクト
3Dエフェクト（3D Effects）は強烈な初印象を残します。オブジェクトに深みと回転を適用すると没入感を与え、特に電子商取引サイトでは製品を直接回転させて見ることができる方法がよく使われます。その他にインタラクティブインフォグラフィック、フリップカード、3D画像ギャラリーなどがよく利用されます。
例-Tim Quirinoのポートフォリオ
デザイナーTim QuirinoはFramerとSplineアニメーションを活用して3Dエフェクトが際立つポートフォリオを作成しました。宇宙テーマに基づくデザインで、訪問者はまるでゲームのように惑星と衛星を探索しながらプロジェクトを閲覧できます。カーソルは各プロジェクトを示す画像に変わり、それをクリックすると詳細ページが開きます。
この方式は探索効率性はやや低下するかもしれませんが、訪問者がサイトに入った瞬間から強い印象を与え、ポートフォリオ全体に独創的な雰囲気を形成します。
ウェブサイトアニメーションでユーザーエンゲージメントを高める方法
Framerを使用すれば、クリエイティビティと使いやすさ、パフォーマンス、アクセシビリティを考慮しながら容易にアニメーションを追加できます。次のような利用時に参考にできる実用的なヒントです。
1. 各アニメーションに目的を持たせる
単に可能だからといってアニメーションを追加しないでください。各アニメーションはユーザー体験とブランド体験を改善する役割を果たすべきです。例えば、最初はホバー効果のような単純な方法で始め、その後にはスクロールベースのアニメーションで情報の流れを調整することができます。
2. マイクロインタラクションで参加を維持
ボタンの色変化、サイズ拡大、パルス効果などの小さなアニメーションは行動を促すのに効果的です。また入力検証や作業完了時のフィードバックを提供して、ユーザー体験を改善することができます。
3. 性能とロード速度を優先
Framerは軽量なアニメーションとレイジーロード機能を提供します。しかし、性能低下が発生した場合は、CSSアニメーションに切り替えたり、画像・動画の最適化を検討したり、アニメーションの数自体を減らすのも方法です。
4. アクセシビリティを考慮
一部のユーザーは過度なモーションに不快感を感じることがあります。Framerではユーザーブラウザ設定に応じてモーション減少オプションを適用できます。これを設定すれば、動きの多いアニメーションは無効化され、不透明度や背景色変化のような比較的安定した効果だけが維持されます。
5. ストーリーテリングに活用
アニメーションはユーザーがナラティブを追って行けるよう手助けする優れたツールです。tinyPodの事例のように、スクロールベースのアニメーションでテキストと画像を段階的に構成するとストーリー伝達力が強化されます。マイクロインタラクションもまた、重要なポイントでの関与を促す手段になることがあります。
本記事はFramer公式ブログの『11 professional animation strategies: impact on UX metrics & conversion』を翻訳・アレンジしたコンテンツです。
