share

更新日 

  • Claude

【初心者向け】Claude Codeでホームページを作成・公開する方法

自分の店のホームページを、業者に頼まず自分で作れたらと思ったことはありませんか。

Claude Codeは指示を出すだけでサイト一式を作れますが、無料プランはありません。公開の手順を知らないままだと、完成しても誰にも見てもらえないまま終わります。

本記事では、作成の手順からNetlifyでの公開、表示されないときの対処、独自ドメインと費用まで解説します。

読み終える頃には、外注費をかけずに自分のホームページを公開し、修正まで自分で回せるようになります。

監修者

SHIFT AI代表 木内翔大

(株)SHIFT AI 代表取締役 / GMO AI & Crypto株式会社 顧問 / 生成AI活用普及協会(GUGA)協議員 / Microsoft Copilot+ PCのCMに出演 / AI活用コミュニティ SHIFT AI(会員40,000人超)を運営。
『日本をAI先進国に』実現のために活動中。Xアカウントのフォロワー数は15万人超え、SNS総フォロワー数:25万人超え(2026/06時点)。

ホームページを自分で作れるようになると、同じ要領で見積書や案内文の作成もAIに任せられます。

記事を読んで手順を理解した状態と、自分のPCで一度動かした状態は別物です。読んだだけでは、明日も同じやり方に戻ります。

SHIFT AIの無料オンラインセミナーでは、CodexやClaude Codeへの任せ方を回ごとに実演します。参加者自身がその場でPCを操作するハンズオン形式です。

その場で手を動かすので、動いたところまで確かめて帰れます。直近は9月19日(土)・20日(日)の2DAYS(両日参加)で、Claude Code・Codexを扱います。予約はLINEから受け付けています。

スキルゼロから始められる!

AIエージェントセミナーを予約する

Claude Codeでホームページを作る前の準備

Claude Codeでホームページを作る準備はデスクトップアプリの導入だけで足ります。

  • Claude Codeのデスクトップアプリをインストールする
  • デスクトップアプリの「Code」タブを開く

この2つを終えれば、黒い画面を一度も開かずに次の作成手順へ進めます。

Claude Codeは、指示を出すとパソコン上のファイルを直接作ったり書き換えたりするAIツールです。ツール自体の成り立ちや料金の全体像は以下の記事で解説しています。

Claude Codeのデスクトップアプリをインストールする

最初に行うのは、公式サイトからデスクトップアプリを入れる作業です。

デスクトップアプリにはClaude Codeが同梱されているため、別途コマンドを打ってインストールする必要がありません。ターミナルに不慣れな方ほど、この入口を選ぶと詰まる箇所が減ります。

Claude公式サイトのデスクトップアプリのダウンロードページで、OS別のダウンロードボタンが並ぶ画面

ダウンロード後はアプリを起動し、Claudeのアカウントでログインします。Claude Codeの利用には有料プランの契約が必要で、無料プランのままではログインしても使えません。

OS別の細かいインストール手順や、うまく入らないときの対処は以下の記事にまとめています。

関連記事: 【MacとWindowsに対応】Claude Codeのインストール方法を3ステップで解説

デスクトップアプリの「Code」タブを開く

アプリを起動したら、画面上部の「Code」タブを開きます。

ここが作業場所です。ホームページのファイルを置くフォルダを作り、そのフォルダを開いた状態で指示を出すと、Claude Codeがその中にファイルを書き出します。

Claudeデスクトップアプリの「Code」タブで作業フォルダを選択した直後の入力待ち画面

同じアプリにある「Cowork」は別の機能です。ホームページを作るときは「Code」タブを使うと覚えておけば迷いません。

デスクトップ版とターミナルで使うCLI版では、できることと操作感が異なります。両者の違いと選び方は以下の記事で解説しています。

関連記事: 【2026年最新】Claude CodeのDesktop版とCLI版の違いは?自動化の方法や選び方

【3ステップ】Claude Codeでホームページを作成する手順

ホームページの作成は3つのステップで進みます。

ホームページ作成の3ステップの図解。①サイトに載せる情報を準備する②プロンプトを入力してページを生成する③生成結果を確認し不足ページを追加する、を順に示す

準備を飛ばしていきなり指示を出すと、内容の薄いページが出てきて修正の往復が増えます。

ステップ1:サイトに載せる情報を準備する

