プロジェクト概要

本プロジェクトは、オートレースの公式投票サイト「AutoRace.JP」における「オトもっちカップ」開催記念キャンペーンの特設ランディングページ（LP）制作です。目的は、レースの開催を告知し、既存および新規の投票会員に対してエントリーと期間中の投票（1,000円以上）を促進することにありました。

私はこのプロジェクトにおいて、フロントエンド開発全般を担当しました。ターゲットユーザーであるオートレースファンに対し、キャンペーンの魅力をストレートに伝え、スムーズなエントリー導線を確保するUI/UXの設計・実装を行いました。

採用した技術スタック

• HTML5
• CSS3
• JavaScript (jQuery)
• レスポンシブデザイン (メディアクエリ)
• リセットCSS (destyle.css)
• Webフォント (Google Fonts, Adobe Fonts)
• GTM (Google Tag Manager)

これらの技術を選定し、モダンで効率的な開発環境を構築しました。特に、ブラウザ間の表示差異を最小限に抑えるdestyle.cssの採用や、デザインレギュレーションに沿ったWebフォントの導入を徹底しました。

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

あらゆるデバイスに対応するレスポンシブ設計

オートレースファンの閲覧環境は、PCでの詳細な情報確認から、スマートフォンでの移動中のエントリーまで多岐にわたります。そのため、meta viewport設定を最適化した上で、メディアクエリを駆使したレスポンシブデザインを精密に実装しました。

sp_noneやpc_noneといった明快なCSSクラス設計により、PCとスマートフォンで表示すべき情報や画像を切り替え、各デバイスで最適な情報量と操作性を実現しています。

アクセシビリティとSEOを考慮したマークアップ

キャンペーン情報を正確に伝えるため、h1, h2, sectionといったセマンティックなHTMLタグを適切に使用し、文書構造を明確にしました。これは、検索エンジンがコンテンツを正しく理解するため（SEO対策）だけでなく、スクリーンリーダーなどを使用するユーザーのアクセシビリティ（a11y）を確保するためにも不可欠な配慮です。

また、og:titleやtwitter:cardなどのOGPメタデータを網羅的に設定し、SNSでのシェア（拡散）時にもキャンペーンの魅力が正しく伝わるよう設計しました。

運用と計測を支える技術基盤

キャンペーン施策は、実施後の効果測定が重要です。将来的な分析や広告タグの追加・変更に迅速に対応できるよう、Google Tag Manager (GTM) を導入しました。これにより、マーケティング部門がHTMLを直接編集することなく、計測タグを柔軟に管理できる運用体制を構築しました。