「クリエイター発掘オーディション」サイトにおけるスケーラブルなWordPressテーマ開発

プロジェクト概要と役割

総合学園ヒューマンアカデミーに在籍する学生クリエイターの作品を紹介し、企業とのマッチングを促進する公式ポートフォリオサイトです。本サイトは単年で終わるものではなく、2023年、2024年、2025年と継続的に運用されることを前提とした、拡張性の高いプラットフォームとして設計されています。

私はこのプロジェクトにおいて、技術選定から関わり、スケーラビリティを考慮したWordPressカスタムテーマの基盤設計、WebpackとTypeScriptによるモダン開発環境の構築、およびフロントエンド開発全般を担当しました。

これらの技術を選定し、開発効率、保守性、サイトパフォーマンスのすべてを高いレベルで満たす開発環境をゼロから構築しました。

このプロジェクト最大の課題は、サイトが年を重ねるごとに（2023年版、2024年版、2025年版…）アセット（CSS、JS、画像）が肥大化し、管理が複雑化することでした。

私はこの問題を解決するため、WordPressのバックエンド（PHP）とフロントエンドのビルドプロセス（Webpack）が連携する、独自の「年別アセット管理システム」を設計・実装しました。

ディレクトリ構造の設計: src/css/2023/, src/css/2024/ のように、すべてのアセットを年別に管理する厳格なディレクトリ構造を定義しました。
テンプレートの自動判定: page-archive2023.php や page-archive2024.php といった年別ページテンプレートが読み込まれた際、WordPress側がそれを自動で判定します。
動的なアセット読み込み: inc/asset-loader.php にロジックを集約し、判定された年に基づいて、その年に必要なCSS（例: /assets/css/2024/style.css）のみを動的に読み込む仕組みを構築しました。

この設計により、将来（例: 2026年版）の機能追加時も、過去のバージョンに影響を与えることなく、安全かつ効率的に開発・保守が可能になりました。

WordPress開発の生産性を最大化するため、Webpack 5とTypeScriptを導入したモダンな開発環境を構築しました。

高速な開発者体験 (DX): npm run dev:fast コマンドを整備し、TypeScriptとCSSのコンパイルをわずか1.7秒で完了させ、ホットリロード（ライブリロード）が有効な高速開発環境を実現しました。
開発モードと本番モードの分離: npm run dev 実行時は src/ ディレクトリを、本番ビルド時は assets/ ディレクトリを参照するよう、inc/asset-loader.php でパスを自動的に切り替える機能を実装しました。これにより、開発者はビルドプロセスを意識することなくコーディングに集中できます。
ビルドプロセスによる自動最適化: imagemin-webpack-plugin をWebpackに組み込み、npm run build 実行時に画像リソースを自動で66%圧縮するプロセスを導入しました。これにより、開発者の手作業による最適化ミスを防ぎ、サイトのパフォーマンスを恒常的に担保しています。
コードの品質担保: TypeScriptを採用し、型安全性を確保することで、実行時エラーの削減とメンテナンス性の高いコードベースを実現しました。

サイトの目的である「クリエイターとのマッチング」を達成するため、直感的なUI/UX実装にこだわりました。

パフォーマンスとUIの両立: 多数の動画を一覧表示するため、YouTubeのサムネイル画像のみを初期表示し、クリック時に初めて動画本体を読み込む「Lityライトボックス」を採用しました。これにより、初期表示速度（LCP）を劇的に改善しました。
非同期（AJAX）機能の実装: 企業担当者がクリエイターを評価しやすくするため、WordPressのNonce（セキュリティトークン）を利用したAJAXによる「いいね機能」を実装。さらに、「カテゴリ絞り込み機能」もクライアントサイドで高速に動作させ、快適な作品検索体験を提供しました。
セマンティックなマークアップ: main, nav, section などのHTML5タグを適切に使用し、アクセシビリティ（a11y）とSEOを意識した構造化マークアップを徹底しました。