指示を出す前に、ページに載せる文章と情報を手元にそろえます

Claude Codeは文章も作れますが、店名や営業時間のような事実は知りません。事実を渡さないまま作らせると、もっともらしい嘘が入ったページができあがります。

最低限そろえておきたいのは次の項目です。

  • 店名・サービス名:正式な表記で用意する
  • 提供している内容:メニューや料金がわかるもの
  • 連絡先:電話番号・メールアドレス・住所
  • 営業時間と定休日
  • 写真:外観・商品・スタッフなど手元にあるもの

既にチラシやSNSのプロフィール文があるなら、その文章をそのまま渡せます。ゼロから考える手間が省け、店の雰囲気もページに反映されます。

ここまでの操作でつまずく場合は、Claude Codeの基本的な使い方から確認すると早く進みます。非エンジニア向けの入門記事で、最初に覚える操作を6つのステップで解説しています。

関連記事: 非エンジニアのためのClaude Code入門!仕事を自動化する6ステップ

ステップ2:プロンプトを入力してページを生成する

準備ができたら、作りたいサイトの内容を日本語で伝えるだけで生成が始まります。

用意した情報がある場合は、そのまま貼り付けて渡すのが確実です。以下をコピーして、角括弧の中を自分の情報に置き換えてください。

このフォルダに、以下の情報をもとにしたホームページを作ってください。

【店名】〇〇
【業種】〇〇
【提供内容】〇〇
【連絡先】〇〇
【営業時間】〇〇

条件:
- HTMLとCSSだけで作り、外部のフレームワークは使わない
- 1ページに、トップ・サービス紹介・料金・アクセス・お問い合わせの各セクションを入れる
- スマートフォンでも崩れないようにする
- 日本語のフォントを指定し、文字が読みやすいようにする
- 画像は後から差し替えられるよう、仮の枠を置く

手元に文章がない場合は、先に構成から相談する形にします。

〇〇(業種)のホームページを作りたいです。
まず、載せるべきセクションと各セクションに書く内容の案を出してください。
案に合意したあとで、HTMLとCSSのファイルを作ってください。
「Code」タブでホームページ作成のプロンプトを送信し、index.htmlへの書き込み許可を求める画面

途中でファイルの書き込みを許可するかを尋ねる画面が出ます。書き込まれる内容を確認して許可すると、そのまま作成が進みます。

条件を箇条書きで並べるほど、意図に近いページが出てきます。ふわりと頼むとふわりとしたものが返るため、譲れない点は先に書き出しておきましょう。

ステップ3:生成結果を確認し、不足ページを追加する

生成が終わったら、ブラウザで開いて中身を確かめます

Claude Codeに「作ったページをブラウザで開いて」と伝えれば、そのまま表示できます。この段階ではまだ自分のパソコンの中だけの状態で、インターネット上には出ていません。

確認したいのは次の3点です。

  • 事実の誤り:営業時間や料金が渡した内容と合っているか
  • 抜けているセクション:載せたい情報の置き場所があるか
  • スマートフォンでの見え方:横スクロールが出ていないか

足りないページがあれば「よくある質問のページを追加して、トップからリンクを張って」のように頼めます。

1回で完成させようとせず、確認と追加を数回くり返すほうが結果的に早く仕上がります。

作成したホームページのWebデザインを整える

生成直後の見た目は、指示の出し方しだいで大きく変わります

  • 配色・余白・フォントを指示で整える
  • 「AIが作った感」が出たら指示を出し直す

ここを飛ばすと、中身は良くても素人が作ったように見えるページのまま公開することになります。

配色・余白・フォントを指示で整える

デザインの調整は数値で伝えると一度で通ります

「おしゃれにして」のような曖昧な指示は、AIが解釈を決めきれずに何度も往復します。色は色コード、余白と文字は数値で指定すると意図どおりに反映されます。

デザインを次のように調整してください。

- 基調色を #3E2723、差し色を #C9A227 にする
- 見出しのフォントサイズを 32px、本文を 16px にする
- 各セクションの上下の余白を 80px にする
- 行間を 1.8 にする
- 文字色は真っ黒ではなく #333333 にする
基調色・差し色を色コードで指定してデザインを調整したあとの、トップセクションが表示された画面

