プロジェクト概要
AutoRace.JP様の「秋のポイントカーニバルキャンペーン」のランディングページ（LP）制作を担当しました。このプロジェクトの目的は、既存の投票会員様に向けて、秋の大型キャンペーンへのエントリーを促進し、投票額の向上とLINE連携の登録を促すことです。ターゲットユーザーが直感的にメリットを理解し、迷わずアクション（エントリー）を完了できるような情報設計とUI実装を目指しました。
採用した技術スタック
このプロジェクトでは、以下の技術スタスタックを選定し、安定的かつ保守性の高いフロントエンド環境を構築しました。
- HTML5
- CSS3
- JavaScript (ES6+)
- jQuery
- Adobe Fonts (Webフォント)
こだわった設計と実装
キャンペーンLPとして「分かりやすさ」と「コンバージョンへの導線」を最重要視し、以下の点にこだわって設計・実装しました。
1. 保守性と拡張性を考慮したCSS設計
将来のキャンペーンでの再利用や軽微な修正に迅速に対応できるよう、CSS設計にBEM（Block, Element, Modifier）の概念を導入しました。クラス名を「p-（Project）」「c-（Component）」「u-（Utility）」といったプレフィックスで分類し、それぞれの役割と影響範囲を明確化しています。
この設計により、スタイルの競合を防ぎ、コードの可読性と保守性を大幅に高めることができました。
2. パフォーマンスとUIを両立するレスポンシブ対応
スマートフォンからPCまで、あらゆるデバイスで最適な閲覧体験を提供するために、精密なレスポンシブデザインを実装しました。
特にヒーロービジュアルや主要なイラストでは、単なる画像の拡縮ではなく、<picture>タグを積極的に活用しました。これにより、デバイスの画面幅に応じて最適化された画像（PC用/SP用）を配信し、特にスマートフデバイスでの表示速度（LCP）とUIの質を向上させる工夫をしています。
3. アクセシビリティと論理性を担保するHTMLマークアップ
ユーザーが情報に正しくアクセスできるよう、セマンティックなHTMLマークアップを徹底しました。<header>, <main>, <article>, <section> などのタグを適切に配置し、文書構造を明確にしました。
また、「LINE連携の手順」や「応募条件」など、ユーザーが順を追って理解する必要がある箇所では、<ol>（順序付きリスト）を使用し、情報の論理的な流れをHTML構造レベルで担保しました。
4. コンバージョンを最大化する導線設計
キャンペーンLPのゴール（エントリーとLINE連携）を達成するため、ユーザーのアクションを促す導線設計に注力しました。キャンペーンのメリット（当選確率アップ、LINE連携での特典）を視覚的に分かりやすく提示し、応募フローを図解することで、ユーザーが感じる心理的ハードルを低減しました。エントリーボタンは適切なタイミングで複数回配置し、ユーザーが「エントリーしたい」と思った瞬間に即座に行動に移せるよう配慮しました。
