こんにちは、エンジニアの筒井です。
社内では、webのコーディングやインタラクションまわりを中心に担当しています。
今回の記事では、実際にプロジェクトで実装したhoverを簡単にご紹介します。
1.【CSS】keyframe
hoverすると、ぽよぽよ動くアイコン。
cssのkeyframeを使って実装しています。
2.【JS】簡単なアニメーションの組み合わせ
シンプルなアニメーションの組み合わせですが、動かすプロパティ（opacity, background-color, scale, rotation）を多くして複雑に見せることを意識しています。
BALANCeでは、このような複数のアニメーションのタイムラインを、gsapというアニメーションのライブラリを使って作成しています。
実例：QUOITWORKS Inc. / PERSOL Work-Style AWARD 2021
関連記事：点線が描かれるようなアニメーションの方法
3.【JS】マスクアニメーション
ポイントは、以下の2つです。
・テキストの親要素（div）にoverflow: hiddenをかけてマスクを作る
・テキストを上方向（y: -100%）に動かす→下にセット（y: 100%）→元の位置に戻す（y: 0）
こちらもgsapを使用しています。
実例：株式会社ニューバランス ジャパン / 115周年 ブランディングサイト
4.【JS】吸い付くボタン
Awwwardsなど受賞してるクリエイティブなwebサイトで、よく見かけるボタンです。
LPのコンバージョンボタンに、こちらを実装しました。
ポイントは、以下の通りです。
・requestAnimationFrameでマウスとボタンの中心間の距離を監視
・一定距離以上近づくと、吸い付く動きが発火
・吸い付く動きは、ボタンのx座標とy座標を、easingをかけてマウスの座標の方へ少し動かすことで実現
・発火と同時に、隠してた黒色背景も出す（requestAnimationFrameではなく、gsapで）
codropsに素晴らしいチュートリアルがあるので、ご参考ください。
実例：株式会社ニューバランス ジャパン / 115周年 ブランディングサイト LP
5.【JS】画像+枠のアニメーション
こちらも、2のように動かす要素を増やした事例。
画像をスケールアップさせるだけなく、枠もスケールダウンさせることで、少しリッチな印象に。
6.【JS】draw SVG
gsapのdrawSVGというモジュールを使って実装しています。
内部的には、svgのstroke-dashoffset属性とstroke-dasharray属性をコントールすることで、アニメーションを実現しています。
実例：pactera-technology-japan / コーポレートサイト
モーションの制作事例
株式会社アカツキ
| 項目 | 内容 |
| 業種・業界 | 情報・通信業 |
| 提供サービス | コーポレートサイト |
| 課題・目的 | UXを重視したコーポレートサイトへ刷新したい |
| 成果・効果 | モダンなUXを実現し、ファンドの先進的なブランドイメージと快適なユーザー体験を実現 |
アカツキの投資ファンド「AET FUND」のコーポレートサイトをリニューアルしました。かっちりした印象のサイトに寄せるのではなく、UXのよいモダンなサイトを目指しました。
フィードバック感のあるインタラクションやシームレスな画面遷移、モーショングラフィクスを取り入れたメインビジュアルを実装し、閲覧体験を通じて先進性が伝わる設計にしています。
さらに、UIアニメーションやモーショングラフィクス、3D表現・WebGL開発を活用することで、単なる情報整理にとどまらない表現を取り入れました。投資ファンドとしての信頼感を意識しながら、新しさも感じられる構成としています。
事例の詳細についてはこちらからご確認ください。
株式会社ニューバランス ジャパン
| 項目 | 内容 |
| 業種・業界 | スポーツシューズメーカー |
| 提供サービス | キャンペーンサイト、CMS機能 |
| 課題・目的 | フォトグラファーの世界観を高画質に伝えつつ、大量画像でもスムーズかつ更新しやすいサイトにしたい |
| 成果・効果 | 高速表示する技術と簡易CMSを実装し、ブランドの世界観をスムーズに伝えつつ、柔軟な更新体制を実現 |
ニューバランス ジャパンの115周年記念キャンペーンサイトを制作しました。115周年の特設サイトとして、ブランドの世界観を伝える表現力と、更新のしやすさの両立が求められていました。
サイトでは、115名分の高画質ポートレートを用いながらも表示速度の低下を抑える工夫を施し、モーションデザインではリズム感やイージングを細かく調整することで、心地よいアニメーション表現を実装しています。
さらに、Googleスプレッドシートに入力した内容を反映できる簡易CMS機能も実装し、大量画像への対応、ブランド表現、公開後の運用性まで考慮したサイトに仕上げています。
事例の詳細についてはこちらからご確認ください。
株式会社スクウェア・エニックス
| 項目 | 内容 |
| 業種・業界 | ゲーム・エンタテインメント業界 |
| 提供サービス | UIアニメーション、3D表現 |
| 課題・目的 | 「FINAL FANTASY XV ROYAL EDITION」の世界観を表現した特設サイトを制作したい |
| 成果・効果 | クリスタルの破片が舞う演出を施したバナー表現により、海外Webメディア掲載やアワード受賞を獲得 |
「FINAL FANTASY XV ROYAL EDITION」の発売に合わせて公開された特設サイトの制作を担当しました。作品の魅力や世界観を伝えるため、印象的なシーンとコピーで構成したバナー画像を約30点デジタルメディアに出稿し、その表現の中にクリスタルの破片が舞う演出を取り入れています。
UIアニメーションや3D表現、独自UIを実装し、静的な商品紹介ではなく、作品への没入感を高めるリッチな体験設計としました。こうした表現設計により、海外のWebメディア掲載やアワード受賞にもつながっています。ビジュアル表現と世界観訴求の両面が印象に残る事例です。
事例の詳細についてはこちらからご確認ください。
株式会社weroll
| 項目 | 内容 |
| 業種・業界 | 広告・デジタルマーケティング |
| 提供サービス | モーショングラフィクス、コーポレートサイト |
| 課題・目的 | ブランドイメージに合うサイトを制作し、更新しやすい仕組みを整えたい |
| 成果・効果 | 有機的に回転する動きを取り入れたサイトを制作し、WordPressで更新性を向上 |
東京のマーケティングエージェンシー「株式会社weroll」のコーポレートサイトを制作しました。コーポレートサイトは長期運用が前提になるため、印象に残るデザインと、公開後に自社で更新しやすい運用性の両立が求められやすいです。
そのため、CMSとモーショングラフィックスを組み合わせた制作を提案し、今回はWordPressで構築しました。ロゴをはじめ、サイト内のさまざまな箇所に有機的に回転する動きを取り入れることで、社名に含まれる「roll」を印象づける演出に仕上げています。
見た目だけでなく、運用面にも配慮した使いやすいサイトです。
事例の詳細についてはこちらからご確認ください。
エフコープ生活協同組合
| 項目 | 内容 |
| 業種・業界 | 小売業 |
| 提供サービス | モーショングラフィクス、3D表現 |
| 課題・目的 | サステナブルの取り組みに関心を持ってもらえるサイトを制作したい |
| 成果・効果 | 取り組みを一つの街に見立てて紹介するサイトを制作し、親しみを感じる動きを実装 |
エフコープ生活協同組合のサステナブルな取り組みを紹介するブランドサイトを制作しました。社会的活動を文章だけで紹介すると単調になりやすいため、訪問者が能動的に体験できるしかけを盛り込み、取り組みへの理解を深めやすい構成にしています。
具体的には、エフコープの多様な活動を一つの街にぎゅっと詰め込んで表現しました。シンボルであるりんごマークをモチーフに、親しみやすく可愛らしい動きを多数実装しています。
特にスマートフォンでは、地図アプリから街を覗くような感覚で閲覧できるよう工夫し、街を巡るように楽しく見られる快適な回遊設計としました。
事例の詳細についてはこちらからご確認ください。
株式会社NTTドコモ
| 項目 | 内容 |
| 業種・業界 | 通信業 |
| 提供サービス | 診断コンテンツ |
| 課題・目的 | 訴求力の高い診断コンテンツを通じて、共感を軸にした新しいスマホ選び体験を提供したい |
| 成果・効果 | ユーザーの声を活かした共感ベースの診断と3D空間演出で、高いUXと自然な購入導線を実現。 想定以上のROIを達成し、キャンペーン継続決定・追加施策にも発展 |
NTTドコモの診断キャンペーンサイト「声から選ぶスマホ店」を制作しました。Androidユーザーのリアルな声から共感できる意見を選ぶと、自分に合うスマホが提案される体験を設計し、3D空間上でのリッチな診断コンテンツとして実装しました。
ゲーミフィケーションやSNS連携、独自UIの実装なども取り入れ、診断体験を中心とした構成にしています。LPではバーチャルストアへの導線やAndroid機能の紹介も盛り込み、期待以上のROIを達成しました。
冬と夏に実施されたキャンペーンで評価を得たことから、追加キャンペーンの実施にもつながっています。
事例の詳細についてはこちらからご確認ください。
OCEAN PICTURES
| 項目 | 内容 |
| 業種・業界 | 映像制作 |
| 提供サービス | CMS機能、見積もりシミュレーター |
| 課題・目的 | デザインを一新し、実績増加に対応する更新しやすいサイトへリニューアルするとともに、見積もりシミュレーターで商談・営業・サポートの負担を軽減しCV率を向上させたい |
| 成果・効果 | UX・更新性の向上により社内満足度が高まり、見積もりシミュレーター導入で営業対応時間を約25％削減、CV率を約15％向上 |
映像制作会社OCEAN PICTURESのコーポレートサイトにおける、デザイン・開発・CMS構築を担当しました。7年ぶりのリニューアルで、デザイン刷新と更新しやすさの両立が求められていました。
そのため、ポップなイラストや遊び心のあるオープニングアニメーションを取り入れ、チームの雰囲気が伝わるサイトに仕上げています。ワークフロー紹介ページでは、打ち合わせから制作・納品までの流れを整理し、わかりやすい導線を設計しました。
さらに、CMS運用を見据えた管理画面のカスタマイズも行い、印象面だけでなく、実績やメンバーの増加にも対応しやすい構成にしています。
事例の詳細についてはこちらからご確認ください。
株式会社イエローハット
| 項目 | 内容 |
| 業種・業界 | カー用品販売 |
| 提供サービス | PRゲームコンテンツ |
| 課題・目的 | 交通安全の啓蒙と企業PRにつながる、ゲーム性のあるキャンペーンを実施したい |
| 成果・効果 | ゲームを通して「かもしれない運転」への理解を促進し、Xでは1000万を超えるインプレッションを獲得 |
イエローハットの交通安全キャンペーンサイトにおけるPRゲームコンテンツを制作しました。「かもしれない運転」をテーマに、車を操作しながら障害物を避けるシンプルなゲームを実装し、体験を通じて交通安全の大切さを伝える設計としています。
さらに、親しみやすい公式キャラクターを使ったグラフィックと、Xでのフォロー＆リポスト施策を実施しました。その結果、SNSキャンペーンでは1,000万を超えるインプレッションを獲得しています。ゲーム体験を通してテーマへの理解を促しながら、SNS施策にも展開し、認知拡大にもつなげた事例です。
事例の詳細についてはこちらからご確認ください。
最後に
hoverは、毎回どうしようか悩みますが、デザインにはまって、お客さんに喜んでもらえたときはとても嬉しいです。
私もバリエーションを増やしていこうと思います。
最後までお読みいただきありがとうございました！
こちらの記事では、ViteでWordPressの構築環境を作る方法や、JavaScriptでスロットゲームを作る方法についても解説しています。ぜひこちらもご確認ください。
DOWNLOAD
Webサイト制作サービス資料を無料ダウンロード
フォームに必要事項をご入力いただくと、ご登録のメールアドレス宛に資料のダウンロードURLをお送りします。
送信ありがとうございました
ご登録のメールアドレス宛に、資料のダウンロードURLをお送りしましたのでご確認ください。
WRITTEN BY
tsutsui
