VISUAL METAL BAND 暁 – Official Site

■ヴィジュアル系メタルバンド「暁」の公式ウェブサイトです。

赤と黒を基調としたダークサイドをイメージして作成。

ファンがグッズを購入できるショッピングカート機能を搭載しています。

担当業務：企画立案・デザイン・コーディング

■ 特徴

– **ダイナミックな商品管理**: グッズ情報は MySQL データベースで管理されており、管理者がデータベースを更新するだけでサイト上に反映されます。

– **直感的なショッピングカート**: セッション管理を利用したカート機能を搭載し、スムーズな購入体験を提供します。

– **レスポンシブデザイン**: PC、スマートフォンの両方に最適化されたレイアウトを採用しています。

– **世界観を重視したUI**: バンドのコンセプトである「ダークネス」を基調とした、Cinzelフォントやグラデーションを用いた高級感のあるデザイン。

■ 使用技術

– **フロントエンド**: HTML5, CSS3 (Vanilla CSS), JavaScript

– **バックエンド**: PHP 8.x

– **データベース**: MySQL 8.0

– **Environment**: Docker (Docker Compose) / Lolipop Hosting

■こだわった点 / 工夫した点

1. **MySQLの導入**: 以前の静的なHTMLからPHP+MySQLへ移行し、保守性を向上させました。

2. **環境の自動切り替え**: `db.php` において、ローカル（Docker）環境と本番（ロリポップ）環境をサーバー名から自動判別し、接続情報を切り替えるロジックを実装しました。

3. **視覚効果**: スムーズスクロールやハンバーガーメニューなど、ユーザー体験を高めるマイクロインタラクションをCSSとJSで実装しました。

Mikimaru-Design