プロジェクト概要

AutoRace.JP様の「オータムキャンペーン（11月）」の告知とエントリー受付を目的とした、ランディングページ（LP）のフロントエンド開発全般を担当しました。ターゲットであるオートレースファンおよび投票会員様に対し、キャンペーンの魅力を直感的に伝え、スムーズなエントリーを促すUI/UX設計を目指しました。

採用した技術スタック

• HTML5
• CSS3 (Sass/SCSS)
• JavaScript (ES6+)
• jQuery
• Adobe Fonts (Webフォント)
• Google Tag Manager (GTM)

これらの技術を選定し、保守性とパフォーマンスを両立させたモダンで効率的な開発環境を構築しました。

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

保守性と拡張性を考慮したCSS設計

将来のキャンペーン展開や変更に迅速に対応できるよう、CSS設計にはBEM（MindBEM/FLOCSS）の概念を導入しました。具体的には、クラス名を以下のように明確に分離しています。

• Project (p-): ページ固有のレイアウト（例: p-hero, p-courses__item）
• Component (c-): サイト全体で再利用可能なUIパーツ（例: c-button, c-card）
• Utility (u-): 汎用的な補助スタイル（例: u-pc-hidden, u-sp-hidden）

この設計により、スタイルの競合を防ぎつつ、コードの可読性と再利用性を大幅に高め、堅牢なスタイリングを実現しました。

デバイスに最適化されたレスポンシブ実装

スマートフォンからPCまで、あらゆるデバイスで最適な情報体験を提供するため、モバイルファーストなレスポンシブデザインを精密に実装しました。

特にメインビジュアル（ヒーローセクション）では<picture>要素を採用しました。これにより、デバイスの画面幅（ブレークポイント）に応じて、PC用とスマートフォン用に最適化された異なる画像を効率的に配信し、不要なデータ転送を削減しています。

ユーザー体験（UX）とパフォーマンスへの配慮

ユーザーが迷わず目的（エントリー）を達成できるよう、CTA（Call To Action）ボタンをページの上部と中部に効果的に配置し、コンバージョンへの導線を確保しました。

また、ページの初期表示速度を向上させるため、<script>タグにはdefer属性を付与しました。これにより、HTMLの解析をブロックすることなくJavaScriptを非同期で読み込み・実行させ、ユーザーの体感速度（Core Web Vitals）の向上に配慮しました。

タイポグラフィによるブランディング訴求

キャンペーンの信頼感と魅力を視覚的に伝えるため、Webフォント（Adobe Fonts）を導入しました。デザインの意図を正確に反映したタイポグラフィを実装し、ブランドイメージの向上に貢献しました。