プロジェクト概要

このプロジェクトは、「SG第44回オールスター・オートレース」の開催に伴い、公式投票サイト「AutoRace.JP投票」の利用を促進するための特設キャンペーンページ（LP）です。ターゲットは既存の投票会員および潜在的なオートレースファンであり、豪華景品やポイント付与といったインセンティブを明確に提示し、エントリー（コンバージョン）へと導くことを目的としています。

私はこのプロジェクトにおいて、フロントエンド開発全般を担当しました。情報の設計から、レスポンシブ対応、インタラクションの実装まで、ユーザー体験を最優先した開発を行いました。

採用した技術スタック

• HTML5
• CSS3
• JavaScript (ES6)
• jQuery
• Google Tag Manager (GTM)
• Adobe Fonts (Typekit) / Google Fonts

これらの技術を選定し、既存のサイト資産（共通CSS/JS）を活用しつつ、キャンペーンの要求に応えるモダンで効率的な開発環境を構築しました。

私がこだわった設計と実装

あらゆるデバイスで最適化されたレスポンシブ設計

キャンペーンの訴求力を最大化するため、スマートフォンからPCまで、あらゆるデバイスで最適な情報表示ができるようレスポンシブデザインを徹底しました。

特に、.sp_none（スマートフォン非表示）や .pc_none（PC非表示）といったユーティリティクラスを活用し、メインビジュアルや図解イメージをデバイスごとに最適なものに切り替える実装を行いました。これにより、単なるレイアウトの調整に留まらず、各デバイスの画面サイズに応じた視認性とデータ転送量の最適化を両立させています。

コンバージョンを最大化するUI/UXと導線設計

ユーザーの目的は「キャンペーンへのエントリー」です。このコンバージョンを達成するため、ユーザーの行動を予測したUI設計を行いました。

• 戦略的なCTA配置: ユーザーがキャンペーン内容を理解し、エントリーの意欲が高まるであろう複数のポイント（概要直後、詳細条件の後、景品紹介の後）に、.btn_entry クラスを持つエントリーボタン（CTA）を戦略的に配置しました。これにより、ユーザーが「エントリーしたい」と思った瞬間に即座に行動に移せるよう、機会損失を防ぐ導線を確保しました。
• 構造化された情報提供: ページ全体を #about, #prize, #terms といった論理的なIDを持つセクションに分割し、<h2> や <h3> などの見出しタグを適切に使用しました。これにより、ユーザーが情報を理解しやすくなるだけでなく、検索エンジンや支援技術に対するアクセシビリティ（a11y）も確保しました。

保守性と一貫性を担保するCSS設計

本プロジェクトでは、まず destyle.css を導入してブラウザ間のデフォルトスタイルの差異をリセットし、一貫したデザイン基盤を構築しました。

その上で、ページセクションごとのID（例: #prize）を基点としたカスケーディングを採用し、.inner（センタリング）や .btn_entry（共通ボタン）といった再利用可能な汎用クラスを組み合わせる設計にしました。これにより、スタイルの影響範囲を適切に管理し、将来のキャンペーンページ開発にも応用可能な、保守性の高いCSSを実現しました。