旧でも新でも完全メシ 企画LPメインビジュアルの切り抜き画像。白いお皿の上に旧新ふたつ製品パッケージが載せられ、背景ではKANZEN MEALという文字と完全メシのブランドロゴが上下に揺れながら横に流れている。

【企画LP実装】旧でも新でも完全メシ

Web: 実装
使用技術: HTML JavaScript

① Project Overview（案件概要）

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

② Scope & Responsibility（担当範囲）

  • デザインカンプからの忠実再現
  • 複雑なアニメーション実装
    • 初回アクセス時のLoading画面
    • 初回アクセス判別cookie管理
    • ランダム範囲で上下に動きながら流れていく文字のアニメーション
    • 「配膳されるように、お皿 => 製品の順番で飛んできて重なる」アニメーション
    • タイピングアニメーション
    • スクロール連動アニメーション
  • link:preload属性およびloading表示用のファイル読込順序の管理
  • OGP設定

③ Execution Detail（実装の質）

技術スタック：

  • HTML + JavaScript
  • js-cookie – 初回アクセス判定の管理
  • GSAP + ScrollTrigger – 配膳アニメーションやスクロール連動の複雑なアニメーション制御
  • iTyped.js – タイピングアニメーション演出

実装上の配慮：

  • ブランドLPとして求められる表現力と実装精度の両立
  • ファーストビューのランダムに動きながら流れていく文字の実装
  • ScrollTriggerのアニメーション開始・終了位置の正確な制御
  • 読込順序の最適化によるスムーズなLoading体験

④ Result / Reliability（成果と信頼）

  • 納期遵守：2週間の期間内に完了（追加依頼・バグ修正含む）
  • 不具合ゼロ納品（納品前に発見したバグは当日中に修正）
  • クライアント評価：ランダム範囲で上下する文字の実装とFB反映、バグ修正のレスポンス速度を高く評価
  • 継続依頼：LP実装案件を引き続き散発的に受注

Note

完全メシ ボロネーゼパスタのパッケージ刷新時の、フードロス削減企画LPです。

実装作業自体は順風満帆だったものの、案件後半に急な要素の追加と1件のバグ修正がありました。追加要素は「続きがあるよ、画面をスクロールしてね」という意図を伝える、Scrollの文字と収縮・拡大しながら上下を行き来している〇の黄色い要素です。2~30分ぐらいで作れる簡単な要素なのですが、要望を伺った時の「スクロールを示すこういうやつが欲しい」ということばと参考画像をスクロールバーのカスタム+アニメーション付けと勘違いして余計な工数を割いた事を昨日のことのように思い出します。

バグ修正は、納品前のクライアント確認中に見つかったバグです。PCで特定の環境・条件でお皿と製品のアニメーション停止位置がズレる、という不具合でした。原因はその条件でScrollTriggerのアニメーション開始・終了位置の再取得が行われないことだったのですが、無事原因を特定して当日中に修正・再度テストUPを行いました。