制作事例

SAK University ブランドストーリーページ

株式会社エスアイイー

ブランドサイト

制作期間 3ヶ月～6ヶ月

担当領域コーディング・実装 / Rive

概要

株式会社エスアイイー様よりご依頼をいただき、1964年に設立された英国の研究型国立大学・エセックス大学と提携し設立した「SAK University 東京イノベーションキャンパス」のブランドサイトにて、キービジュアルを中心とした対象ページのアニメーション表現を担当しました。

今回はアニメーションの表現手法として、Lottie、Blender/WebGL、Rive など複数のツールを検討した中で、Webとの親和性や直感的な操作性の高さから Rive を選定しました。

アニメーション制作においては、キービジュアルでの吸い込まれるような動きや、クライアントのご要望であったレイヤー感のある奥行き表現を実現するため、細部にまでこだわった演出を行いました。
スクロール時の動きに関しては、可読性とデザインの整合性を両立させることが課題でした。そこで、要素が元の位置に戻る独自のパララックス効果を実装し、スクロール中にのみ奥行きを感じさせる演出を成立させています。

背景のグラデーションがかかったパスは SVG によって制御しており、一部の記述ミスでも動作しなくなる繊細な設計です。形状が複雑になるほどコードも長くなりますが、今回の実装を通じて、SVGの奥深さと可能性を改めて実感することができました。

こうした試行錯誤を経て、IT業界の持つ将来性と、学生たちのエネルギーや期待感を調和させたサイト表現に辿り着くことができました。

株式会社エスアイイー https://sie.co.jp/