プロジェクト概要と役割

2026年放送予定のTVアニメ「花織さんは転生しても喧嘩がしたい」の公式ティザーサイト制作プロジェクトです。ターゲットは原作ファンおよび新作アニメの情報を求めるアニメファンであり、作品の魅力を最大限に伝えるためのリッチなビジュアル表現と、モダンな開発環境による高い保守性の両立が求められました。

私はこのプロジェクトにおいて、インフラ構築からフロントエンド開発、WordPressのカスタムテーマ設計までを一貫して担当しました。

採用した技術スタック

本プロジェクトでは、開発体験、パフォーマンス、保守性を最大化するため、以下の技術スタックを選定しました。

• 開発環境: Docker, Docker Compose
• サーバー: MariaDB, Apache (Dockerコンテナ)
• CMS: WordPress (カスタムテーマ開発)
• フロントエンド: Vite, TypeScript, Sass (SCSS)
• ビルド/品質管理: npm scripts, PostCSS, ESLint, PHP CodeSniffer

WordPress開発でありながら、ViteによるHMR（ホットリロード）やTypeScriptによる型安全性を導入し、モダンなフロントエンド開発の知見を最大限に活用しました。

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

Dockerによるポータブルな開発環境

docker-compose.yml を定義し、MariaDB, Apache, PHP, WordPressの各バージョンをコンテナで厳密に管理しました。これにより、チームメンバー間の環境差異を撲滅し、「私の環境では動かない」といった問題を未然に防ぐ、ポータブルで再現性の高い開発環境を構築しました。

Vite + TypeScriptによるモダンな開発体験

WordPressのテーマ開発にViteを導入しました。SassやTypeScriptの変更が即座にブラウザに反映されるHMR（ホットリロード）を実現し、開発サイクルを劇的に高速化しました。また、JavaScriptはすべてTypeScriptで記述し、型安全性を確保することで、実行時エラーの少ない堅牢なコードベースを維持しました。

PRECSS/BEMに基づく堅牢なSass設計

保守性と再利用性を考慮し、Sassのディレクトリ構造を foundation (基盤), layout (レイアウト), components (汎用コンポーネント), project (ページ固有) に分割しました。_c-title (コンポーネント) や _l-container (レイアウト) といった命名規則（PRECSS/BEM）を徹底し、スタイルの競合を防ぎ、予測可能なCSS設計を実現しました。

UI/UXへの徹底したこだわり

アニメ公式サイトとして、ユーザーの期待感を高める体験を重視しました。

• オープニングアニメーション: op-animation.ts を実装し、ページ読み込み時に要素が順次表示されるリッチな演出を加えました。同時にFOUC（スタイル適用前のコンテンツが一瞬表示される現象）を厳密に防止し、洗練された第一印象を追求しました。
• 慣性スクロール: inertia-scroll.ts により、PCでの閲覧時に滑らかで心地よい慣性スクロールを実装しました。これにより、サイトを「触る」感覚的な楽しさを演出し、世界観への没入度を高めました。
• スムーススクロール: smooth-scroll.ts を導入し、ページ内のアンカーリンク移動をシームレスにしました。

自動化されたビルドと品質管理

npm scripts を整備し、開発（npm run dev）から本番用ビルド（npm run build）、納品用zipファイルの生成（npm run deploy:zip）まで、ワークフローを自動化しました。また、ESLintやPHP CodeSnifferを導入し、コード品質を常に高い水準で維持する仕組みを構築しました。