プロジェクト概要と担当業務
オートレース様の「夏のお中元感謝祭」キャンペーンLP制作において、フロントエンド開発全般を担当しました。
主な担当業務は、Sass(SCSS)によるCSS設計・実装、`npm scripts`を用いた開発環境の構築、およびHTMLマークアップです。
採用した技術スタック
本プロジェクトでは、開発効率とコードの品質、そして将来の保守性を考慮し、以下の技術スタックを選定しました。
- Sass (SCSS)
- PostCSS (Autoprefixer)
- npm scripts (npm-run-all)
- Prettier
- jQuery
- Adobe Fonts / Google Fonts
- Google Tag Manager (GTM)
これらのツールを活用し、モダンでメンテナンス性の高い開発環境を構築しました。
こだわった設計と実装
キャンペーンLPとして、ターゲットユーザーに正確な情報を伝え、スムーズな体験を提供すること。また、開発プロセスを効率化することに注力しました。
開発体験（DX）を最大化する環境構築
開発効率を飛躍的に向上させるため、`npm scripts`を体系的に整備しました。
sass:watch: Sassファイルの変更を自動検知し、CSSへ即時コンパイル。serve:live-serverによるローカルサーバーを起動し、リアルタイムでの表示確認を実現。build:css:Autoprefixerを実行し、本番用のCSSを生成。prettify:Prettierによるコードフォーマットを自動化。
npm-run-allを用いてこれらのタスクを並行処理・順次処理できるようにし、開発者がコーディングに集中できる環境を整えました。
保守性と品質を担保するCSS設計
CSSの記述にはSass (SCSS) を採用しました。変数やミックスインを活用し、コードの重複を排除しています。
さらに、`package.json`内の`browserslist`定義（`last 2 versions`）に基づき、`Autoprefixer`がベンダープレフィックスをビルド時に自動付与する仕組みを導入。これにより、手動での管理コストを削減しつつ、主要ブラウザでの表示互換性を確実に担保しました。
アクセシビリティとセマンティクスの追求
あらゆるユーザーが情報にアクセスできるよう、セマンティックなHTMLマークアップを徹底しました。
header, main, article, sectionといったランドマーク要素や、`h1`から`h4`までの見出しレベルを適切に設計。また、画像には`alt`属性を漏れなく設定し、スクリーンリーダー等を利用するユーザーにも配慮しました。
パフォーマンスとUIへの配慮
ユーザー体験を損なわないよう、UIの細部にもこだわりました。
スマートフォンからPCまで最適な表示を行うレスポンシブデザインを実装。特にヒーローイメージでは`<picture>`要素を使用し、デバイス幅に応じて`hero-visual-sp.png`と`hero-visual-pc.png`を切り替えることで、不要な画像データの読み込みを防ぎ、表示パフォーマンスを最適化しました。
キャンペーン効果を最大化するOGP設計
本LPの特性上、SNSでの拡散は非常に重要です。そのため、`og:title`, og:image, og:description, twitter:cardといったOGP（Open Graph Protocol）を網羅的に設計・実装しました。これにより、LINEやX (旧Twitter) などで共有された際に、キャンペーンの魅力が的確に伝わるよう工夫しました。
