【担当領域・概要】

関電不動産「CIELIA PLUS」のブランディングサイトで、フロントエンド実装を担当しました。「日々の暮らしのなかで、自分らしさを感じる小さなこだわり」を伝えるため、GSAP、Three.js、Lottieを用いたアニメーションと3D表現を実装しました。

【背景と課題】

ブランドの先進性を伝えながらも、日常に自然になじむスタイリッシュな体験をつくる必要がありました。特に、PLUS を象徴する3D表現は社内に導入事例がなく、実現可能性を判断できる人が限られていました。

【取り組み・解決策】

案件の合間に検証期間を設け、ライブラリの公式ドキュメントや表現事例を調査しました。さらにBlenderとThree.jsを実際に扱い、求める表現を実装できる状態まで試作を重ねたうえで、導入可能と判断しました。先進性を損なわず、過剰な違和感を与えないアニメーションと、PLUS をアイコニックに印象づける3D表現を実装しました。

【プロセスの特徴・成果】

得た知見はドキュメントに残し、実例共有会を通じてチームへ展開しました。個人の検証で終わらせず、次の提案や実装にも活かせる知識として残した取り組みです。サイトはCSS WinnerのSite of the Dayを受賞し、社内クリエイティブアワードでも年間一位となりました。プライムクロス公式リリース