クラウドはいらない、レンタルサーバーでバイブコーディング

対象読者: 「バイブコーディング」に興味があるけど、Vercel? Netlify? AWS? と聞くだけで尻込みしてしまう人。結論から言います。ロリポップ！レンタルサーバーで十分です。

「バイブコーディング」とは？

2025年に Andrej Karpathy（OpenAI 創設メンバー・元Tesla AI責任者）が提唱した概念です。

"There's a new kind of coding I call "vibe coding" where you fully give in to the vibes, embrace exponentials, and forget that the code even exists."

要するに:

コードの中身は気にしない
AIに「こういうの作って」と雰囲気（バイブス）で伝える
動けばOK
細かい技術的な正しさより、アウトプットの速さを重視

プログラミング経験がなくても、AIに自然言語で指示するだけでソフトウェアが作れる。それがバイブコーディングです。

バイブコーディングの「公開先」問題

バイブコーディングでサイトやアプリを作った後、多くの人がここでつまずきます:

「作ったはいいけど、どうやってインターネットに公開するの？」

よく紹介される方法:

方法	ハードル
Vercel / Netlify	Git連携、CLI操作、ビルド設定が必要
AWS / GCP	アカウント設定だけで半日。IAM？ S3？意味不明
GitHub Pages	Git の知識が前提
VPS	サーバー管理の知識が必要

バイブコーディングの「雰囲気でOK」という思想と、これらのデプロイ方法は相性が悪い。

レンタルサーバーが「バイブ」に合う理由

ロリポップ！の場合

やること	方法
サーバーを借りる	Webで申し込み（5分）
ファイルを公開する	ブラウザからドラッグ&ドロップ
サイトを見る	URLにアクセスするだけ
修正する	ファイルを上書きアップロード

これこそがバイブコーディングにふさわしい公開方法です。

「ビルド」という概念がない
「デプロイ」という概念がない
「CI/CD」という概念がない
ファイルを置いたら公開される。以上。

実践: バイブコーディング × ロリポップ！

Phase 1: バイブスでサイトを作る

Claude Code に、雰囲気で指示を出します。細かく指定しなくてOK。

おしゃれなカフェのWebサイトを作って。
なんかこう、温かみのある感じで。
写真が映えるデザインがいい。
メニューと場所がわかればOK。

ポイントは「なんかこう」「〜な感じ」「〜がいい」で伝えること。これがバイブコーディングです。

Phase 2: バイブスで修正する

出来上がったものを見て、感覚で修正を指示します。

うーん、もうちょっと余白がほしい。
あと色味がちょっと冷たい感じがするから、もう少し暖色系にして。
ボタンがなんか地味だから、もっと押したくなる感じにして。

「もうちょっと」「なんか」「〜な感じ」で全然伝わります。Claude Code はこの曖昧な指示を解釈して、適切にコードを修正してくれます。

Phase 3: ロリポップ！に置く

ロリポップ！のファイルマネージャーを開く
Claude Code が作ったファイルをドラッグ&ドロップ
公開完了

技術的な作業はゼロです。

バイブコーディングで作れるもの × ロリポップ！で動くもの

HTML/CSS/JavaScript で完結するもの（全プラン対応）

ポートフォリオサイト

自分の作品を並べるポートフォリオサイト作って。
写真がメインで、シンプルだけどセンスいい感じで。

イベント告知ページ

来月のイベントの告知ページ作って。
日時と場所と申し込みフォームがあればOK。
なんかワクワクする感じのデザインで。

プロフィール・名刺サイト

自分のプロフィールページ作って。
名前と経歴と連絡先が載ってればいい。
ミニマルでかっこいい感じで。

結婚式・パーティーの招待ページ

結婚式の招待ページ作って。
日時、場所、アクセス、出欠の返信フォーム付き。
上品で華やかなデザインで。

PHP を使うもの（全プラン対応）

お問い合わせフォーム付きサイト

お問い合わせできる会社サイト作って。PHP で。
送信したらメールが届くようにして。
ロリポップ！のサーバーで動くようにしてね。