色を決めかねる場合は「落ち着いた和風の配色を3案出して」と頼み、提示された色コードから選ぶ流れが早いです。指示を出す前に参考にしたいサイトを伝えるのも有効です。

Claude Codeへの指示の出し方そのものを詳しく知りたい場合は、機能別の使い方をまとめた以下の記事が参考になります。

関連記事: Claude Codeの使い方を機能別に9つ解説!始め方から活用のコツまで

「AIが作った感」が出たら指示を出し直す

「AIが作った感」が出たり、のっぺりした印象になったりする原因は、要素の強弱がついていないことにあります。

すべてのセクションが同じ大きさ・同じ余白で並ぶと、どこを見ればよいかわからない画面になります。強弱をつける指示を足すだけで印象が変わります。

  • 最初の画面を大きく:トップの写真とキャッチコピーを画面いっぱいに
  • 申し込みボタンを目立たせる:差し色を使い、他より一回り大きく
  • 情報の密度を変える:料金表は詰め、紹介文は余白を広く

修正を重ねるうちに、かえって崩れていくことがあります。その場合は一度に多くを頼まず、1か所ずつ直して都度ブラウザで確認する進め方に切り替えてください。

デザインをさらに作り込みたい場合は、デザインツールで作った画面をClaude Codeに渡す方法もあります。Figmaとの連携手順は以下の記事で解説しています。

関連記事: FigmaとClaude Codeの連携手順!MCP設定と双方向の使い方

Netlifyでホームページを公開する手順

公開はファイルを預ける先を用意して置くだけの作業です。

Netlifyで公開する3ステップの図解。①公開用フォルダを準備する②ドラッグ&ドロップして公開する③発行URLで表示を確認する、を順に示す

この3ステップを終えた時点で、世界中の誰でもアクセスできる状態になります。

Claude Code自体にホームページを公開する機能はありません。作ったファイルを置く場所は別に用意する必要があり、主な選択肢は次の3つです。

公開先料金向いている人注意点
Netlify
(本記事の推奨)
無料プランありとにかく早く公開したい人PHPやWordPressは動かない
GitHub Pages無料更新の履歴を残したい人GitHubのアカウント作成と管理画面での設定が必要
Vercel無料プランあり個人の趣味のサイト無料プランは非商用の個人利用に限定される

店舗や会社のホームページを作るなら、Vercelの無料プランは選べません。無料のHobbyプランは非商用の個人利用に限定されているためです。

公式のガイドラインでは、商品やサービスの販売を宣伝するサイトは商用利用にあたると明記されています。
>Vercelのガイドラインはこちらから

Netlifyを推す理由は、アカウントを作ってファイルの入ったフォルダを画面に落とすだけで公開できる点にあります。GitHubの操作も、ターミナルでのコマンド入力も要りません

ステップ1:公開用フォルダを準備する

最初に、公開するファイルだけを入れたフォルダを用意します。

Claude Codeが作業したフォルダには、メモやテスト用のファイルが混ざっていることがあります。そのまま公開すると、見せるつもりのないファイルまでインターネット上に置かれます。

迷ったらClaude Codeに次のように頼んでください。

公開に必要なファイルだけを publish というフォルダにまとめてください。
トップページのファイル名は index.html にしてください。
まとめ終わったら、フォルダの中身を一覧で見せてください。

トップページのファイル名は必ず index.html にします。この名前でないと、公開してもトップページが表示されません。

ステップ2:Netlifyでドラッグ&ドロップして公開する

Netlifyの管理画面にフォルダを落とすだけで公開が完了します。

手順は、Netlifyの公式サイトでアカウントを作り、管理画面のアップロード欄にフォルダをドラッグ&ドロップするだけです。

アカウント作成は、メールアドレスでもGitHubのアカウントでも進められます

Netlifyの管理画面で、フォルダをドラッグ&ドロップで受け付ける「Drop here」のアップロード欄

アカウント作成とメールアドレスの確認は、AIに代わってもらえない作業です。ここだけは自分で操作する必要があると知っておけば、途中で手が止まりません。

ステップ3:発行されたURLで表示を確認する

公開が終わると、Netlifyが自動でURLを発行します

URLは「ランダムな文字列.netlify.app」の形で表示されます。このURLを開いて、自分のパソコンで見ていたページと同じものが表示されれば公開は成功です。

Netlifyでの公開が完了し、発行されたURLと「Claim this site」のボタンが表示された画面

