オートレース場利用者に向けた、オートレース場共通公式キャッシュレスカード「AutoRace.JP キャッシュレス」のサービス紹介と利用促進を目的とした、ランディングページ（LP）の制作プロジェクトです。

私はこのプロジェクトにおいて、フロントエンド開発全般を担当しました。情報の設計から、レスポンシブ対応、インタラクションの実装まで、一貫して手掛けています。

採用した技術スタック

• HTML5
• CSS3 (destyle.cssによるリセットを含む)
• JavaScript
• jQuery (v1.11.1)
• Slick Carousel (カルーセルライブラリ)
• Google Fonts (フォント配信)
• Google Tag Manager (分析基盤)

サービスの信頼性と安定稼働を重視し、実績のあるjQueryとSlick.jsを選定しました。これにより、モダンで効率的な開発環境と、堅牢な動作を両立させています。

こだわった設計と実装

ユーザーが迷わないランディングページ（LP）構造

サービス（メリット、使い方、登録方法）の全体像を1ページで完結して理解できるよう、情報を整理したランディングページ構造を採用しました。
各コンテンツセクション（「メリット」「使い方」など）に明確なIDを割り当て、ヘッダーのナビゲーションからアンカーリンクで即座に飛べるように設計しました。これにより、ユーザーが求める情報へストレスなく到達できるUIを実現しています。

あらゆるデバイスで崩れないレスポンシブデザイン

オートレース場（現地）での閲覧も想定し、スマートフォンからPCまで、あらゆるデバイスで最適な情報閲覧ができるようレスポンシブデザインを徹底しました。

特に「使い方」セクションのYouTube動画や、「設置施設」セクションのGoogle Mapsのような埋め込みコンテンツ（iframe）は、単に縮小するだけではレイアウトが崩れがちです。
そこで、paddingを利用してアスペクト比（16:9）を維持したまま可変するCSS設計を行い、どのデバイス幅でもコンテンツが欠けたり、余白が空いたりしないよう精密な調整を加えました。

Slickカルーセルによる直感的なUI実装

「使い方」のようにステップ・バイ・ステップでの説明が必要な箇所は、情報が冗長にならないよう、Slickカルーセルを採用しました。

ユーザーはスワイプ操作（またはクリック）で直感的に情報を切り替えることができ、複雑な手順もコンパクトに理解できます。動画と静止画（スライド）を混在させ、リッチなコンテンツ体験を提供しました。
また、スマートフォン表示時にはハンバーガーメニュー（.openbtn1）を実装し、限られた画面領域でも主要なナビゲーションへのアクセス性を確保しました。

信頼性と運用効率を高める基盤構築

まずdestyle.cssを導入し、ブラウザ間のデフォルトスタイルをリセットすることで、意図したデザインが一貫して表示される基盤を整えました。

また、ブランドイメージと可読性を高めるため、Google Fontsから「Noto Sans JP」や「Poppins」などのWebフォントを読み込み、適用しています。さらに、Google Tag Manager（GTM）を導入し、将来的なアクセス解析やマーケティング施策にも柔軟に対応できる拡張性を確保しました。