この記事の内容を、御社の業務で仕組みにする相談（30分・無料）→
この記事の著者
後藤 佑輔
IGS代表大和証券、
代表の後藤です。
※Web集客・広告・SNS・AI導入などをまるっと月10万円から引き受けます → 後藤、貸します。
弊社のコーポレートサイトはClaude Codeを使って構築しておりますが、初めて公開した際にかかったのは約4時間でした。
ただし、この話を書いた記事は「Claude Codeでサイトを構築できた」というご報告が中心であり、「具体的に何をしたのか」までは記載していませんでした。
そこで今回は、Claude Codeのアプリを入れるところから、会社のホームページを公開し、独自ドメインでお問い合わせを受けられるようになるまで、弊社が実際に進めた順番で1つずつ記していきます。
何を操作して、どこを触って、どのような文章を打ち、何が表示されるのか。文章などはそのままコピーして使えるように記載していきます。
先に全体の流れ
用意するものは、下記の5つです。
- Windows（x64またはARM64）かMacのパソコン
- Claudeの有料プラン（Proなら月約3,200円。料金はこの記事で整理しています）
- GitHubのアカウント（作ったファイルを置いておく場所。無料で作れます）
- Vercelの有料プラン（Proなら開発者1人あたり月20ドル）
※会社として公開する場合に有料プランが必要です（無料のHobbyは個人の非営利利用向け） - 独自ドメイン（会社名.co.jpのような住所。今のホームページで使っているものがあればそのまま使えます）
流れは、下記の9つです。
③〜⑥は、制作会社に依頼した場合の「要件定義→原稿・デザイン→制作→確認」と同じ順番です。AIでのホームページ制作でも、手順そのものは変わりません。変わるのは、それぞれの工程にかかる時間です。
※なお、この記事の画面やボタンの名前は、AnthropicとVercelの公式ドキュメントで2026年10月26日に確認した内容です。画面は変わることがあるので、公式の最新の表示を見てください。
① Claudeアプリを入れてログインする
まず、パソコンにClaudeのデスクトップアプリをダウンロードします。
CLIと呼ばれる黒い画面（ターミナル）に文字を打ち込む必要はありません。Claudeアプリには元々Claude Codeが入っており、Claude Codeを使うだけなら、エンジニアが使うような開発ツールを自身で入れる必要はありません。
方法は下記です。
- Anthropicの公式ドキュメントを開く
- ページの上にある「Download for macOS」か「Download for Windows」を押して、インストーラーをダウンロード
※Windowsは、通常のパソコンならx64用です。
ARM64のパソコンの場合は、同じページにARM64用のインストーラーへのリンクがあります - ダウンロードしたファイルを開いてインストール
- インストールが終わったらClaudeを起動
※Macは「アプリケーション」フォルダ、Windowsは「スタートメニュー」から開けます - Anthropicのアカウントでログイン
普段Claudeを使っているアカウントです。まだ無い場合は、画面の案内に従ってメールアドレスかGoogleアカウントで作れます
Claude Codeを使うにはProかMax、Team、Enterpriseのいずれかの有料プランが必要です。
無料プランのままだと、次の②で「Code」タブを押したときにアップグレードを促す表示が出ます。その場合は、先にプランを契約してください。
② 作業用のフォルダを作り、Codeタブで選ぶ
次に、ホームページのファイルを入れておく「フォルダ」を作り、その中でClaude Codeで作業します。Claudeが作るファイルは、すべてこのフォルダの中に入ります。
まず、フォルダを作ります。
- Windowsの場合
画面の下にあるフォルダの形のアイコン（エクスプローラー）を押して開き、左側の「ドキュメント」を押します。空いている所で右クリックし、「新規作成」→「フォルダー」を選び、名前を「my-company-site」にしてEnterキーを押します - Macの場合
画面の下にある顔の形のアイコン（Finder）を押して開き、左側の「書類」を押します。画面の上のメニューの「ファイル」→「新規フォルダ」を選び、名前を「my-company-site」にしてreturnキーを押します
名前は「my-company-site」でなくても構いませんが、公開するときのURLの元になるので、半角の英小文字とハイフンだけにしてください。中には何も入れず、空のままにしておきます。
続いて、Claudeの画面に戻ってフォルダを選びます。
- 画面の左側（サイドバー）の上のほうにある「Code」タブを押下
アイコンだけが並んでいるときは、マウスを乗せると名前が出ます - 文字を入力する欄のすぐ下に並んでいるボタンの、一番左を押して「Local」の一番上を選択
「Local」は、自分のパソコンの中で作業するという意味です - そのすぐ右のボタンを押して「Open folder」を選択
フォルダを選ぶ画面が開くので、先ほど作った「ドキュメント」（Macは「書類」）の中の「my-company-site」を選びます
これで、Claudeはこのフォルダの中でホームページを作っていきます。
最後に、同じ列にある権限モードのボタンを確認します。Claudeが作業の前に、どこまで「やっていいですか？」と聞いてくるかの設定です。
ボタンに「Auto」と出ていれば、そのままで大丈夫です。違う表示になっていれば、ボタンを押して一覧から「Auto」を選びます。
毎回確認してくる「Manual」は安全そうに見えますが、確認のたびに出てくるのは英語のコマンドやファイルの変更内容です。初めての方には、それが大丈夫かどうか判断できないと思います。よく分からないまま「許可」を押し続けるだけになり、確認の意味がなくなります。
「Auto」モードでは、Claudeとは別のAIが作業を1つずつ見ていて、頼んだ内容から外れる操作や、データの強制的な上書き、情報を外に送るような取り返しのつきにくい操作は止めてくれます。ただし、安全を完全に保証するものではありません。
- 作業場所は、新しく作った空のフォルダにする（大事な書類が入ったフォルダを選ばない）
- 大きな作業の前に、何をするかを日本語で説明させる（⑤で説明します）
なので、上記の2つは必ず守ってください。
③ 要件を決める（要件定義書を作ってもらう）
ここからが制作です。いきなり「ホームページを作って」とは頼みません。
制作会社に依頼する場合も、最初にやるのは要件定義です。
何のためのサイトか、誰に見てほしいか、どんなページが要るかなどを決めて文書にまとめます。弊社も、事前にClaudeと会話しながら要件定義書を作りました。
進め方は、Claudeに質問してもらいながら、要件定義書を作ってもらう形です。
下記の文章をコピーして、Claudeの文字を入力する欄に貼り付けます。最後の3行の〇〇を自分の会社の内容に書き換えてから、Enterキーで送信してください。
会社のホームページを新しく作ります。
まだファイルは作らず、最初に要件定義書を一緒に作ってください。
進め方：
・私に質問しながら進めてください。一度に聞くのは3つまでにしてください
・専門用語は使わず、分からない言葉には説明を付けてください
・質問が終わったら、内容を requirements.md というファイルにまとめてください
決めたいこと：
・サイトを作る目的（例：問い合わせを増やしたい、採用に使いたい）
・見てほしい人（業種・立場・どんな悩みを持っている人か）
・必要なページの一覧と、各ページに載せる内容
・お問い合わせの受け方（フォーム、メール、電話）
・サイトの雰囲気と、参考にしたいサイト
分かっていることは下記です。
・会社名：〇〇
・事業内容：〇〇
・今のホームページ：〇〇（無ければ「なし」）
すると、Claudeが質問を返してきます。
同じ入力欄に答えを書いて、Enterキーで送ってください。分からない質問は「一般的な会社ならどうしますか」と聞き返して構いません。
質問が終わると、Claudeが要件定義書を作り、「my-company-site」フォルダの中に「requirements.md」というファイルができます。このファイルは自分で開かなくて大丈夫です。中身を確認したいときは、Claudeに「requirements.md の内容を、ここに表示してください」と送れば、画面に表示されます。直したいところも「〇〇を△△に変えてください」と送れば、Claudeがファイルを直します。
ここで一番大事なのがページ構成です。
一般的な会社のホームページなら、下記のような形になります。
- トップ（会社の一言の説明と、各ページへのリンク）
- サービス（何をしているか、誰のどんな悩みを解決するか）
- 会社概要（会社情報、代表の紹介）
- よくある質問
- お問い合わせ
- プライバシーポリシー（お問い合わせで個人情報を受け取るため）
弊社の要件定義書では、これにブログを足した7ページにしました。
会社の目的によって要るページは変わるので、Claudeの提案をそのまま受け入れず、「このページは本当に要るか」「足りないページはないか」を自分で判断してください。
④ 原稿とデザインの方向を固める
ページ構成が決まったら、各ページに載せる原稿（文章）とデザインの方向を決めます。
原稿は、要件定義書を元にClaudeに下書きしてもらい、自分で直すのが早いです。下記をコピーして、入力欄に貼り付けて送ります。
requirements.md を元に、各ページに載せる文章の下書きを作って、
pages.md というファイルにまとめてください。
私が書いていない実績・数字・お客様の声は、作らないでください。
分からないところは「（要確認）」と書いて残してください。
終わったら、pages.md の内容をページごとにここに表示してください。
表示された原稿は、必ず自分で読んでください。
会社の名前で世に出る文章なので、事実と違うことが1つでも入っているのは避けましょう。直したいところや「（要確認）」の点は、「サービスのページの〇〇を△△に変えてください」のように送れば、Claudeが直します。弊社の場合は、要件定義書の段階でキャッチコピーを確定させ、6つのサービスの説明文も書き込んでいました。
デザインは、言葉だけで伝えるとAIらしい無難な見た目になりがちです。
なので、参考にしたいサイトのURLと、ベースカラーを伝えるのが効果的だと思います。弊社は、海外企業のサイトを複数参考に挙げ、白黒を基本に、ロゴの紺色を差し色にすると決めました（当初案。現在は白をベースとした紺を基調に変更）。
デザインの方向を決めたいです。
参考にしたいサイトは下記です。それぞれの良いところを教えてください。
・〇〇（URL）
・〇〇（URL）
ベースカラーは〇〇です。
雰囲気は〇〇（例：落ち着いた、信頼感のある）にしたいです。
色・文字の種類・余白の取り方の案を出して、決まったら requirements.md に書き足してください。
ロゴや代表者の写真など、サイトに載せる画像がある場合は、②で作った「my-company-site」フォルダを開き、その中に「images」という名前のフォルダを作ります（作り方は②と同じです）。そこに画像のファイルをドラッグして入れ、Claudeに「images フォルダの画像を使ってください。ロゴは〇〇、代表の写真は〇〇というファイルです」と送ります。
もしくは、Claude Codeにドラッグ＆ドロップで「この○○画像を△△に使ってください」と頼むのも可能です。
⑤ 計画を出させてから、全ページを作ってもらう
要件定義書と原稿がそろったら、いよいよ構築に移ります。
ここで、②で書いた「大きな作業の前に、何をするかを日本語で説明させる」を使います。
入力欄の下にある権限モードのボタン（今は「Auto」と出ている所）を押し、一覧から「Plan」を選んでください。Planモードでは、Claudeはファイルを作ったり書き換えたりせず、何をどの順で作るかの計画だけを出します。そのうえで、下記をコピーして送ります。
requirements.md と pages.md のとおりに、ホームページを作る計画を出してください。
・使う技術は、私がこの先も自分で直しやすく、Vercelで公開しやすいものを選んで、理由も教えてください
・作るページと、それぞれのページに入る内容を一覧にしてください
・専門用語には説明を付けてください
計画が出たら内容を確認します。
見るのは、
- ページの一覧が要件定義書と合っているか
- 頼んでいないものが入っていないか
の2つです。違っていれば、そのまま日本語で「〇〇は要らない」「〇〇のページが抜けている」と送って、計画を直してもらいます。
計画がOKであれば、計画の下に出る「進めてよいかを選ぶボタン」で、進める方を押します。
そのあと、権限モードのボタンが「Auto」に戻っているかを確かめてください。戻っていなければ、ボタンを押して「Auto」を選びます。これで、Claudeが全ページを作り始めます。弊社の場合、技術はNext.jsというものを使っています。
作業中に「やっぱりこうしたい」と思ったら、入力欄に書いてEnterを押すと、止めずに修正を伝えられます。止めたいときは停止ボタンを押します。
AIコンサルティング
この記事の仕組みを、
⑥ プレビューで確認して、直したいところを伝える
Claudeから「できました」という返事が来たら、自分の目で見て確認します。
入力欄に「プレビューを見せてください」と送ると、Claudeの画面の中にブラウザの枠が開き、作ったホームページが表示されます。
構築したホームページを画面に表示するにはNode.jsが要る場合があり、その時はClaudeが「Node.jsを入れてください」と入れ方を案内してくれるので、そのとおりに進めてください。
確認するのは、下記です。
- 全ページを開けるか
→表示されたホームページのメニューやボタンを押して、全部のページに行けるか - 文章に間違いがないか
→会社名、住所、メールアドレス、サービス名 - スマホで見ても読めるか
→Claudeに「スマホの幅で表示してください」と送ると、スマホと同じ幅で表示されます
直したいところは、日本語で伝えれば大丈夫です。
どのページの、どこを、どう変えたいかを書くのがコツです。たとえば、下記のように送ります。
トップの見出しを「〇〇」に変えてください。
会社概要のページの、代表の写真をもう少し小さくしてください。
スマホで見たとき、サービスのページの文字が詰まって読みにくいので直してください。
直すとプレビューも変わるので、変わったところをその場で確認できます。
納得いくまで、これを繰り返します。
⑦ GitHubとVercelで公開する
ホームページが納得できる形になったら、インターネットに公開します。
弊社のサイトと同じく、GitHub（作ったファイルを置いておくサービス）にファイルを置き、Vercel（ホームページを公開するサービス）で公開する形がおすすめです。
ひと手間増えるように見えますが、この形にしておくと、公開した後に修正するときも、Claudeに「直した内容を公開して」と頼むだけで本番のサイトに反映されます。その分、「直した内容を公開して」は、本番に出してよいときだけ頼んでください。Autoモードでも止まりません。
まず、GitHubとVercelのアカウントを作ります。
- GitHubのアカウントを作成
GitHubの登録ページを開き登録してください - Vercelのアカウントを作成
Vercelの登録ページを開き、「Continue with GitHub」を押す→GitHubの画面に切り替わるので、許可のボタンを押せば、GitHubのアカウントでVercelに登録できます - VercelをProプランにする
Vercelの画面のサイドバーの「Settings」→「Billing」を開き、「Plan」の欄にある「Upgrade」を押して、案内に従ってカード情報を入れ、「Confirm and Upgrade」を押します
Proプランが要るのは、Vercelの公式ドキュメントで、無料のHobbyプランは「非営利の個人利用のみ」とされているためです。会社のホームページは商用に当たるので、Proプラン（開発者1人あたり月20ドル）にしてください。
次に、Claudeの画面に戻り、下記をコピーして送ります。
このホームページを公開したいです。
GitHubに非公開のリポジトリを作って、このフォルダのファイルを置いてください。
必要なものの入れ方やログインは、初心者向けに1つずつ案内してください。
ログインは私がブラウザで行います。
Claudeが、必要なものの準備とGitHubへのログインを1つずつ案内してくれます。
途中でブラウザが開いてGitHubの画面が出たら、案内に従って承認のボタンを押してください。英語の確認が出て意味が分からない時は、「何をするのか日本語で説明してください」と聞いてから許可します。Claudeから「GitHubに置けました」という返事が来たら、次に進みます。
最後に、Vercelの画面でGitHubのファイルを取り込みます。
- 画面左上のチーム名が、Proにしたチームになっているか確認
違うときは、チーム名を押してProにしたチームを選びます。無料のHobbyのままだと、そちらに公開されてしまいます - 画面の右上にある「Add New」を押し、「Project」を選択
- GitHubのリポジトリの一覧から、先ほどClaudeが作ったものの横の「Import」を押下
- 次の画面の設定はそのままで「Deploy」を押下
1〜2分ほどで公開が終わり、「〇〇.vercel.app」のようなURLが表示されます。
これをブラウザで開いて、⑥で見たのと同じホームページが出れば成功です。そのURLをスマホのブラウザにも入れて、同じように表示されるか確かめてください。
ボタンの場所が分からないときは、画面の写真（スクリーンショット）をClaudeの入力欄に貼り付けて、「次にどこを押せばいいですか」と送れば教えてくれます。スクリーンショットは、WindowsならWindowsキーとShiftキーとSキーを同時に押す、Macならcommandキーとshiftキーと4キーを同時に押して範囲を選ぶと撮れます（Macは撮った画像がデスクトップに保存されるので、それを入力欄にドラッグします）。
⑧ 独自ドメインを接続する
このままだと住所が「〇〇.vercel.app」なので、会社のドメイン（会社名.co.jpなど）に接続します。
- Vercelの画面で、公開したプロジェクトを開き、上のメニューの「Settings」から「Domains」を開く
- 会社のドメインを入力して追加
すると、ドメインを管理している会社に設定する値（DNSの設定）が表示されます - ドメインを管理している会社の管理画面にログインして、その値を設定
ドメインを買った会社（お名前.com、エックスサーバーなど）の管理画面です。弊社はエックスサーバーでドメインを管理していたので、エックスサーバーの管理画面で設定しました
DNSの設定は、ホームページ制作で一番つまずきやすいところだと思います。
Vercelに表示された画面と、ドメインの管理画面のスクリーンショットをClaudeに貼り付けて、「どこに何を入れればいいですか」と送ってください。どこに何を入れるかを教えてくれます。設定してから、新しいホームページが会社のドメインで表示されるまでには、時間がかかることがあります。
今のホームページを同じドメインで動かしている場合は、DNSを切り替えた時点で新しいサイトに切り替わります。そのため、古いページのURLを新しいページへ転送する設定もClaudeに頼んでください。検索や他のサイトからのリンクで来た人が、ページが無いという表示を見ずに済みます。
メールも同じドメインで使っている場合は注意が要ります。弊社も切り替えた翌日にメールが届かなくなり、MXレコード（メールの届け先の設定）を直しました。切り替える前に、ドメインの管理画面のスクリーンショットをClaudeに見せて、今のメールの設定が残るかを確かめてもらってください。
なお、ドメインを持っていない場合は、取得の費用が別にかかります。
⑨ お問い合わせフォームとアクセス解析を足す
最後に、会社のホームページとして必要な仕組みを足します。
弊社が公開した日に入れたのは、下記です。
- お問い合わせフォームのメール送信
→フォームから送られた内容が、自分のメールに届くようにする - 検索エンジン向けの設定
→各ページのタイトル・説明文、サイトマップなど。Googleに正しく載るようにする - アクセス解析
→Googleアナリティクスで、何人見に来たかを分かるようにする - ブログの管理画面との接続
→必要な方だけ。弊社はmicroCMSというサービスを使っています
どれも、Claudeに「〇〇をしたいです。必要なことを1つずつ教えてください」と送れば、手順を案内してくれます。お問い合わせフォームなら、下記をコピーして送ります。
お問い合わせフォームから送られた内容が、〇〇（メールアドレス）に届くようにしたいです。
必要なサービスと、アカウントの作り方、設定の手順を1つずつ教えてください。
APIキーは会話に貼らず、ファイルに直接書き込みたいので、その場所と、Vercelに設定する方法も教えてください。
フォームのメール送信とブログの管理画面は外部のサービスと接続するので、それぞれのアカウントと「APIキー」（サービスを使うための専用のパスワード）が要ります。APIキーは、会話に貼ったりGitHubに置いたりしないように、Claudeの案内どおりに保存してください。
設定が終わったら、公開したホームページのお問い合わせフォームから自分で1通送ってみて、メールが届くかを必ず確かめます。独自ドメインに切り替えた後も、もう一度フォームから送って届くかを確かめてください。
うまくいかないときは
詰まりやすいところを、公式ドキュメントに書かれている範囲でまとめます。
- Codeタブを押したら「アップグレード」を促す表示が出た：
有料プランの契約が必要です。契約してから、もう一度押します - Codeタブを押したらサインインを促す表示が出た：
画面の案内でサインインを完了して、アプリを再起動します - 「環境」や権限モードを選ぶ部分が入力欄の下に出ない：
アプリが古い可能性があります。Macは「Claude」メニュー、Windowsは「Help」メニューにある「Check for Updates」で更新してください - 権限モードの一覧に「Auto」が無い：
Autoは新しいモデルでだけ出ます。入力欄の下でモデルを新しいOpusかSonnetに変えてください。それでも無いときは「Accept edits」を選び、確認が出たら「何をするのか日本語で説明してください」と聞いてから許可します
それでも詰まったときは、画面に出ている英語のメッセージをそのままClaudeにコピーして貼り、「これは何が起きていますか。どう直せばいいですか」と聞いてみてください。
弊社は、実際にこう作りました
弊社の実例も書いておきます。作業の記録（ファイルを保存した履歴）を見返すと、流れは下記のとおりでした。
- 前日：Claudeと会話しながら要件定義書を作成
- 当日13:10：全ページと、サービス紹介などに使う画像がそろった状態で最初の保存
- 14:24：アクセス解析を接続する設定の名前違いを修正
- 16:19〜16:42：ブログに画像を入れる欄の名前のずれ、ブログ本文の行間や幅を修正
- 17:00〜17:07：検索エンジン向けの設定を追加して、その日の作業を終了
外注費はゼロです。詳しくはこちらの記事に書いています。
振り返ると、速く作れた理由は、作る前の要件定義書だったと思っています。
何を作るかが決まっていたので、当日は作って直すことに集中できました。逆に、要件が決まっていないまま作り始めると、作っては直すを繰り返すことになりがちです。
そして、1回で完璧にはなりません。
弊社も、公開した翌日以降も電話番号を外す、写真を差し替える、と直し続けています。まずは公開して、気になったところを日本語で直していく進め方でいいと思います。Claude Codeそのものの始め方はこの記事にも書いています。
「自分の会社でもやってみたいけれど、1人では不安」という方は、お気軽にご相談ください。弊社の実体験をもとに一緒に考えます。雑談レベルで構いません。
よくある質問
Q. AIでホームページは作れますか？
A. 作れます。弊社のコーポレートサイトは、Claude Codeを使って、要件定義書を作った翌日に約4時間で公開しました。ページ構成や載せる文章は人が決め、作る作業をAIに任せる形です。
Q. ホームページ作成にAIは無料で使えますか？
A. Claude Codeは無料プランでは使えず、Proなら月20ドル（約3,200円）かかります。公開に使うVercelの無料プランは個人の非営利利用向けで、会社のホームページはProプラン（開発者1人あたり月20ドル）が必要です。独自ドメインを持っていない場合は、取得の費用が別にかかります。
Q. AIでホームページを作る方法は？
A. 制作会社に依頼する場合と同じく、要件定義→原稿とデザインの方向→制作→確認→公開の順です。Claude Codeでは、要件定義書もAIに質問してもらいながら作れます。公開はGitHubとVercelを使い、最後に独自ドメインとお問い合わせフォームを設定します。
Q. AIにどう頼めばホームページを作ってくれますか？
A. いきなり「サイトを作って」と頼まず、先に目的・見てほしい人・ページ構成・載せる内容・雰囲気を要件定義書にまとめます。そのうえで、作る計画を日本語で出してもらい、確認してから作ってもらいます。
Q. AIでホームページを作るのは簡単ですか？
A. コードを自分で書く必要はないので、操作は難しくないと思います。日本語で頼んで、プレビューで確認して直すだけで進められます。ただし、どんなサイトにしたいか、誰に届けたいか、どのページに何を載せるかは、人が決める必要があります。