ログインしないまま公開した場合は、画面の「Claim this site」からアカウントへ紐付けます。紐付けるまではパスワードを求められ、1時間で消えます

アップロードの直後は反映に少し時間がかかります。すぐに表示されなくても故障ではないため、数分待ってから読み込み直してください。

公開したのに表示されないときの対処法

公開直後につまずくのはほぼ次の3パターンです。

公開後によくある3つの症状の図解。①404エラー=ファイルの置き場所②見た目が崩れる=CSSの指定方法③更新しても変わらない=反映待ち、を示す

いずれも原因がはっきりしているため、当てはまるものから順に確かめれば解決します。

404エラーが出る

404が出る原因は、index.htmlがフォルダの一番上にないことがほとんどです。公開後に404が出るとき、原因は次の2つのどちらかです。

  • ファイルの置き場所:公開サービスはフォルダ直下の「index.html」をトップページとして扱う。内側のフォルダに入っていると見つけられない
  • ファイル名の大文字と小文字:自分のパソコンでは開けても、公開後は「About.html」と「about.html」が別のファイルとして扱われる

フォルダの構造を作り直したいときは、Claude Codeに「index.htmlをフォルダの直下に移して、ファイル名をすべて小文字に統一して」と伝えれば一度で済みます。

見た目が崩れる(CSSが反映されない)

文字だけが並んだ画面になるのは、デザインのファイルを読み込めていない状態です。

原因はファイルの置き場所の書き方です。先頭にスラッシュを付けると、公開先はサイトの一番上の階層から探すため、別の場所を見に行って見つけられません。

画像が表示されない場合も同じ原因です。まとめて直すには、次のように頼みます。

CSSと画像の読み込みパスを、すべて相対パスに直してください。
先頭のスラッシュは外してください。
直したあと、参照が切れているファイルがないか確認してください。

直したファイルをもう一度アップロードすれば、元どおりの見た目で表示されます

更新しても表示が変わらない

直したはずなのに変わらないときは、古い表示が残っているだけのことが多いです。

ブラウザは一度読み込んだページを手元に保存して、次回はそれを表示します。この仕組みのせいで、更新後も古いページが出続けます。

確認の順番は次のとおりです。

  1. Netlifyの管理画面でアップロードが完了しているかを見る
  2. 数分待ってからページを読み込み直す
  3. それでも変わらなければ、シークレットウィンドウで開いて確かめる

シークレットウィンドウで新しい表示になっていれば、公開は正しくできています。手元の表示が切り替わるのを待つだけで済みます。

独自ドメインとSSLを設定する方法

自分の名前のURLで見せるには独自ドメインの設定が要ります。

独自ドメイン設定の3段階の図解。①ドメインを取得してNetlifyに設定する②httpsで表示されるか確認する③反映されないときは設定を見直す、を順に示す

発行されたままのURLでも表示はできますが、名刺やチラシに載せるには独自ドメインのほうが伝わります。

独自ドメインを取得してNetlifyに設定する

ドメインは取得サービスで買ってから公開先に登録します

お名前.comやムームードメインといったサービスで、使いたい文字列が空いているかを検索して申し込みます。

Netlifyの「Domain management」でドメインを検索し、候補ごとの空き状況と年額が一覧表示された画面
  • 他のサービスで取得する:お名前.comなどで申し込む。年額は安く済むことが多い
  • Netlifyの画面で取得する:「Domain management」で検索してそのまま購入できる。設定の手間が少ない

どちらも支払いとアカウント登録が必要なため、この作業はAIに任せられません。

他のサービスで取得した場合は、Netlifyの管理画面のドメイン設定欄にそのドメインを入力します。

すると向き先を変えるための情報が表示されるので、その値を取得サービス側の管理画面に登録します。間違えるとページにたどり着けません。

httpsで表示されているかを確認する

ドメインの設定が済んだら、URLがhttpsで始まっているかを必ず見ます。

httpsは通信を暗号化する仕組みで、これがないとブラウザに「保護されていない通信」という警告が出ます。問い合わせフォームを置くサイトでは、訪問者が入力をためらう原因になります。

