CLAUDE.md ​

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

プロジェクト概要 ​

VitePressベースのランディングページ（LP）サイト。ページスピード改善コンサルティングサービスの紹介サイト。

ターゲットドメイン: rehearsal.sitespeed.info

開発コマンド ​

# 開発サーバー起動
npm run dev

# プロダクションビルド（出力: .vitepress/dist/）
npm run build

# ビルド結果のプレビュー
npm run preview

# デプロイ（ビルド＋rsync）
bash deploy.sh

技術スタック ​

• フレームワーク: VitePress 1.6.4（MPA mode）
• スタイリング: Tailwind CSS 4.x（@tailwindcss/vite プラグイン経由）
• 言語: TypeScript / Vue 3（Composition API、<script setup>）

アーキテクチャ ​

ファイル構造 ​

.vitepress/
├── config.ts          # VitePress設定（head、Tailwind統合）
├── theme/
│   ├── index.ts       # テーマエントリポイント
│   ├── Layout.vue     # ルートレイアウト（Contentをラップ）
│   └── style.css      # グローバルスタイル（Tailwindインポート）
└── components/        # セクションコンポーネント（16個）
index.md               # メインページ（全コンポーネントを組み立て）
design.md              # デザインガイド（ビルド除外）
public/                # 静的アセット（画像、動画、アイコン）

コンテンツとURLの関係 ​

単一ページ構成のLP。index.mdがルート（/）に対応し、ページ内アンカーで各セクションにリンク。

• / → index.md（Hero〜Footer全セクション）
• #how-it-works → HowItWorksセクション
• #contact → FaqContactセクション

ページの構成方法 ​

index.mdで各セクションコンポーネントをインポートし、順番に配置：

<script setup>
import Hero from './.vitepress/components/Hero.vue'
import Problem from './.vitepress/components/Problem.vue'
// ...他のコンポーネント
</script>

<main class="min-h-screen bg-white text-gray-900">
  <Hero />
  <Problem />
  <!-- ...セクション続く -->
</main>

テーマのカスタマイズ ​

.vitepress/theme/index.tsのenhanceAppでグローバルコンポーネント登録やVueプラグイン追加が可能：

export default {
  Layout,
  enhanceApp({ app }) {
    // app.component('MyGlobal', MyGlobal)
    // app.use(somePlugin)
  }
}

スタイリング規約（design.mdより抜粋） ​

セクションの基本構造 ​

<section class="py-16 md:py-20">
  <div class="max-w-7xl mx-auto px-6">
    <!-- コンテンツ -->
  </div>
</section>

コンテナ幅 ​

カラーシステム ​

• プライマリ: from-cyan-400 to-emerald-500
• セカンダリ: from-cyan-500 to-blue-600
• 警告/強調: from-orange-500 to-red-500
• 背景交互: 白（デフォルト）⇔ bg-gray-50

グラデーションテキスト ​

<span class="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-emerald-500">

レスポンシブ ​

モバイルファースト設計。md:（768px以上）、lg:（1024px以上）で段階的に調整。

クラス名の順序 ​

1. レイアウト（display, position, grid, flex）
2. サイズ（width, height, max-width）
3. スペーシング（margin, padding, gap）
4. 背景（bg-, bg-gradient-）
5. ボーダー（border, rounded）
6. テキスト（text-, font-, leading-*）
7. エフェクト（shadow, opacity）
8. トランジション（transition-*）

コンポーネントのパターン ​

状態を持つコンポーネント（Outputs.vueの例） ​

モーダル表示などインタラクティブな機能は<script setup>で実装：

<script setup>
import { ref } from 'vue'

const modalOpen = ref(false)
const openModal = () => { modalOpen.value = true }
const closeModal = () => { modalOpen.value = false }
</script>

<template>
  <!-- Teleportでbodyにモーダルを描画 -->
  <Teleport to="body">
    <div v-if="modalOpen">...</div>
  </Teleport>
</template>

静的コンポーネント ​

テンプレートのみでscriptタグ不要の場合は省略可能。

設定 ​

VitePress設定（.vitepress/config.ts） ​

• mpa: true - MPA（Multi-Page Application）モード
• srcExclude: ['**/design.md'] - design.mdをビルドから除外
• vite.plugins - Tailwind CSSプラグイン統合

Tailwind CSS設定 ​

tailwind.config.jsは使用しない。.vitepress/theme/style.cssで直接インポート：

@import 'tailwindcss';

デプロイ ​

deploy.shでビルド後、rsyncでリモートサーバー（web-g6）にデプロイ。

rsync -av .vitepress/dist/ web-g6:web/vhosts/rehearsal.sitespeed.info/html/

注意事項 ​

• ダークモードは明示的に無効化済み（style.css参照）
• strong, bタグはfont-weight: 900に設定
• 日本語テキストの折り返し制御にはwhitespace-nowrapを使用