ど文系非エンジニアが1人でLP公開までやってみた記録 〜Claude Code・Cloudflare・Grok・Vercelを使い倒す〜
はじめに
個人でサービスを立ち上げるとき、これまでならエンジニアやデザイナーに外注するのが当たり前だった作業も、今はAIツールを組み合わせれば一人で完結できてしまう時代になってきました。
この記事は、非エンジニアの個人事業主が「ドメイン取得」「ロゴ制作」「LP（ランディングページ）公開」までを、AIツールを使ってどこまで一人でやりきれるかを試した記録です。技術的な用語には簡単な解説を添えているので、私のようにエンジニア経験ゼロで、これから同じことに挑戦したい方の参考になれば嬉しいです。
全体の流れ
今回やったことを大きく4ステップに分けると、こんな感じです。
- Claude Codeのサブスクリプション契約（開発の相棒を用意する）
- Cloudflareでドメインを取得（サイトの住所を確保する）
- Grokでロゴを作成（ブランドの顔を作る）
- Vercelを使ってLPを公開（実際に世に出す）
それぞれ、何をやってどこでつまずいたかを順番に書いていきます。
Step1: Claude Codeでサブスク契約
Claude Codeとは
Claude Codeは、Anthropic社が提供しているエージェント型のコーディングツールです。ターミナル（コマンドライン）上でAIに指示を出すと、コードの生成・修正・実行までを自律的にやってくれます。従来のチャット型AIとの違いは、単に「コードを書いてもらう」だけでなく、ファイル操作やコマンド実行まで一貫して任せられる点です。
なぜ、Claude Codeか？
以前から、Gemini・grok・Claudeと有名どころのAIモデルはチャット用途で使ってましたが。最近ではClaudeをよく使っていたのと、AIを使ったコーディングではClaudeが評価高かったのが理由です。
やったこと
非エンジニアでもAIを使えばHPの作成くらいはできるだろうと考え、まずはサブスクリプションを契約するところからスタートしました。契約自体はクレジットカード情報を入力するだけで数分で完了です。
つまずきポイント
- 最初はターミナル操作自体に慣れておらず、コマンドの意味がわからないまま実行してしまい、想定外のファイルが生成されて焦った場面がありました。指示は具体的に、かつ一歩ずつ確認しながら進めるのが安全です。
- 「いい感じに作って」のような曖昧な指示だと、期待と違うアウトプットになりがちでした。何を作りたいか、誰に見せたいかを最初にテキストで整理してから指示を出すと、精度がぐっと上がりました。
Step2: Cloudflareでドメイン取得
ドメインとCloudflareとは
ドメインとは、インターネット上の「住所」にあたるものです（例：example.com）。Cloudflareは、そのドメインの取得・管理に加え、DNS設定（住所とサーバーを結びつける設定）やセキュリティ機能もまとめて提供しているサービスです。
やったこと
サービス名に沿った独自ドメインを検索し、空いているものを選んで取得しました。取得自体はオンラインでクレジットカード決済するだけのシンプルな流れです。
つまずきポイント
- 候補にしていたドメインがすでに他社に取得済みだったケースが多く、思っていたよりも「良い名前」は残っていないという現実に直面しました。代替案をいくつか用意しておくのがおすすめです。
- 取得後にVercel側でドメインを紐づける際、DNS設定の反映に時間がかかり、「あれ、サイトにつながらない」と一時的に焦りました。DNSの反映には数分〜数時間かかることがあるので、焦らず待つのが正解でした。
Step3: Grokでロゴ作成
Grokとは
Grokは、xAI社が提供するAIチャットボットで、画像生成機能も備えています。テキストで「こんな雰囲気のロゴが欲しい」と指示すると、その内容に沿った画像を生成してくれます。
やったこと
サービスのコンセプトやカラーイメージを言葉で伝え、複数パターンのロゴ案を出してもらいました。気に入った案をベースに、微調整の指示を重ねてブラッシュアップしています。
つまずきポイント
- 一発でイメージ通りのロゴが出ることはほとんどなく、何度もプロンプト（指示文）を出し直す作業が発生しました。色味・書体の雰囲気・シンプルさの度合いなど、条件を細かく言語化するほど精度が上がる感覚があります。
- 特にGrokは英語でプロンプトを書いたほうが忠実に生成してくれます。Google翻訳使えば大丈夫です。
- 生成された画像の解像度や背景透過（背景を透明にする処理）がそのままではLPに使いづらく、別途画像編集で調整が必要になりました。AI生成画像はあくまで「素材」として捉え、最終仕上げは別作業になる前提で時間を見ておくとよさそうです。
Step4: Vercelを使ってLP公開
Vercelとは
Vercelは、作成したWebサイトのコードを簡単にインターネット上に公開（デプロイ）できるホスティングサービスです。GitHub（コードを管理するサービス）と連携させておけば、コードを更新するたびに自動で公開内容も更新される仕組みが作れます。
やったこと
Claude Codeで生成したLPのコードをGitHubにアップロードし、Vercelと連携させてデプロイしました。先ほど取得したCloudflareのドメインをVercel側に設定し、独自ドメインでアクセスできる状態にしています。
つまずきポイント
- 初回のデプロイでビルドエラー（コードのどこかに不備があって公開処理が失敗すること）が発生し、エラーメッセージを読み解くのに時間がかかりました。エラー文をそのままClaude Codeに渡して修正してもらう、という一連の流れが確立できると効率が上がります。
- ドメインの紐づけ設定で、CloudflareとVercelそれぞれの管理画面を行き来する必要があり、どちらで何を設定すべきか最初は混乱しました。公式ドキュメントの手順に沿って一つずつ確認しながら進めるのが結局一番早かったです。
全体を通しての学び
- AIツールを組み合わせれば、コーディング・デザイン・インフラ構築といった専門領域を、非エンジニアでも一定レベルまで一人でカバーできる時代になっていると実感しました。
- 一方で、各ツールを「つなぐ」部分（ドメインとホスティングの紐づけ、生成画像の最終調整など）は、AI任せにしきれず人の手で確認・調整する必要がありました。
- 曖昧な指示より具体的な指示の方が、AIのアウトプット精度が明らかに高くなります。作業前に「何を、誰に、どんな雰囲気で」を言語化しておく一手間が、結果的に時間短縮につながりました。
- 1番大きかったのが、私のような初心者が挫折しやすい専門用語や初歩的な技術理解です。24時間付きっきりで教えてくれるClaude先生がいてくれたおかげです。人間の先生とは違い、初歩的な質問を何度繰り返してもイヤな顔ひとつせず丁寧に教えてくれます。質問するための知識がそもそも無いって方は、スクリーンショット撮って訊いてみましょう。
おわりに
今回は具体的なサービス名や業種には触れていませんが、この流れ自体は業種を問わず応用が効くはずです。これから個人で何かを立ち上げようとしている方の参考になれば幸いです。