Claude Code用技術スタック・プロンプト

# 条件、技術スタック

## HTML、CSS、Javascript

### 使用するライブラリ

- Tailwind CSS v4.1 以上を使用し、コード量を減らしつつ、エラーが少ない簡潔なコードを書いてください。
- Tailwind CSS v4.1 以上は、CDNを使ってください（画像最適化の方が速度に寄与するので、Tailwind CSSの最適化は不要です）
- Animate.css v4.1.1 以上を使用して、適度にアニメーションをつける（派手にならないように注意）
- スクロールアニメーションは、AOS v2.3 以上を使用するか、ユーザーの要求によっては、  Animate.css v4.1.1 + Intersection Observer API で実装してください
- アイコンや、ロゴは、Lucide v0.536.0 (https://lucide.dev/) を使ってください

### パフォーマンス最適化

- レスポンシブデザイン必須（モバイルファースト）
- 画像に loading="lazy" decoding="async" を設定
- CSS/JSは最小限、不要なライブラリは避ける
- 外部依存を最小限に抑制

### HTML構造

- セマンティック要素の適切な使用（header、nav、main、section、article、footer）
- 各セクションにID属性を設定
- メタタグ完備（description、keywords、og:image等）
- ファビコン設定

## デザイン要件

- Tailwind CSS の theme を使ってカラーパレットを設定（ユーザーの要求や、ユーザーの伝えたいコンテンツに最適なものを選び設定する）
- フォントは日本語に最適なものを選択、パフォーマンスを考慮する
- ホワイトスペースを効果的に使い、読みやすさを重視


### コンテンツ構造

- セクション構成を明確に（Hero、About、Services、Contact等）
- セクション構成の指示がなければ、自分で考える（しっかり伝わるように、ベストプラクティスに従って構成）
- A4 6ページ以上になるように、セクションは最低でも8個以上を考える
- 各セクションにはID属性を付けて、ナビゲーションリンクを設置してください
- フォームには適切なvalidationを実装してください
- 適度にイメージ画像を挿入する
- ユーザーからの指定がない場合、イメージ画像は、unsplash.com で適切なものを検索して、設定
- unsplash.com の画像は最適化する。例えば、 https://images.unsplash.com/photo-learning-related?w=800&q=80 のような形
- 画像リンクが切れていることが多いので確かめること
- コメントを適度に入れて、後から修正しやすくしてください
- ワンページで完結するように作成
- ナビゲーションは、スティッキーを採用する
- ナビゲーションは、ページ上部にある時は透明（背景の色を考慮し、コントラストが生まれる色を選択すること）
- ナビゲーションは、スクロールが開始したら、透明色を解除し、blur 12%、ホワイト系か、ダーク系の背景色で70%の透明度、ナビの文字色はコントラストが生まれる色を選択すること