Netlifyでは証明書が自動で用意されますが、ドメインの向き先が正しく変わるまでは有効になりません。独自ドメインを設定した直後に警告が出ても、しばらく待てば解消します

  • 設定した直後に警告が出る:反映を待っている状態のため、時間をおいて開き直す
  • 半日以上たっても消えない:向き先の設定を写し間違えている可能性が高いため、管理画面の値と照らし合わせる

httpsで表示される状態にしておけば、訪問者が警告を見ることなくページを読めます。問い合わせや予約のフォームを置いても、安心して入力してもらえます。

ドメインが反映されないときに設定を見直す

ドメインの変更は反映まで数時間から1日ほどかかります

設定した直後に表示されなくても、失敗したとは限りません。変更した情報がインターネット全体に行き渡るまで時間が必要で、その間は場所によって見え方が変わります。

1日待っても表示されない場合に見直したいのは次の2点です。

  • 案内先の名前が違う:似た名前が複数用意されているサービスでは取り違えが起きやすい
  • 設定する場所を間違えている:取得サービス側とNetlify側のどちらに入れるかを確認する

Netlifyの管理画面には設定が正しく反映されたかを示す表示があります。ここが正常になっていれば、あとは時間の問題として待てば済みます。

公開後にホームページを更新する方法

公開後の修正もClaude Codeへの指示だけで進みます。

  • 修正内容をClaude Codeに反映させる
  • 変更したファイルだけをNetlifyに再アップロードする

この流れを覚えておけば、営業時間の変更や新メニューの追加を業者に頼まずに反映できます。

修正内容をClaude Codeに反映させる

直したい箇所はどのページのどこかを添えて伝えます

「営業時間を直して」だけでは、どのページのどの記載かが伝わりません。ページ名と現在の記載、変えたい内容の3点を書けば一度で通ります。

トップページのアクセスの欄にある営業時間を修正してください。
現在の記載: 10時から19時
修正後: 10時から20時(水曜のみ18時まで)
同じ内容がお問い合わせのページにもあれば、そちらも合わせてください。

同じ情報が複数のページに載っていることはよくあります。まとめて直すよう頼めば、片方だけ古いまま残る事故を防げます

変更したファイルだけをNetlifyに再アップロードする

反映はフォルダをもう一度落とし直すだけで完了します。

Netlifyの管理画面には、公開中のサイトを差し替えるためのアップロード欄があります。手順は次の3つです。

  1. Claude Codeに公開用フォルダを作り直してもらう
  2. Netlifyの管理画面のアップロード欄にドラッグ&ドロップする
  3. 数分待ってから公開URLを開き、変更が反映されたか確かめる

更新のたびに新しいサイトを作る必要はありません。差し替えたあとは、公開直後と同じように数分待ってから表示を確認してください。

この手順に慣れると、思いついたときに自分で直せるようになります。修正のたびに見積もりを取って待つ必要がなくなり、情報の鮮度を保ちやすくなります。

AIに任せられる作業・人がやる作業の一覧

ホームページ作りでClaude Codeに任せられるのはファイルを書く作業で、書き込みの許可とアカウント登録は人が行います。

この切り分けを先に知らないと、途中で「AIがやってくれるはずなのに進まない」と感じて手が止まります。止まりやすいのは、外部サービスへの登録と本人確認が挟まる箇所です。

工程担当補足
サイトのファイル作成Claude Code指示を出すだけで一式が生成される
デザインの調整日本語の指示で色や余白を直せる
ファイル構成の整理公開用フォルダへのまとめも頼める
ファイル書き込みの許可人間作成の途中で確認画面が出る。内容を見て許可する
公開サービスのアカウント登録メールアドレスの確認まで自分で操作する
ファイルのアップロード管理画面へのドラッグ&ドロップ
独自ドメインの取得と支払いクレジットカード情報の入力が必要
ドメインの向き先の設定取得サービスの管理画面で操作する
公開後の文章修正Claude Code指示を出せばファイルが更新される

人が行う4つは、いずれも本人確認や支払いが伴うためAIに代行させられない性質のものです。逆に言えば、それ以外はすべて指示で片づきます。

この境目を把握しておくと、詰まったときに「自分の操作が必要な場面だ」と判断できます。作業が止まる時間が減り、公開までの日数を短くできます。

Claude Codeでのホームページ作成にかかる費用

かかる費用はAIの利用料とドメイン代のみです。

ホームページ作成にかかる費用を見る3つの観点の図解。①Claude Code本体の料金②サーバー代とドメイン代③外注費用との比較、を示す

