プロジェクト概要と役割

本プロジェクトは、オートレースのインターネット投票サイト「AutoRace.JP」が主催する「初夏の感謝祭」キャンペーンの特設ランディングページ（LP）制作です。既存および新規の投票会員に対し、総額100万円相当の豪華景品が当たるキャンペーンの魅力を伝え、エントリーを促進することを目的としています。

私はこのプロジェクトにおいて、フロントエンド開発全般を担当しました。デザインの意図を汲み取り、ユーザーの参加意欲を最大化するためのUI設計と実装を完遂しました。

採用した技術スタック

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

これらの技術を選定し、ブラウザ間の表示差異を吸収（destyle.cssの導入）しつつ、モダンで訴求力の高いキャンペーンページを構築しました。

こだわった設計と実装

1. デバイスに最適化されたレスポンシブUI

本キャンペーンはPC、スマートフォンの両方からのアクセスが想定されるため、レスポンシブデザインを精密に実装しました。特にビジュアルが重要なLPにおいて、デバイスごとに最適な画像を表示する設計を採用しています。

具体的には、CSSのsp_none / pc_noneといった制御クラスを用い、PCでは高解像度の横長画像、スマートフォンでは縦長の最適化された画像（例: fv.pngとfv_s.png）を明確に切り替えることで、快適なユーザー体験と表示パフォーマンスの両立を図りました。

2. 訴求力を高めるビジュアルとタイポグラフィ

キャンペーンの華やかな雰囲気を伝えるため、デザイン性の高い画像見出し（h1, h2）を採用しました。その際、alt属性に正確なテキストを設定することで、デザイン性を確保しつつもアクセシビリティとSEOに配慮したマークアップを行っています。

また、Adobe Fonts (Typekit) とGoogle Fontsを併用し、ブランドイメージに沿ったリッチなタイポグラフィを実現しました。これにより、テキスト情報も視覚的な魅力の一部として機能させています。

3. SNS拡散とデータ計測を見据えた設計

キャンペーンの認知度を最大化するため、SNSでのシェアを意識したOGP（Open Graph Protocol）およびTwitter Cardメタタグを詳細に設定しました。これにより、LINEやX（旧Twitter）などで共有された際に、魅力的な画像とタイトルが表示され、クリック率の向上に貢献します。

さらに、Google Tag Managerを導入し、アクセス解析や広告効果測定タグを一元管理できる環境を構築しました。これにより、キャンペーンのPDCAサイクルを技術面からサポートします。

4. ユーザー導線を維持するUI設計

キャンペーンページ内には、会員情報の確認ページなど、AutoRace.JPの既存サイトへのリンクが含まれます。これらの外部リンクにはtarget="_blank"を適切に設定し、ユーザーが現在のページから離脱することなく関連情報を確認できるように配慮しました。エントリーフローを妨げない、スムーズなユーザー体験を設計しています。