ワンページサイトを作る方法
ここでは、事前に用意されたプロジェクトテンプレートを使って、すぐにシンプルで、モダンで、美しく、動きのある ワンページで構成された Webサイトを作って、公開する手順を説明します。
前提条件
準備
Visual Studio Code を開く
新規ウィンドウでVSCodeを起動します。
プロジェクトフォルダを作成
作成したいプロジェクト名でフォルダを作成し、VSCodeで開きます。
ターミナルを開く
VSCode内でターミナルを開きます（メニュー: ターミナル > 新しいターミナル）。
テンプレートをクローン
git clone https://github.com/toiee-lab/webpage-template-for-cc.git .git情報を削除
rm -rf .gitUnsplash APIキーの取得、設定
Unsplashの開発者向けサイト に登録する。既に、Unsplashアカウントを持っている方は、「ログイン」をする。初めての方は、作成する。
アプリページ を開き、New Application を作成。アプリページの下部に「Key」があるので、Access keyを取得する。
以下のコマンドを実行
cp .env.local.example .env.local.env.local を開き、UNSPLASH_ACCESS_KEY を設定する。
ライブラリのインストール
Unsplashのライブラリを検索するスクリプトに必要なライブラリをインストールする。
npm installテストする。画像が見つかって、リンクが表示されたらOK。
node search "hello"念の為に、ターミナルを一度閉じる。
exit作成
プロンプトファイルを作成
prompt.md ファイルを作成します（.gitignore で除外指定されているため、プロンプトを直接書かずに、このファイル上で書いて実行します）。
依頼内容を記述
prompt.md に以下のような内容を記述します：
ロードバイクのパーソナルフィッティング・サービスのためのWebサイトを作ってください。
内容は後から調整するので、まずは、あなたなりに考えて作成してください。
クリーンなイメージのものが良いです。Claude Codeによる作成を待つ
途中で、ファイル作成の許可などを与えながら、作成完了を待ちます。
完成確認
public フォルダの中のファイルをブラウザで開いて確認します。
Git リポジトリを初期化
ソースコード管理で「リポジトリを初期化する」を実行します。
編集・更新
コンテンツの修正方法
- 修正したい箇所を自然な言葉でClaude Codeに依頼
- 特定の箇所を指示する場合は、セクション名などを使って伝える
- plan モード を使うと失敗しづらくなる
変更の保存とバージョン管理
- 修正ができるたびに、細かくコミット（セーブ）する
- 気に入らない場合は、元に戻すことができる
- ソースコード管理でコミットする前に変更を破棄すれば良い
画像の追加・変更
- 画像をドラッグ&ドロップして指定すれば、
public/assets/images/に保存される - 事前に大きなサイズの画像は小さくしておくとよい
- 画像形式：JPG、PNG、WebP等が使用可能
- 「Unsplashで検索して」と伝えると、Unsplashから適当に探してくれる
コンテンツの検討
- コンテンツを吟味するときは、Claude のチャットを使うと良い
- Claude Code 上ではなく、通常のClaude チャット で行う
- 文章の推敲や企画の検討に最適
公開
GitHub への公開
Netlify でのデプロイ
サイトのインポート
ビルド設定
Netlify が自動で設定を検出しますが、以下を確認してください：
Build command: 空白でOK
静的ファイルのためビルドコマンドは不要です。
Publish directory: public
生成されたファイルが格納されるディレクトリを指定します。
Site name: 任意の名前
サイト名は後から変更可能です。
カスタムドメイン設定（オプション）
独自ドメインを使用したい場合：
- 「Domain settings」 へ移動
- 「Add custom domain」 をクリック
- 独自ドメインを設定（DNS設定が必要）
自動デプロイの確認
- GitHub の main ブランチに変更をプッシュすると 自動でデプロイされる
- デプロイ履歴 で状況を確認可能
- プレビュー機能 でプルリクエスト単位でのプレビューも可能
運用のポイント
まとめ
継続的な運用では、以下のサイクルで効率的に作業できます：
graph LR
A[Claude Codeで編集] --> B[GitHubにコミット]
B --> C[Netlifyで自動デプロイ]
C --> D[サイト更新完了]
D --> A