内訳を先に把握しておけば、想定外の請求に驚くことがなくなります。

Claude Code本体の料金プラン

Claude Codeに無料で使えるプランはありません

利用にはClaudeの有料プランの契約が必要です。ホームページを1つ作る程度であれば、一番下の有料プランで足ります。契約前に押さえておきたいのは次の2点です。

  • 使用量に上限がある:一定時間内に使える量が決まっており、超えると時間をおくまで待つことになる
  • Web版のClaudeと枠を共有する:日常的にチャットで使っていると、その分だけ作業に回せる量が減る

作業が途中で止まると感じたら、チャットでの利用を控えるか、上位のプランに切り替える判断です。ホームページを作る期間だけ上位プランにする使い方もできます。

Claude Codeの料金プランごとの違いと、用途に応じた選び方は以下の記事で解説しています。

関連記事: 【2026年最新】Claude Codeの料金体系は?制限や用途別のおすすめプランも解説

サーバー代とドメイン代の目安

公開そのものはNetlifyの無料プランで賄えます

個人の店舗や小規模な会社のホームページであれば、無料プランの範囲を超えることはほとんどありません。レンタルサーバーを別に契約する必要もありません。

費用がかかるのは独自ドメインだけで、目安は次のとおりです。

  • 公開先(Netlify):無料プランの範囲で運用でき、追加の費用はかからない
  • 独自ドメイン:末尾が「.com」のもので年額1,500円前後が目安。取得サービスによって幅がある

独自ドメインを使わず、発行されたままのURLで運用する選び方もあります。その場合はドメイン代もかからず、AIの利用料だけで運用できます

外注費用との比較で見る合計金額

自分で作る場合の合計は月々のAI利用料と年額のドメイン代だけに収まります。

項目費用の目安備考
Claude Code(Claudeの有料プラン)月額制作り終えたあとに解約する選び方もできる
公開先(Netlify)0円無料プランの範囲で運用できる
独自ドメイン年額1,500円前後「.com」の場合の目安。使わない選択も可

制作会社に依頼する場合、費用はページ数や機能で大きく変わります。見積もりを取って比べる手間と待ち時間を考えると、まず自分で作ってみて判断する進め方に無理がありません。

作り終えたあとにAIのプランを解約すれば、維持費はドメイン代だけになります。修正したくなったタイミングで再開する使い方もできます。

プランを上げても、作業する人が自分のままでは、増えるのは使える機能だけです。

使える機能を増やすより効いてくるのは、指示を出して結果を確かめる役目そのものをAIに渡してしまうことです。

SHIFT AIの無料オンラインセミナーでは、CodexやClaude Codeへの任せ方を回ごとに実演します。読むだけでは、明日も同じやり方に戻ります。

参加者自身がその場でPCを操作し、動いたところまで確かめて帰れます。直近は9月19日(土)・20日(日)の2DAYS(両日参加)で、Claude Code・Codexを扱います。予約はLINEから受け付けています。

スキルゼロから始められる!

AIエージェントセミナーを予約する

Claude Codeでのホームページ作成に関するよくある質問

Claude Codeでのホームページ作成に関する質問は以下の5つです。

  • Claude CodeでWordPressのホームページも作れますか
  • Claude CodeでLPも作成できますか
  • 問い合わせフォームは設置できますか
  • Claude Codeで作ったホームページは商用利用できますか
  • Claude Code以外のツールでもホームページを作成できますか

質問に対する回答を確認して、自分の作りたいホームページに合う進め方を選ぶ参考にしてみてください。

Claude CodeでWordPressのホームページも作れますか?

本記事で作るのは、サーバー側でプログラムが動かない作った内容をそのまま表示するホームページ(静的なホームページ)です。

Claude CodeはWordPress向けのテーマやプラグインのコードも書けますが、その場合はWordPressが動くレンタルサーバーの契約が別途必要になります。

推奨しているNetlifyは静的なファイルだけを配信する仕組みのため、WordPressは動きません。使い分けの目安は次のとおりです。

  • WordPressが向く:毎日のように記事を足すブログや、複数人で更新するサイト
  • 静的なホームページが向く:店舗や会社の案内が中心で、更新がときどきのサイト

迷ったら静的なホームページから始めて構いません。あとからWordPressへ乗り換えられます。

