【ブランドLP実装】 #撮りたい髪 | ゆず油

① Project Overview（案件概要）

• クライアント: 株式会社DE 様
• 種別: 広告代理店からの受託
• 担当範囲: フロントエンド実装（デザインデータのスライス～HTML・JS実装）、OGP設定
• 期間: 2週間
• 規模: ブランド系LP 1ページ
• 公開URL: https://www.utena.co.jp/yuzu-yu/toritai-kami/

② Scope & Responsibility（担当範囲）

• デザインカンプからの忠実再現
• 多様なアニメーション実装
  • 初回アクセス時の画像スライダー（CSS Animation）
  • 初回アクセス判別cookie管理
  • 各種フェードインアニメーション
  • スクロール連動アニメーション
• OGP設定
• 全画面背景画像のiOS対応
• デザイナーとのアニメーション演出相談・提案

③ Execution Detail（実装の質）

技術スタック：

• HTML + JavaScript
• AOS – シンプルなフェードイン演出に使用
• js-cookie – 初回アクセス判定の管理
• GSAP + ScrollTrigger – スクロールや要素連動の複雑なアニメーション制御
• Countup.js – 調査レポート部分の数字カウンター演出

実装上の配慮：

• ブランドLPとして求められる表現力と実装精度の両立
• 初回表示時のスライド読込順序・速度・表示管理の最適化
• アニメーションのタイミング・速度・方向の細かな調整

④ Result / Reliability（成果と信頼）

• 納期遵守： 2週間の期間内に完了（テストアップ → FB修正 → 納品）
• 不具合ゼロ納品
• 納品直前の急な変更対応で高評価： デザイン指示のない部分を既存デザインを踏襲して調整
• 継続依頼： 以降も散発的に案件を受注

Note

実装のみの制作依頼でも、アニメーションとその表示タイミングはミーティング時に毎回デザイナーさんと意見交換しています。今回デザイナーさんから「調査レポートのところを、ハリーポッターの魔法の新聞みたいに文字が飛んでくるようなイメージで動かしたい」というお話を伺い、数字カウンターの動き方や文字が飛んでくる方向・タイミング・速さなどの具体的なアイデアをこちらから提案しました。

技術的な所では初回表示時のスライドの読込順序や速度・表示管理方法、背景画像のiOS特別対応など、目に見えない部分でも気を配る所が少なくない案件でした。