プロジェクト概要と役割

本プロジェクトは、オートレースの「浜松アーリーレース AutoRace.JP投票杯 オトもっちカップ」の開催を記念し、投票とエントリーを促進するための特設キャンペーンLP（ランディングページ）です。ターゲットは既存のオートレースファンおよびAutoRace.JP投票会員であり、キャンペーンの魅力を端的に伝え、エントリーボタンへスムーズに誘導することを目的としました。

私はこのプロジェクトにおいて、フロントエンド開発全般を担当しました。ビジュアルデザインの意図を正確に再現しつつ、技術的な観点からユーザー体験と運用効率を高めるための設計・実装を行いました。

採用した技術スタック

• HTML5
• CSS3
• JavaScript (ES6+)
• jQuery
• Destyle.css (リセットCSS)
• Google Tag Manager
• Adobe Fonts / Google Fonts

jQueryを採用することで、レガシーブラウザへの配慮と迅速なDOM操作を実現しつつ、モダンなCSS設計やパフォーマンス施策を組み合わせ、安定的かつ効率的な開発環境を構築しました。

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

デバイスを問わないレスポンシブ対応

スマートフォンからPCまで、あらゆるデバイスでキャンペーンの魅力が最大限伝わるよう、精密なレスポンシブデザインを実装しました。特に、sp_noneやpc_noneといった切り替えクラスを設計し、PC用とスマートフォン用で表示する画像や改行位置を出し分けることで、各デバイスの画面幅に最適化されたレイアウトと可読性を確保しました。

セマンティクスとSNS拡散性を考慮した構造設計

サイトの構造設計において、section, footer, figureといったHTML5のセマンティックタグを適切に使用しました。これにより、検索エンジンや支援技術がコンテンツの文脈を正しく理解できるよう配慮しています。

また、キャンペーンの拡散性を高めるため、OGP（Open Graph Protocol）およびTwitter Cardsのメタデータを詳細に設定しました。SNSでシェアされた際に、意図したサムネイル画像や説明文が正確に表示されるよう制御し、流入率の向上を図りました。

表示速度を意識したパフォーマンス施策

ユーザーの離脱を防ぎ、快適なブラウジング体験を提供するため、ページの表示速度（Core Web Vitals）を意識した実装を行いました。具体的には、外部リソースであるWebフォント（Google Fonts, Adobe Fonts）の読み込みにおいて、<link rel="preconnect"> タグによるDNS解決の高速化と、CSSの display=swap 指定によるレンダリングブロックの回避を実装し、テキストの早期表示を実現しました。

保守性と一貫性を高めるCSS設計

まず、モダンなリセットCSSである「Destyle.css」を導入し、ブラウザ間のデフォルトスタイルの差異を吸収。一貫したスタイリングの基盤を構築しました。その上で、inner（中央寄せコンテナ）やbtn_entry（共通ボタン）のような再利用可能なユーティリティクラスを設計し、CSSの記述量を削減するとともに、サイト全体のデザイン統一性と保守性を高めました。