Claude Code に投げるだけで、58分でブログが本番公開された実録ログ
Next.js + Vercel + 独自ドメイン + GA4 を、Claude Code に投げるだけで58分。実測タイムライン、詰まった3箇所、回避にかかった秒数まで公開します。
結論から
開始から58分で、https://sumi.blog が SSL 付きで公開状態になりました。
事前に用意していたのは、Claude Code とWebサービスのアカウントだけ。Next.js のディレクトリ規則も、Vercel CLI のコマンドも、DNS の設定画面も、知らないまま着手しています。
それでも58分で立った。この記事は、その 実測タイムライン と、詰まった3箇所を何秒で抜けたか の記録です。
1. 58分後に動いていたもの一覧
先に到達点から。
- フレームワーク：Next.js 16（App Router / Turbopack）
- 記事形式：MDX（
content/posts/*.mdxに置くだけ） - スタイリング：Tailwind CSS v4
- ホスティング：Vercel（SSL自動発行）
- 独自ドメイン：ムームードメインで取得した
sumi.blog - アクセス解析：Vercel Analytics + Speed Insights + Google Analytics 4
- SEO：JSON-LD Article構造化データ / OGP画像自動生成 / sitemap.xml / robots.txt / llms.txt
- 自動化：GitHub push で Vercel 自動デプロイ / GitHub Actions で X 自動投稿
2026年の個人ブログの標準セットが丸ごと入っている。通常なら調べ物込みで8時間は溶ける構成です。
2. 0分〜58分、何が起きていたか
実際のタイムスタンプ付きで。
| 経過 | 時刻 | やったこと |
|---|---|---|
| 0〜8分 | 23:10 → 23:18 | Claude Code に「こういうブログを作りたい」と伝え、create-next-app で骨格生成 |
| 8〜20分 | 23:18 → 23:30 | MDXセットアップ・デザインシステム・ヘッダー・記事ページのレイアウト確定 |
| 20〜28分 | 23:30 → 23:38 | Vercel CLI でデプロイ → sumi-blog.vercel.app で公開確認 |
| 28〜40分 | 23:38 → 23:50 | ムームードメインで sumi.blog 取得 → ネームサーバを Vercel の ns1/ns2.vercel-dns.com に書き換え |
| 40〜50分 | 23:50 → 00:00 | GA4 組み込み・Search Console TXT レコード設置・OGP画像・ファビコン設定 |
| 50〜58分 | 00:00 → 00:08 | 1本目の記事を MDX で書いて push → 本番反映確認 |
私がやったのは、日本語で要望を伝えて画面を操作することだけ。
3. 必要だった事前知識：ほぼゼロ
ブログサイトを立ち上げるのに必要とされる「前提知識」を並べると、こうなります。
- Next.js の App Router のルーティング規則
- MDX のレンダリングロジック（frontmatter、プラグイン）
- Vercel の CLI と Git 連携の流れ
- DNS の A レコードと CNAME、ネームサーバの違い
- SEO のメタタグと構造化データ
- アクセス解析ツールの埋め込み方
どれも単体では大したことないのに、全部が「知っていて当然の前提」として積み上がることで、最初の一歩が重くなる。よくある挫折ポイントです。
今回は、これらを知らないまま着手しました。Claude Code に「こういうのを作りたい」と投げれば、必要な構成を組んでくれるから。
4. ゼロではなかった、外部サービスの操作
正直に書くと、完全ゼロではありませんでした。必要だったのは、各外部サービスの使い方です。
- GitHub でリポジトリを作って push する
- Vercel にログインしてプロジェクトをデプロイする
- ムームードメインの管理画面でネームサーバを書き換える
- Google Analytics でプロパティを作って計測IDを発行する
ただ、これらの操作方法も、Claude Code が画面を見ながら毎回教えてくれます。
「Vercel に繋ぎたいんだけど、次どの画面?」と投げれば、そのときのエラーや状況に応じて、次に押すボタンや打つコマンドが具体的に戻ってくる。
つまり、先に学んでから作るのではなく、作りながら聞く形に切り替わっている。これが、今までのWeb制作学習との決定的な違いです。
5. 通常1日溶ける5箇所が、全部数分で終わった
個人でブログを立ち上げるとき、典型的に時間を吸い込むポイントは決まっています。 今回それらが何分で終わったか、実測で並べます。
| 通常の所要時間 | 箇所 | 今回の所要 |
|---|---|---|
| 1〜2時間 | Next.js + MDX + rehype/remark プラグインの組み合わせ選定 | 3分 |
| 2〜3時間 | JSON-LD 構造化データの設計・実装 | 5分 |
| 1〜2時間 | OGP画像の自動生成セットアップ（@vercel/og） | 7分 |
| 1時間 | Vercel 独自ドメイン + SSL + DNS 設定 | 12分 |
| 1時間 | GA4 + Search Console の埋め込みと所有権確認 | 10分 |
特に JSON-LD と OGP画像の自動生成 は、自力でやると半日溶かす典型ポイント。これらが最初から正しい形で出てくるのが、Claude Code のインパクトの正体です。
6. 何を意味するか
Claude Code は、「前提知識を積み上げてから作る」という構造を、「聞きながら進める」形に組み替えてしまったと感じています。
勉強してから始めるのではなく、作りながら必要な分だけ受け取る。この順番が逆になったこと自体が、個人開発の参入障壁を一段下げています。
次の記事について
Sumi では、こういった「実運用しての肌感」を積んでいきます。
- Claude Code を毎日使ってみて、どこで詰まり、どこで抜けたか
- トークン消費・コスト・所要時間の定量データ
- Figma MCP・Cursor・各種ツールとの併用と使い分け
- 撤退判断のリアル
次回は、このブログの GitHub リポジトリ構成とセットアップ手順を、再現可能な形で公開する予定です。
最後に
触ったことがないだけで躊躇している方は、一度 Claude Code に「こういうものを作りたい」と投げてみてください。
58分で、自分のサイトが立ちます。
感想や質問は X（準備中）まで。更新は RSS でも追えます。