ドキュメント
Claude11Wind Starterの
使い方ガイド
インストールから開発のコツまで、
ステップバイステップで詳しく解説します。
準備するもの
必要なソフトウェア
Node.js 22以上
npm
Visual Studio Code
Claude Code
必要なアカウント
Githubアカウント
Netlifyアカウント
Unsplash開発者登録
インストール手順
1
リポジトリをクローン
プロジェクトをローカルにダウンロードします。
git clone https://github.com/toiee-lab/claude11wind-starter.git
mv claude11wind-starter <your-project-name>
cd <your-project-name>
rm -rf .git 2
依存関係をインストール
必要なパッケージを自動でインストールします。
npm install 3
開発サーバーを起動
ローカルサーバーを立ち上げてブラウザで確認します。
npm run serve 4
Unsplash API キーを設定
画像検索機能を使うための設定を行います。
cp .env.local.example .env.local その後、.env.localファイルを編集してAPIキーを設定してください。
開発のコツ
Plan Modeを積極的に活用
Shift+Tab でPlan Modeに切り替え、何をしようとしているか常に確認しながら進めると良いです。
依頼は具体的に
「口うるさく伝える」くらいの念押しをすると良いです。目的と全体像を示しながら依頼すると、より良い結果が得られます。
小さくコミット
Gitを初期化して、小さくコミットしながら進み、適宜変更を破棄しながら進めます。時々 /exit でClaudeをリセットしましょう。
推奨開発フロー
1
事前準備
Webサイトの目的、コンセプト、与えたい印象、カラーパレットを事前に決定します。
2
初回依頼
トップページのテンプレート作成とデザイン確立。ナビゲーションの色調整も忘れずに。
3
作り込み
ロゴ設定、各セクションの調整など、詳細なデザインを作り込みます。
4
他ページ作成
404ページ、機能ページ、お問い合わせページなど、必要なページを順次作成。
よくある問題と対処法
ナビゲーションの文字が見えづらい
症状: 初期状態のナビの文字色が白色で見えづらい
対処法: 「初期状態のナビの文字色が白色なので、見えづらいです。黒系の色にしてください。」と指示する
開発サーバーが停止できない
症状: Claudeが起動したバックグラウンドサーバーが残っている
lsof -i :8082 # ポート番号は8080-8085で確認
kill <プロセスID> # 上記で得られたIDで停止 本格運用へ
開発が完了したら、Netlifyにデプロイして世界中からアクセス可能なWebサイトとして公開しましょう。netlify.tomlファイルが設定済みなので、簡単にデプロイできます。