JR東日本 × キズナアイ「Kanjou Discovery Tour」企画サイト制作

プロジェクト概要と役割

JR東日本様の山手線環状運転100周年を記念した、キズナアイさんとの大型コラボレーション企画「Kanjou Discovery Tour」の特設サイト開発を担当しました。

このプロジェクトの目的は、スタンプラリー企画を通じて山手線15駅へのリアルな体験を促進し、イベントの集客と認知を最大化することです。ターゲットは、山手線利用者からキズナアイファンまで多岐にわたりました。

私はこのプロジェクトにおいて、フロントエンド開発全般（設計、実装、テスト、環境構築）を担当しました。

本プロジェクトでは、高速な開発体験とパフォーマンス、そして保守性を重視し、以下の技術スタックを選定しました。

これらの技術を選定し、モダンで効率的、かつ堅牢な開発環境を構築しました。

本プロジェクトでは、ユーザーを企画の世界観に引き込むためのアニメーション実装が最優先要件でした。

オープニングアニメーション: サイト訪問時の第一印象を決定づけるオープニングシーケンスを、CSSとTypeScriptを用いて精密に制御しました。ピンクの背景からロゴが出現し、白いオーバーレイが展開するまでの流れを、ブランドイメージを損なわないよう滑らかに実装しました。
FV（ファーストビュー）: ユーザーの目を引くメインビジュアルとして、キズナアイのイラスト群が環状に回転するアニメーションを実装しました。パフォーマンスを意識し、transformプロパティによるGPU加速を活用することで、60fpsの滑らかな描画を維持しました。
スクロール体験: スクロール連動のアニメーションにも注力しました。コンセプトセクションではパララックス効果（背景固定）を導入し、さらにPC閲覧時には慣性スクロールを実装することで、上質で心地よい操作感を実現しました。

大規模なキャンペーンサイトとして、将来の更新や運用に耐えうる堅牢なCSS設計が不可欠でした。

BEMベースの設計: SCSSの設計にあたり、BEM記法をベースとしました。
プレフィックス規約: l- (Layout), c- (Component), p- (Project) という独自のプレフィックス規約を導入し、ファイルの役割（`foundation`, core, layout, component, project）とクラス名を連動させました。
関心の分離: この設計により、スタイルの影響範囲を明確化し、意図しないスタイルの競合や破綻を防ぎ、高い保守性と再利用性を確保しました。

JR東日本のプロジェクトとして、あらゆるユーザーが情報にアクセスできることは必須要件でした。Webアクセシビリティ（a11y）の確保を徹底しました。

セマンティックHTML: 適切なHTMLタグ（main, section, h2など）を使用し、文書構造を明確にしました。
アクセシブルなモーダル: クリエイター情報を表示するモーダルには、a11y-dialogライブラリを選定しました。これにより、キーボード操作（Escキーでのクローズ、フォーカストラップ）やスクリーンリーダーの読み上げ（aria-hidden, role="dialog"）に完全対応しました。
モーションの配慮: ユーザーのOS設定（prefers-reduced-motion）を検知し、アニメーションを抑制する配慮も実装しています。

高品質なプロダクトを安定して提供するため、テストと開発環境の整備にも注力しました。

テスト自動化: Vitestによるユニットテストと、PlaywrightによるE2Eテスト（モーダル開閉やページ遷移の確認など）を導入し、機能のデグレードを自動的に検知する体制を整えました。
コード品質の維持: ESLint (TypeScript) とPrettierによる静的解析とフォーマッターを導入し、チーム開発におけるコードの一貫性を担保しました。
コンテナ化: 開発環境と本番環境はDockerコンテナで構築し、開発者の環境差異による問題を排除しました。

画像の多いサイトであるため、表示速度がユーザー体験に直結します。srcset属性を全ての画像で徹底し、Retinaディスプレイ（2x）に対応した高解像度画像と通常画像をデバイスに応じて切り替える実装を行いました。これにより、不要なデータ転送を削減しつつ、鮮明なビジュアル体験を提供しました。