プロジェクト概要
自動車カスタマイズブランド「MODELLISTA（モデリスタ）」の車種別（エスクァイア・ノア・ヴォクシー）特設ページにおける、カスタマイズシミュレーターの実装プロジェクトです。Photoshopのデザインデータとコーディング仕様書をもとに、フロントエンド実装（HTML/CSS/jQuery）を単独で担当しました。先行して制作されていた別車種（ルーミー）のソースコードをベースにしながら、車種ごとの独自仕様に合わせてjQueryをカスタマイズ。HTML/CSSはプロジェクトのコーディングルールを踏襲しつつ、デザインから要素を書き出してゼロから構築しています。
基本情報
プロジェクト: MODELLISTA 車種別カスタマイズシミュレーターページ
URL：
ESQUIRE（エスクァイア）https://www.modellista.co.jp/product/archive/esquire1707/special/
VOXY（ヴォクシー）https://www.modellista.co.jp/product/archive/voxy1707/special/
NOAH（ノア）https://www.modellista.co.jp/product/archive/noah1707/special/
担当領域
フロントエンドエンジニア
（Photoshopデータからの画像スライス・アセット書き出し / 既存コードの解読および仕様に合わせたjQueryのカスタマイズ / コーディング規約に則ったHTML・CSSの新規構築 / シミュレーターの動的処理・金額計算ロジックの実装）
プロジェクトの目的と課題
- 複雑なシミュレーション機能の実装: ボディカラーの変更、フロント/リアの画角切り替え、各エアロパーツの着脱に伴う画像の差し替えと、リアルタイムな「合計金額」の計算をバグなく連動させること。
- 既存コードの解読と拡張: ベースとなる先行車種（ルーミー）のJavaScriptコードの構造を正確に読み解き、新たな3車種の要件に合わせて適切にカスタマイズ（改修）すること。
- 運用性を意識したHTML/CSS構築: デザインはゼロから組み上げる一方で、クラス命名やCSS設計は先行ページのコーディングルールを厳格に踏襲し、サイト全体での保守性を担保すること。
施策とこだわったポイント
1. 既存コードを読み解き、効率的に横展開する「コードリーディング力」
ゼロからのプログラミングだけでなく、「他者が書いた既存コード（ルーミーのベースコード）の意図や構造を理解し、要件に合わせてカスタマイズする」という対応力を発揮しました。車種ごとに異なるパーツ構成や金額仕様の差分を的確に吸収し、効率的かつ正確に3車種分のシミュレーターを展開しています。
2. 車種ごとの仕様差分を吸収する、的確なjQueryカスタマイズ
シミュレーター部分のベースとなる仕組みは流用しつつも、「選択中のカラー」「現在の画角」「選択された各種パーツ」といった構成や金額設定は車種ごとに異なります。ゼロからロジックを組むのではなく、既存のjQueryコードの構造を把握した上で、各車種の独自仕様に合わせて適切にコードの書き換え（改修）を行いました。ベースの仕組みを壊すことなく、画像の切り替えや金額計算が正確に連動するよう細心の注意を払って調整しています。
3. 規約を遵守した、メンテナンス性の高いHTML/CSS構築
提供されたPhotoshopデータから自ら画像をスライス・書き出しを行い、HTML/CSSを構築しました。その際、単に見た目を合わせるだけでなく、先行ページのコーディングルール（クラスの命名規則やCSSの設計思想）を徹底して踏襲。他のエンジニアが見ても分かりやすく、後々の更新が容易な美しいソースコードに仕上げています。
成果・評価
複雑なUI要件とコーディング規約をクリアする実装力
「カラー変更」「パーツ着脱」「リアルタイム金額計算」というWebアプリケーションに近い複雑なUIを、フロントエンドの技術で実現しました。「規約を守ってゼロから正確なマークアップができる力」と「既存のJavaScriptコードを読み解き、カスタマイズできる力」という適応能力を示す実績です。
