このサイト自体を Claude Code で作ってデプロイした全記録

このサイトは実際に Claude Code（デスクトップアプリ版）を使い、コードを1行も手書きせずに構築しました。その全工程をそのまま公開します。所要時間はセットアップ含めて約30分（Claude Codeでの作業自体は約12分）です。

前提条件

項目	内容
使ったツール	Claude Code（デスクトップアプリ版）
レンタルサーバー	ロリポップ！ライトプラン（月額264円〜）
プログラミング経験	不要（この記録の筆者もコードは書いていません）
必要なもの	ロリポップ！のアカウント、FTP情報

Step 1: Claude Code に「サイトを作って」と指示

最初の指示

Claude Code に以下のような雰囲気で伝えました:

Claude Code × ロリポップ！の活用ガイドサイトを作って。
非エンジニア向けに、以下の記事を含むHTMLサイト:
- 活用チップス集
- 公開用プロンプト集
- AIエージェントの作り方
- バイブコーディングの解説
レスポンシブ対応で。

結果

Claude Code が以下のファイルを一括生成しました:

site/
├── index.html          ← トップページ
├── tips.html           ← 活用チップス集
├── prompts.html        ← 公開用プロンプト集
├── ai-agent.html       ← AIエージェントの作り方
├── vibe-coding.html    ← バイブコーディング
└── css/
    └── style.css       ← 共通スタイル

5ページ + CSS が一瞬で生成されました。記事の内容（数千文字の日本語テキスト）もすべて Claude Code が書いています。

Step 2: 「見た目をいい感じにして」と修正指示

修正の指示

サイトの見た目をいい感じにしたいので、
洗練されたレイアウトと色味にしてください。

たった1行の指示で、Claude Code がCSSを全面的にリニューアルしました:

カラーパレット: 青一色 → ダークネイビー × インディゴ × オレンジのグラデーション
フォント: システムフォント → Inter + Noto Sans JP（Google Fonts）
カード: ホバー時にグラデーションのアクセントラインが出現
ヘッダー: オーロラ風のグラデーション背景
ナビバー: すりガラス（backdrop-filter）効果
コードブロック: ダークテーマ配色

「いい感じ」で伝わる。これがバイブコーディングです。

Step 3: デプロイの仕組みも Claude Code に作ってもらう

指示

できるだけ自動で更新したいので、
私が動くのが最低限にできるようにしてください。
そしてデプロイしましょう

Claude Code が作ったもの

2つのデプロイ方法を自動で用意してくれました:

GitHub Actions: git push するだけで自動デプロイ（CI/CD）
FTPスクリプト: ローカルでコマンド1つ実行するだけ

Step 4: 実際にデプロイする（あなたがやること）

初回セットアップ（1回だけ・5分）

① ロリポップ！のFTP情報を確認する

ロリポップ！管理画面 → サーバーの管理・設定 → FTP設定 で以下を確認:

項目	確認場所
FTPサーバー	例: ftp.lolipop.jp
FTPアカウント	例: pya.jp-vibes
FTPパスワード	管理画面で確認・変更可能

② リポジトリをクローンする

git clone https://github.com/kentarow/test.git
cd test

③ デプロイスクリプトを実行する

bash deploy-ftp.sh

FTPパスワードを聞かれるので入力。これだけで全ファイルがロリポップ！にアップロードされます。

curl コマンドが必要です。ほとんどの Mac / Linux 環境にはプリインストールされています。

2回目以降の更新

cd test
git pull
bash deploy-ftp.sh

たった3行。Claude Code で変更 → git push → ローカルで pull & deploy。これだけです。

Step 5（オプション）: 完全自動化する

GitHub Actions を使えば、git push だけで自動デプロイできます。

設定方法（1回だけ）

GitHub リポジトリの Settings → Secrets and variables → Actions を開く
以下の3つの Secret を「New repository secret」で追加:

Name	Value
`FTP_SERVER`	FTPサーバー名（例: ftp.lolipop.jp）
`FTP_USERNAME`	FTPアカウント名
`FTP_PASSWORD`	FTPパスワード

以後、main ブランチに push するたびに、GitHub が自動で FTP アップロードしてくれます。

全体の流れまとめ

Claude Code に「サイト作って」と指示
    ↓ （5ページ + CSS 自動生成）
「見た目をいい感じにして」と修正指示
    ↓ （デザイン全面リニューアル）
「デプロイの仕組みも作って」と指示
    ↓ （FTPスクリプト + GitHub Actions 自動生成）
bash deploy-ftp.sh を実行
    ↓
公開完了 🎉

かかった時間

工程	時間	やったこと
サイト生成	約5分	Claude Code に指示しただけ
デザイン修正	約3分	「いい感じにして」と指示しただけ
デプロイ準備	約3分	「自動化して」と指示しただけ
実際のデプロイ	約1分	コマンド1つ実行しただけ
合計	約12分	コードは1行も書いていない

ポイント: なぜこれが可能なのか

Claude Code がコード生成・修正・デプロイスクリプトまで全部やってくれる
ロリポップ！ はファイルを置くだけで公開される（ビルド不要）
この2つの組み合わせにより、「日本語で指示 → 即公開」のワークフローが実現

外注費ゼロ。制作時間12分。サーバー代月額264円〜。

これが2026年のWebサイト制作です。