プロジェクト概要と役割

このプロジェクトは、オートレース（AutoRace.JP）のファンおよび投票会員に対し、公式LINEアカウントのメリットを訴求し、友だち追加と既存の投票アカウントとの連携を促進するためのプロモーション用ランディングページ（LP）です。ターゲットは、オートレースの情報をいち早く知りたい方や、限定キャンペーンに興味があるユーザー層です。

私はこのプロジェクトにおいて、フロントエンド開発全般を担当しました。ページの設計から、インタラクティブな機能の実装、マルチデバイス対応までを一貫して手掛けました。

採用した技術スタック

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

jQueryを採用することで、特にアニメーションスタンプのプレビュー機能など、リッチなUIインタラクションを効率的に実装しました。また、Webフォントを効果的に使用し、ブランドイメージに沿ったタイポグラフィを実現しています。

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

ユーザー体験を高めるUI/UX設計

このページはLINEへの誘導を目的としているため、ユーザーが直感的にメリットを理解し、アクション（友だち追加、連携）に移せるよう、明確な情報設計を心掛けました。

特にこだわったのは、アニメーションスタンプの紹介セクションです。静止画（data-still）とアニメーション画像（data-anime）をJavaScriptで制御し、ユーザーがスタンプをクリック（タップ）することでプレビュー再生ができるインタラクティブな体験を実装しました。これにより、スタンプの魅力を能動的に確認できるように工夫しました。

マルチデバイスへの完全対応

スマートフォンからの流入が大多数を占めると想定し、モバイルファーストでの設計を行いました。sp_none / pc_none といったユーティリティクラスを用いて、デバイスごとに最適な画像リソースを出し分けるなど、レスポンシブデザインを精密に実装しました。

PCからスマートフォンまで、あらゆるデバイスでレイアウトが崩れることなく、快適に閲覧できる状態を担保しています。

表示速度とアクセシビリティへの配慮

LPの直帰率を防ぐため、パフォーマンスは重要な指標です。このページでは多数の画像（特にスタンプ）を使用するため、loading="lazy" 属性を付与し、画像の遅延読み込みを実装しました。これにより、ファーストビューの表示速度を高速化し、ユーザーのストレスを軽減する工夫をしています。

また、<header>, <section>, <nav>, <footer> などのセマンティックなHTMLマークアップを適切に行い、スクリーンリーダーなどを使用するユーザーにも配慮したアクセシビリティ（a11y）の基盤を確保しました。

マーケティング施策とSNS連携

サイト訪問者の動向を分析し、施策の効果測定を行うため、Google Tag Manager（GTM）を導入しました。これにより、マーケティングチームが柔軟にタグを管理できる環境を構築しました。

さらに、LINEやX（旧Twitter）などでページがシェアされた際に、適切なタイトルや画像が表示されるよう、OGP（Open Graph Protocol）やTwitterカードのメタデータを詳細に設定し、SNS経由での拡散効果を高める設計を行いました。