簡易ブログシステム

記事を追加・編集できるシンプルなブログ作って。
データベースは使わないで、テキストファイルで管理する方式で。
PHP で、ロリポップ！で動くやつ。

予約フォーム

日付と時間帯を選べる予約フォーム作って。
予約が入ったらメール通知。
PHP + CSV ファイルで管理する形で。

WordPress をベースにするもの（全プラン対応）

本格的なブログ・メディアサイト

WordPress のテーマをカスタマイズしたい。
今のテーマのヘッダーを、もっとインパクトある感じに変えて。
あとフォントをもう少しおしゃれにして。

[テーマのコードを貼る]

クラウドと比較: なぜレンタルサーバーでいいのか

よくある反論と回答

「Vercel の方がモダンじゃない？」

→ バイブコーディングに「モダン」は必要ありません。動けばいい。公開できればいい。

「Next.js 使いたいんだけど」

→ Claude Code に「Next.js は使わないで、普通のHTMLで作って」と指示してください。バイブコーディングにフレームワークは不要です。

「サーバーレスの方がスケールするでしょ？」

→ あなたのカフェのWebサイト、月間100万PVありますか？ロリポップ！のスタンダードプランで十分です。

「GitHub Actions で CI/CD 組みたい」

→ それはもうバイブコーディングではありません。ファイルを上書きしましょう。

コスト比較

	ロリポップ！	Vercel（無料枠超過後）	AWS
月額	264円〜	$20〜	従量課金（予測困難）
初期設定	5分	30分〜	半日〜
必要な知識	ブラウザ操作	Git, CLI	AWS全般
ファイル公開	ドラッグ&ドロップ	git push	S3 + CloudFront + Route53...
SSL（HTTPS）	無料・ワンクリック	自動	ACM + ALB の設定
バイブス	最高	まあまあ	皆無

バイブコーディング3つのルール

ルール 1: 技術用語を使わない

❌ 「レスポンシブデザインでメディアクエリを使って、
     ブレイクポイント768pxでレイアウトを切り替えて」

✅ 「スマホでも見やすくして」

ルール 2: 感覚で伝える

❌ 「margin-top を 24px に、font-size を 16px に、
     color を #333333 に設定して」

✅ 「もうちょっとゆったりした感じにして。
     文字は読みやすいサイズで、落ち着いた色で」

ルール 3: 完璧を求めない

❌ 「アクセシビリティ対応、SEO最適化、
     パフォーマンスチューニング、PWA対応もお願いします」

✅ 「とりあえず公開できる状態にして。
     細かいことはあとで直す」

公開までの最速ルート

所要時間: 約30分（初回のみ。2回目以降は10分）

① ロリポップ！に申し込む .............. 5分
② Claude Code に「○○作って」と指示 ... 5分
③ 出来上がりを見て「ここ直して」× 数回 .. 10分
④ ファイルをアップロード ............... 5分
⑤ 公開完了 ........................... 5分

上級バイブス: SSH でもっと楽に（スタンダードプラン以上）

SSH が使えるプランなら、Claude Code に直接アップロードまで任せられます。

さっき作ったサイトをロリポップ！にアップロードして。

SSH情報:
ホスト: ssh.lolipop.jp
ユーザー: ○○○
アップロード先: /home/users/1/○○/web/

Claude Code が SCP コマンドでアップロードしてくれます。 ファイルマネージャーすら開かなくてOK。究極のバイブスです。

まとめ

バイブコーディングは「AIに雰囲気で指示して、動くものを作る」スタイルです。

そのアウトプットを公開するのに、複雑なクラウドサービスは必要ありません。

バイブコーディングの精神	ロリポップ！の特徴
コードは気にしない	コードを書かなくていい
雰囲気で伝える	設定項目が少ない
動けばOK	置けば動く
速さ重視	5分で公開

Claude Code × ロリポップ！は、バイブコーディングの完璧なパートナーです。

クラウドの設定で消耗するのはやめて、バイブスでWebサイトを公開しましょう。