プロジェクト概要と役割

このプロジェクトは、AutoRace.JP様が主催する「オリジナルケンコバ軍団Tシャツプレゼントキャンペーン」の特設ランディングページ（LP）制作です。オートレースファンおよびケンドーコバヤシ様のファン層をターゲットに、キャンペーンの詳細を分かりやすく伝え、公式重勝式の購入やX（旧Twitter）でのエンゲージメント（フォロー、リポスト）を促進することを目的としています。

私はこのプロジェクトにおいて、フロントエンド開発全般を担当しました。提供されたデザインカンプに基づき、HTML、CSS、JavaScriptを用いて、PCとスマートフォンの両デバイスで最適に表示・機能するWebページを精密に実装しました。

採用した技術スタック

• HTML5
• CSS3
• JavaScript (jQuery)
• Google Tag Manager
• destyle.css (CSSリセット)
• Google Fonts

これらの技術を選定し、モダンブラウザに対応しつつも、迅速な開発と安定した動作を実現する効率的な開発環境を構築しました。

こだわった設計と実装

デバイスを問わないUI/UX設計

あらゆるユーザーがストレスなく情報にアクセスできるよう、レスポンシブデザインを徹底しました。CSSのクラス（.sp_none, .pc_noneなど）を駆使し、画像の切り替えやレイアウトの調整をデバイスごとに行い、スマートフォンからPCまで、最適なブラウジング体験を提供します。

また、埋め込まれたYouTube動画が親要素の幅に合わせて適切にリサイズされるよう、CSSでアスペクト比を保持する実装を行い、リッチコンテンツの表示崩れを防ぎました。

アクセシビリティと保守性への配慮

キャンペーンの参加ボタン（.btn_entry）や主要なビジュアルには、スクリーンリーダー利用者に配慮し、内容を正確に伝えるためのalt属性をすべて付与しました。これにより、基本的なアクセシビリティ（a11y）を確保しています。

CSSの基盤としてdestyle.cssを導入し、ブラウザ間のデフォルトスタイルの差異を吸収しました。これにより、意図した通りのデザインを一貫して適用できる、堅牢なスタイリング基盤を構築しています。また、.inner（コンテンツラッパー）や.btn_entry（共通ボタン）など、再利用可能なCSSクラスを設計することで、コードの冗長性を排除し、保守性を高める工夫をしました。

効率的なイベント処理と分析基盤

本プロジェクトでは、DOM操作とイベントハンドリングを効率的に実装するため、広く普及しているjQueryライブラリを採用しました。これにより、複雑なUIの制御を少ないコード量で実現しています。

さらに、Google Tag Manager（GTM）を導入し、マーケティング施策の効果測定やユーザー行動の分析が行える基盤を整えました。開発者がコードを直接編集することなく、分析タグの管理・更新を行える環境を提供しています。