サイト概要
CodeJumpのデザインカンプ（Figma）をもとに、HTML/CSS/JavaScriptで静的コーディングを行った後、WordPressオリジナルテーマ化したECサイト風のWebサイトです。
デザインの再現だけでなく、WordPressのテンプレート構造に合わせてPHP化を行い、商品一覧ページ、商品詳細ページ、固定ページ（About・Company）の実装を行いました。
また、Dockerを利用してWordPressとMySQLのローカル開発環境を構築し、GitHubでソースコード管理を行いながら、ConoHa WINGへの公開まで一連の制作フローを経験しました。
使用技術
- HTML
- CSS
- JavaScript
- PHP
- WordPress（オリジナルテーマ開発）
- Docker
- MySQL
- Git
- GitHub
- GitHub Actions
- 本番サーバー：ConoHa WING
こだわった点
Figmaのデザインカンプをもとに、レスポンシブ対応を含めたコーディングを行い、デザインを忠実に再現することを意識しました。
商品一覧ページではCSS Gridを使用し、PCでは4カラム、スマートフォンでは2カラム表示となるよう実装しています。また、ハンバーガーメニューをJavaScriptで実装し、モバイル端末でも快適に閲覧できるよう工夫しました。
静的サイト制作で終わらせず、WordPressのオリジナルテーマとして再構築しています。header.php、footer.php、functions.php、single.php、page-products.phpなどへテンプレートを分割し、WordPressのテーマ構造に沿った実装を行いました。
商品ページはWordPressの投稿機能を利用して管理できる構成とし、アイキャッチ画像や商品情報を動的に表示しています。また、商品一覧ページにはページネーション機能を実装し、1ページあたり12件の商品を表示できるようにしました。
画像パスやCSS・JavaScriptの読み込みについてはWordPress関数を利用して管理し、環境に依存せず正しく動作するテーマ構成を意識しています。
さらに、Docker Composeを利用してWordPressとMySQLの開発環境を構築し、ローカル環境で開発・検証を行いました。完成後はConoHa WINGへデプロイし、本番環境での公開まで実施しています。
さらに、Docker Composeを利用してWordPressとMySQLの開発環境を構築し、ローカル環境で開発・検証を行いました。完成後はConoHa WINGへデプロイし、本番環境での公開まで実施しています。