プロジェクト概要と担当業務

オートレース様の新サービス「公式重勝式」のデビューを告知する、特設ランディングページ（LP）のフロントエンド開発全般を担当しました。
このプロジェクトの目的は、新サービスの魅力（最高6億円のチャンス）を伝え、既存ユーザーおよび新規ユーザーの利用を促進することです。HTML設計、CSSスタイリング、JavaScriptによるインタラクション実装までを一貫して担当しました。

採用した技術スタック

本プロジェクトでは、リッチな表現と安定した動作を両立させるため、以下の実績ある技術スタックを選定しました。

• HTML5 (Semantic Markup)
• CSS3 (destyle.cssによるノーマライズ)
• jQuery
• Slick.js (カルーセルライブラリ)
• Lightbox2 (モーダルライブラリ)
• Google Fonts
• Google Tag Manager (GTM)

これらの技術を選定し、ユーザーの注目を集めるインタラクティブなページを構築しました。

こだわった設計と実装

LPとして「サービスの魅力をいかに分かりやすく伝えるか」と「ユーザーを飽きさせない体験」を両立させる点に注力しました。

UIライブラリを活用したリッチなコンテンツ表現

本LPは「購入ステップ」や「楽しみ方（漫画）」など、視覚的に訴求すべきコンテンツが多数存在しました。

• Slick.jsの導入: 「購入ステップ」セクション（`<ul id="slide">`）では、Slick.jsを採用しました。これにより、スマートフォンでもスワイプで直感的に手順を確認できるカルーセルUIを迅速に実装しました。
• Lightbox2の導入: 「楽しみ方いろいろ！」セクションでは、漫画コンテンツ（`data-lightbox="lightbox[manga]"`）を掲載。Lightbox2を組み込むことで、ユーザーをページ遷移させることなく、その場で拡大モーダル表示し、ストレスのない閲覧体験を提供しました。

アクセシビリティとSEOを意識したHTML設計

デザインのインパクトだけでなく、マシンリーダビリティ（機械可読性）も重視しました。

• header, section, navといったセマンティックなHTMLタグを適切に使用し、論理的なドキュメント構造を設計しました。
• 「よくある質問」セクションでは、`dl`, dt, ddタグを使用し、質問と回答の関連性をマークアップで明確に定義しました。
• 全ての`<img>`タグに`alt`属性を記述し、アクセシビリティの基本要件を遵守しました。

SNSシェアとマーケティング施策への対応

LPの特性上、SNSでの拡散は非常に重要です。

• og:title, og:image, twitter:cardといったOGP（Open Graph Protocol）を網羅的に設計・実装しました。これにより、LINEやX (旧Twitter) などで共有された際に、意図したビジュアルと説明文が表示され、クリック率を高める工夫を施しました。
• Google Tag Manager (GTM) を導入し、マーケティング部門が計測タグを柔軟に管理できる基盤を整えました。