業務実績2023年9月〜2025年3月（約1年半）

自動車関連企業 コーポレートサイト シリーズ横展開

フロントエンド設計・実装（全サイト共通）

DockerGulpHTML/CSSJavaScriptNunjucksSassSplide

自動車ディーラーグループのコーポレートサイトを、共通フレームワークをベースに複数サイト横展開したプロジェクトです。約1年半にわたり、多数のコミットを積み重ねました。

シリーズ初期サイトで確立した設計をベースに、各店舗の要件に合わせてカスタマイズ。開発を重ねる中でビルド環境自体も段階的に進化させ、CommonJS から ESM への移行、node-sass から Dart Sass への切替、jQuery 依存の削減と Splide への移行を実現しました。

主な実装内容

  • 全ページのフロントエンドコーディング（トップ、会社情報、店舗、アフターサービス、車両紹介、採用など）
  • KV動画実装（YouTube / mp4 対応）
  • 郵便番号による店舗検索機能
  • Critical CSS のインライン出力（Gulp処理による自動化）
  • 採用サイトを含む2サイト構成の店舗対応
  • 外部フォームサービス連携

開発環境の段階的進化

  • Gulp: CommonJS → ESM 移行
  • CSS: node-sass → Dart Sass（@import → @use）
  • スライダー: jQuery → Splide / GLightbox
  • Docker 開発環境の導入（後期サイト）

課題

共通フレームワークで複数サイトを横展開しつつ、開発環境も段階的にモダナイズすること

アプローチ

初期サイトの設計を基盤に各店舗要件へカスタマイズ。Gulp ESM移行・Dart Sass・Splideへの段階的な技術刷新を並行実施

成果

複数サイトを効率的に横展開。CJS→ESM、node-sass→Dart Sass、jQuery→Splideの技術移行を完了
Outcome: 複数サイトを共通フレームワークベースで効率的に横展開。開発環境の段階的モダナイズを同時に達成。