Claude Codeの感想

# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## 開発コマンド

### ローカル開発サーバー
```bash
# Python内蔵サーバーでサイトを起動
python3 -m http.server 8000
# ブラウザで http://localhost:8000 にアクセス
```

## アーキテクチャ概要

このプロジェクトは「Café Lumière」という架空のカフェのシングルページWebサイトです。

### ファイル構成
- `index.html` - メインのHTMLファイル（日本語コンテンツ）
- `style.css` - CSS変数を使用したモダンなスタイリング
- `script.js` - インタラクティブ機能とアニメーション

### デザインシステム
CSS変数で統一されたカラーパレット：
- `--primary-color: #8B4513` (ブラウン)
- `--secondary-color: #D2B48C` (ベージュ)  
- `--accent-color: #F5E6D3` (クリーム)
- `--text-dark: #2C1810` / `--text-light: #6B5B4F`

### 主要機能
1. **レスポンシブナビゲーション** - ハンバーガーメニュー、スムーススクロール
2. **メニューフィルター** - `data-filter` / `data-category` 属性でカテゴリ別表示
3. **アニメーション** - Intersection Observer API使用、CSS keyframes
4. **画像プレースホルダー** - 実際の画像なしでデザインを表現

### HTMLセクション構造
- Hero（ヒーロー）
- About（アバウト）  
- Menu（メニュー）- フィルター機能付き
- Contact（店舗情報）

### JavaScript機能詳細
- メニューフィルターは `data-filter="all|coffee|tea|dessert|food"` で動作
- スクロール時ヘッダー透明度変更
- タッチデバイス対応（スケールエフェクト）
- Intersection Observer で要素の表示アニメーション

### 開発時の注意点
- Google Fonts（Poppins、Crimson Text）を使用
- プレースホルダー画像は `.placeholder-image` クラスで統一
- モバイルファーストのレスポンシブデザイン
- 日本語コンテンツのため `lang="ja"` 設定

# [プロジェクト名] - [アプリの簡潔な説明]

## プロジェクト概要
<!-- アプリの目的と主要機能を2-3行で説明 -->

## 技術スタック
- <!-- 使用言語/フレームワーク -->
- <!-- アーキテクチャパターン -->
- <!-- データ永続化方法 -->
- <!-- その他の技術要件 -->

## アプリ構造

### 1. 初期フロー
#### 初回起動時
1. **[画面名]** → <!-- 画面の役割 -->
2. **[画面名]** → <!-- 画面の役割 -->
3. **[画面名]** → <!-- 画面の役割 -->

### 2. メイン画面構造（[タブ/画面]数）

#### [タブ/画面]1: [名前]（[ViewName]）
- **機能**
  - <!-- 機能1 -->
  - <!-- 機能2 -->
- **データ構造**
  - <!-- プロパティ1: 説明 -->
  - <!-- プロパティ2: 説明 -->

#### [タブ/画面]2: [名前]（[ViewName]）
<!-- 同様に記述 -->

### 3. サブ機能

#### [機能名]（[ViewName]）
- <!-- 機能説明 -->
- <!-- 動作説明 -->

## データモデル

### [モデル名]
```swift
struct [モデル名]: [プロトコル] {
    // プロパティ定義
}
```

## UI/UXガイドライン

### カラーパレット
- メインカラー：`Color(red: , green: , blue: )`
- 背景色：`Color(red: , green: , blue: )`
- <!-- その他の色定義 -->

### デザイン原則
- 角丸：<!-- サイズ -->
- シャドウ：`opacity: , radius: , x: , y: `
- フォント：<!-- フォント指定 -->
- アイコン：<!-- アイコンセット -->

## 実装時の注意事項

### 必須要件
1. **[要件名]**：<!-- 説明 -->
2. **[要件名]**：<!-- 説明 -->

### 開発フロー
1. <!-- ステップ1 -->
2. <!-- ステップ2 -->

### ファイル構造
```
[プロジェクト名]/
├── Models/
│   └── <!-- モデルファイル -->
├── ViewModels/
│   └── <!-- ViewModelファイル -->
├── Views/
│   ├── <!-- メインビュー -->
│   └── [カテゴリ]/
│       └── <!-- サブビュー -->
└── <!-- その他必要なファイル -->
```

## プロトタイプ実装の優先順位
1. **最優先**：<!-- 内容 -->
2. **高**：<!-- 内容 -->
3. **中**：<!-- 内容 -->
4. **低**：<!-- 内容 -->

## テストデータ
- <!-- テストユーザー情報 -->
- <!-- サンプルデータ -->
- <!-- その他のテストデータ -->

## 制約事項
- プロトタイプの場合：<!-- 省略する機能 -->
- 必須機能：<!-- 必ず実装する機能 -->
- 省略可能：<!-- 後回しにできる機能 -->

## その他の要件
<!-- 追加の要件や注意事項 -->