DanceStudio - ダンススクールウェブサイト

Next.js App Routerを使用したダンススクールのホームページです。

特徴

• レスポンシブデザイン: モバイルファーストでどのデバイスでも美しく表示
• モダンなUI: Tailwind CSSを使用したクリーンなデザイン
• 高速パフォーマンス: Next.js 14とApp Routerによる最適化
• TypeScript: 型安全性と開発効率の向上
• アクセシブル: すべてのユーザーが利用しやすい設計

ページ構成

• ホーム: サイトの紹介とメインビジュアル
• 講師紹介: プロフェッショナルな講師陣の紹介
• スタジオ紹介: 施設と設備の詳細
• スケジュール: 週間クラススケジュール
• クラス紹介: 各ダンスジャンルの詳細
• お問い合わせ: 体験レッスン申し込みとお問い合わせフォーム
• ブログ: ダンス関連の情報発信

技術スタック

• フロントエンド: Next.js 14, React 18, TypeScript
• スタイリング: Tailwind CSS
• アイコン: Lucide React
• フォント: Google Fonts (Inter)

セットアップ

必要な環境

• Node.js 18.17以上
• npm または yarn

インストール

1. 依存関係をインストール:

npm install

2. 開発サーバーを起動:

npm run dev

3. ブラウザで http://localhost:3000 を開く

その他のコマンド

# プロダクションビルド
npm run build

# ビルドしたアプリケーションを実行
npm start

# リンターを実行
npm run lint

プロジェクト構造

src/
├── app/                    # App Router pages
│   ├── globals.css        # グローバルスタイル
│   ├── layout.tsx         # ルートレイアウト
│   ├── page.tsx          # ホームページ
│   ├── instructors/       # 講師紹介ページ
│   ├── studio/           # スタジオ紹介ページ
│   ├── schedule/         # スケジュールページ
│   ├── classes/          # クラス紹介ページ
│   ├── contact/          # お問い合わせページ
│   └── blog/             # ブログページ
└── components/            # 再利用可能なコンポーネント
    ├── Header.tsx        # ヘッダーナビゲーション
    └── Footer.tsx        # フッター

カスタマイズ

色の変更

tailwind.config.jsで色のテーマを変更できます：

theme: {
  extend: {
    colors: {
      primary: {
        // お好みの色に変更
      }
    }
  }
}

コンテンツの更新

各ページのファイルでコンテンツを直接編集できます：

• スタジオ情報: src/app/studio/page.tsx
• 講師情報: src/app/instructors/page.tsx
• クラス情報: src/app/classes/page.tsx
• スケジュール: src/app/schedule/page.tsx

デプロイ

Vercel（推奨）

1. GitHubリポジトリにプッシュ
2. Vercelアカウントでリポジトリをインポート
3. 自動でビルド・デプロイされます

その他のプラットフォーム

Next.jsはさまざまなプラットフォームにデプロイできます：

• Netlify
• AWS Amplify
• Railway
• その他のホスティングサービス

ライセンス

このプロジェクトはMITライセンスの下で公開されています。

サポート

ご質問やご提案がございましたら、お気軽にお問い合わせください。