プロジェクト概要と役割
本プロジェクトは、オートレース（AutoRace.JP）の公式マスコットキャラクター「オトもっち」の人気投票イベントをホストするための、特設キャンペーンサイトです。オートレースファンやキャラクターファンをメインターゲットに、投票の促進と結果発表、さらには関連するプレゼントキャンペーンへの誘導を目的としています。
私はこのプロジェクトにおいて、フロントエンド開発全般を担当しました。情報の設計から、ユーザー体験（UX）を考慮したUIの実装、そしてデバイスを問わないアクセシビリティの確保まで、一貫して手掛けました。
採用した技術スタック
- HTML5
- CSS3 (destyle.cssによるリセットを含む)
- JavaScript
- Google Tag Manager (GTM)
- Google Fonts
- Adobe Fonts (Typekit)
これらの技術を選定し、ブラウザ間の表示差異をなくしつつ、ブランドイメージに沿った豊かな表現が可能な、モダンで効率的な開発環境を構築しました。
私がこだわった設計と実装
1. アクセシビリティとSEOを両立するHTML構造
ユーザーや検索エンジンがコンテンツの意味を正しく理解できるよう、セマンティックなHTMLマークアップを徹底しました。<main>, <section>, <h2>, <figure>, <dl>といったタグを適切に使い分け、論理的な文書構造を設計しました。
また、全ての画像に適切なalt属性を付与し、スクリーンリーダーを利用するユーザーにも情報が正確に伝わるよう配慮しました。これはアクセシビリティ（a11y）の確保に直結する重要な実装です。
2. デバイスに最適化されたレスポンシブデザイン
本サイトはキャンペーンの特性上、スマートフォンからのアクセスが大多数を占めると想定しました。そのため、モバイルファーストの思想に基づき、PCからスマートフォンまで、あらゆるデバイスで最適なレイアウトと操作性を実現するレスポンシブデザインを精密に実装しました。
特にファーストビュー（FV）や主要な画像については、<picture>タグを活用しました。これにより、画面サイズに応じて解像度やアスペクト比の異なる画像を出し分け、不要なデータ転送を抑えつつ、各デバイスで最も美しいビジュアル体験を提供できるようにしています。
3. SNSシェアを最大化するOGP設計
キャンペーンの成功にはSNSでの拡散が不可欠です。私は、X（旧Twitter）やFacebookなどでユーザーがシェアした際に、意図したタイトル、説明文、そして魅力的な画像（og:image）が表示されるよう、OGP（Open Graph Protocol）およびTwitter Cardsのメタデータを詳細に設定しました。これにより、SNS上でのクリック率を高め、サイトへの流入を最大化する設計としています。
4. サイトパフォーマンスとデザイン品質の両立
ユーザー体験を損なわないよう、ページの表示速度にも配慮しました。まず、destyle.cssを導入してブラウザ間の不要な表示差異をリセットし、一貫したスタイリングの基盤を構築しました。その上で、Noto Sans JPやPoppinsといったWebフォント（Google Fonts, Adobe Fonts）を適切に読み込ませ、ブランドイメージを保ちつつも可読性の高いタイポグラフィを実現しました。