Claude CodeでLPも作成できますか?

1枚もののLPは、むしろ作りやすい部類に入ります。

LPはページ数が少なく、上から下へ読ませる流れがはっきりしているためです。本記事の手順のうち、ページを追加する工程を省くだけでそのまま使えます。

指示を出すときは、載せたい要素を上から順番で伝えると構成の整ったLPになります。

  • キャッチコピー
  • 読者が抱えている悩み
  • 提供する内容と料金
  • お客様の声
  • 申し込みボタン

要素を並べ替えたいときも、順番を言い直すだけで作り直せます。反応の良い並びを何度も試せるのは、自分で作る場合ならではの利点です。

問い合わせフォームは設置できますか?

設置できますが、外部のフォームサービスと組み合わせます

静的なホームページには、送信された内容を受け取って保存する仕組みがありません。入力欄だけを作っても、送信ボタンを押した内容がどこにも届かない状態になります。

受け取り方は2つあります。

  • Googleフォームを使う:フォームを作り、そこへ飛ぶボタンをホームページに置く。「お問い合わせのボタンを置いて、このURLに飛ぶようにして」と伝えれば設置できる
  • 連絡先を載せるだけにする:電話番号やメールアドレスを書いておけば、フォームがなくても問い合わせは受けられる

最初は連絡先の記載から始め、問い合わせが増えてきた段階でフォームを足す進め方でも構いません。

Claude Codeで作ったホームページは商用利用できますか?

Claude Codeで作ったページは、店舗や会社のサイトとしてそのまま使えます。生成されたコードの使い道に制限はかかりません。

注意が必要なのは、Claude Code側ではなく公開先の規約です。無料プランに非商用の制限を設けているサービスがあり、そこに事業用のサイトを置くと規約に反します。

本記事でNetlifyを推奨しているのは、この制限を気にせず事業用のサイトを置けるためです。公開先を選ぶときは、無料プランの利用条件を必ず確認してください

Claude Code以外のツールでもホームページを作成できますか?

テンプレートから選ぶ形のツールもあります。

Claude Codeはファイルを直接作るため、思いどおりの構造にできる代わりに指示を出す手間がかかります。用意された型に沿って作りたい場合は、専用のツールのほうが早く仕上がります

ただしテンプレート型のツールは、月額の利用料がかかり続けるものが多い点に注意が要ります。

  • Claude Codeが向く:構造を自由に決めたい。作ったファイルを自分の手元に残したい
  • テンプレート型が向く:用意された型に沿って、とにかく早く形にしたい

どのツールが自分に合うかを比べたい方向けに、ホームページを作れるAIツールを用途別にまとめた記事があります。

関連記事: AIウェブサイトビルダー10選!効率よくホームページを作成しよう

Claude Codeで自作したホームページを公開まで完結させよう

Claude Codeを使えば、デスクトップアプリを入れて日本語で指示を出すだけでホームページのファイルが作れます。

ただしClaude Code自体に公開の機能はありません。Netlifyにフォルダを落として公開し、必要なら独自ドメインを当てるところまで進めて、はじめて人に見てもらえる状態になります。

まずは手元の情報をそろえて、1ページだけでも作って公開してみてください。作って公開した経験があると、次に直したいときの動き方が体に入ります。

一方で、ホームページが作れるようになると、次は日々の業務そのものをAIに任せる方法が気になってきます。

指示の出し方を身につけておけば、使い道はホームページに限りません。

AIの使いどころが見えても、工程を前に進めるのは自分という点は変わりません。

変わるのは、工程ごと引き渡してしまったときです。目的を一度伝えれば、あとは確認だけが自分の役目になります。

SHIFT AIの無料オンラインセミナーでは、CodexやClaude Codeへの任せ方を回ごとに実演します。読むだけでは、明日も同じやり方に戻ります。

参加者自身がその場でPCを操作し、動いたところまで確かめて帰れます。直近は9月19日(土)・20日(日)の2DAYS(両日参加)で、Claude Code・Codexを扱います。予約はLINEから受け付けています。

スキルゼロから始められる!

AIエージェントセミナーを予約する

目次

執筆者

宇津木隼人

複数のAI系SEOメディアでライターの経験。
専門・得意な領域はSEO/GEO/コンテンツマーケ/アプリケーション開発。