lovegamingpcs.com
更新: 構築ログ

このブログをAIエージェント(Antigravity)で作った話 — Next.js × Sanity 構築ログ

lovegamingpcs.comをGoogleのAIエージェント「Antigravity」とバイブコーディングで構築した全記録。Next.js + Sanity + Vercelの技術選定から、デプロイまでの過程を赤裸々に公開。

このブログ自体が、AIで作られている。

lovegamingpcs.comは、GoogleのAIコーディングエージェント「Antigravity」を使い、いわゆる「バイブコーディング」で構築した。

俺がやったことは「こういうブログを作りたい」という仕様書を書いて、AIと対話しながら要件を詰めていったことだ。

この記事では、非エンジニアの施工管理技士がAIと一緒にブログを1から構築した過程を、包み隠さず記録する。

【2026-08-20追記】このブログはその後、Claude Codeによる運用体制へ移行し、ホスティングもVercelからConoHa WINGの静的配信(Astro)に切り替えた。この記事は移行前の構築記録としてそのまま残している。

技術選定: なぜ Next.js × Sanity × Vercel なのか

最初に考えたのは「WordPressでいいじゃん」ということだった。

実際、以前はConoHa WING上のWordPressで運営していた。だが3つの理由でNext.jsに移行を決めた。

理由①: 表示速度(Core Web Vitals)

WordPressはプラグインを入れるたびに重くなる。テーマのカスタマイズも限界がある。

Next.jsならSSG(静的サイト生成)で爆速表示が可能。

GoogleのCore Web Vitals対策としても最強だ。

理由②: コンテンツの自由度(Sanity)

Sanity CMSは「構造化コンテンツ」の思想で、データとデザインが完全に分離されている。

productスキーマを独立させることで、BTOパソコンのアフィリURLが変わっても1箇所の修正で全記事に反映される。

これはWordPressでは実現が難しい。

理由③: デプロイの簡単さ(Vercel)

VercelはNext.jsの開発元。Git pushするだけで自動デプロイされる。

SSL証明書もCDNも全自動。無料枠でかなりのアクセスに耐えられる。

手取り19万には最高すぎる。

AIエージェント「Antigravity」との共同開発

実際の開発フローはこうだ。まず俺が仕様書(build-spec.md)を書く。

「こういうページが欲しい」「こういうスキーマが必要」という要件を整理する。

次にAntigravityに仕様書を渡して、「これを実装してくれ」と依頼する。

AIがコードを書き、俺がレビューして、修正があれば指示する。

このサイクルを回すだけで、非エンジニアでもモダンなウェブサイトが作れる。

もちろん完璧ではない。AIが生成したコードにバグがあることもある。

型エラーで何度もビルドが通らなかったこともある。だが「0→1」のスピードは圧倒的だ。

自分でゼロからNext.jsを勉強していたら、何週間かかっていたか分からない。

苦労した点・ハマった点

Portable Textの理解

Sanityの本文はPortable Textという独自のリッチテキスト形式で保存される。

最初はこの仕組みが全く理解できなかった。「普通のHTMLで書けばいいのに、なぜこんな面倒な形式なんだ」と思った。

だがPortable Textの利点を理解すると、納得した。

構造化されたデータだからこそ、表示側で自由にカスタマイズできる。同じデータをウェブでもアプリでもメールでも使い回せる。

ISRとWebhookの設定

ISR(Incremental Static Regeneration)は「静的サイトのスピード」と「動的更新」を両立する仕組みだ。

SanityのWebhookと組み合わせることで、記事を更新した瞬間にサイトが再生成される。

この設定で何度もハマった。

Webhookのシークレットの設定ミス、revalidateのタイミング、Vercelのキャッシュ挙動——一つずつ潰していくしかなかった。

完成したもの

結果として、以下の機能を持つブログが完成した:

  • トップページ(ターミナル風タイピングアニメーション付きヒーロー)
  • 記事一覧・詳細ページ(目次自動生成、FAQ構造化データ対応)
  • productカード(BTOパソコンのスペック・価格・VRAM表示)
  • カテゴリ別フィルタリング
  • SEO最適化(JSON-LD、OGP、sitemap.xml、robots.txt)
  • ISR + Webhook(Sanity更新→自動再生成)
  • カスタムドメイン(lovegamingpcs.com)でVercelデプロイ

「作る過程」こそがコンテンツになる

俺はプロのエンジニアではない。施工管理技士だ。

だがAIエージェントと一緒なら、プロレベルのウェブサイトが作れる時代になった。

**そして「AIと一緒にブログを作った」という事実自体が、他のブログにはない差別化コンテンツになる。

これを読んで「自分もやってみよう」と思ってくれる人がいれば、最高だ。**

構築ログは今後も追加していく。

デザイン改善、新機能追加、そしていつか訪れるであろう「RTX 5070 Tiを買って換装する日」の記録まで——このブログの成長そのものを、全部コンテンツにしていく。

よくある質問

Q. プログラミング未経験でもAIでブログを作れますか?

A. AIエージェントを使えば、技術的な実装はAIが担当してくれます。

ただし「何を作りたいか」の仕様書(要件定義)は自分で考える必要があります。

プログラミングの知識よりも、論理的に要件を整理する力が重要です。

Q. Next.js + Sanity + Vercelの運用コストはいくらですか?

A. Sanity: 無料プラン(Content Lakeの容量制限あり)、Vercel: 無料プラン(月間100GBの帯域幅)、ドメイン: 年間約1,500〜3,000円。

個人ブログレベルなら実質ドメイン代のみで運用可能です。アクセスが増えても、Vercelの無料枠は意外と太っ腹です。

Q. WordPressから移行するメリットは何ですか?

A. 表示速度の劇的な改善(Core Web Vitals対策)、構造化コンテンツによる運用効率化、そしてGit管理によるバージョン管理が主なメリットです。

デメリットはプラグインエコシステムがないことと、初期構築のハードル。

ただしAIエージェントで初期構築のハードルはほぼゼロになります。