【企画LP実装】MOWTTAINAI|カンパンの賞味期限切れ、モウったいない

① Project Overview（案件概要）

• クライアント: 株式会社DE様
• 種別： 広告代理店からの受託
• 担当範囲：フロントエンド実装
• 期間：10日
• 規模感：ブランド系LP 1枚
• 公開URL：https://kuradashi.jp/pages/mowttainai-kanpan/

② Scope & Responsibility（担当範囲）

• デザインカンプからの忠実再現
• レスポンシブ対応（PC / SP）
• パロディ元デザイン（同一ブランドのWebサイトメニュー・ナビ）の忠実再現
• ハンバーガーボタンの不具合修正対応

③ Execution Detail（実装の質）

技術スタック：

• HTML
• CSS (SCSS)
• JavaScript
• Swiper.js
• AOS.js
• アコーディオン機能・CSSアニメーションは自作実装

コーディング規約：

• 一般的な整備範囲（styleのHTML分離、JSのfunction化による関心分離）
• セマンティック構文の使用
• セクション間の行間確保、ネスト階層の視覚化

品質管理：

• HTMLHint等のVS Codeプラグインによるバリデーション
• 企画型LPとして、納品後の修正を想定しない範囲での保守性確保

④ Result / Reliability（成果と信頼）

• 納期遵守
• 納品後にマークアップの誤植が発覚するも、当日中に修正・再納品
• 後入れ要素追加・後からの公開セクションの事前対応により高評価を獲得
• 以降も年数件の継続取引につながる
• パロディ元デザインの忠実再現とハンバーガーボタン不具合修正を実現

Note

細く長くお付き合いさせていただいている、DE様からの実装案件です。
技術的な実装としては特筆すべきことはありませんが、写真の後入れとセクションの後日公開という課題に対応しました。写真の撮影スケジュールの都合で実際に使う製品画像などが仮のものの状態で着工し、写真がくるまでに実装を終えておいて受領後にすぐ反映・テストアップという体制でした。 後日公開のセクションは差分として予め作成・チェックいただき、画像の差し替えのみで済むように対処しています。納品間近に1点追加もありましたが、期間内で対応しました。

広告代理店様はどこも忙しく、そもそも納期が短くならざるを得ない事に加えて毎回決まった手順でのやりとりやバケツリレーでの製作というのが難しいです。一方で、誰しも十分な余裕がない中で「一番最後に作業する実装担当の人が出来るだけ多く時間をとれるように工夫しよう・出来るだけ早くデザインを終わらせてあげよう」と気にかけてくれるデザイナーと一緒に仕事ができるのはとてもありがたい話です。

今回は失敗もありました。納品後に発覚した、htmlタグのタイポ (誤植) です。表示自体に問題はないのですが職人・プロとしての詰めの甘さを認識し、以降すべての案件で「自分・人間の目に頼らない」外部的な再発防止策を導入しています。

※再発防止策の導入：

• Linter・バリデーションツールの活用
• 小規模案件：HTMLHint等のVS Codeプラグイン
• 大規模案件：バリデーションツール＋バリデーションルール定義による機械的チェック体制