Claudeを最大限活用して、プロが本気でお店のホームページを作りました。WordPressには直接触らずチャットだけで進め、いつもなら約100時間かかる制作を、人の作業は体感10時間未満で初稿まで仕上げています。
やってみてわかったのは、誰でも良いサイトを作れる時代が来たということです。そのうえで差がつくのは、作る前の設計でした。
本記事では、岡山市東区の中古車販売・買取店のサイト制作を例に、使った道具、かかった時間、作る順番の変化、人が時間をかけたところ、つまずいたことまでをまとめます。
この記事の要約
- Claudeとのチャットだけで、WordPressに直接触らずに22ページのサイトの初稿まで作れた
- AIが動いたのは約35時間、人の作業は体感10時間未満。いつもの作り方なら約100時間かかる規模
- AIを使うと、先にテストサイトを作ってからお客様に聞く順番に変えられる
- 誰でも良いサイトを作れる時代になったが、差がつくのは作る前の設計
AtoZ Designが今回の制作で実際に行ったことをもとに解説します。
※本記事の内容と画面は2026年11月時点のものです。
今回の検証｜Claudeを最大限使って、本気で作った
※公開前のテストサイトです。内容はお店に確認中の部分があり、本番公開後に正式なサイトへ差し替えます。
検証の目的
今回の制作は、ひとつの検証も兼ねていました。ブラウザで使うClaudeで、誰でも本格的なサイトを作れるのかという検証です。
Claude Codeのような開発者向けの道具は使わず、ブラウザで開くClaudeのチャットから指示を出すだけで、お店が自分で育てられるサイトまで作れるか。実際のお客様のサイトで、AIを最大限使って確かめました。
作ったサイト
| 項目 | 内容 |
|---|---|
| お店 | 岡山市東区の中古車販売・買取店 |
| ページ数 | 22ページ（トップ、サービス一覧と各サービス、ハスラーカスタム、はじめての方へ、実績、コラム、会社概要、お問い合わせなど） |
| 仕組み | WordPress＋テーマ「SWELL」 |
| 今の状況 | テストサイトで初稿まで作り、お客様へのヒアリングを進めている段階 |
使った道具
| 道具 | 役割 |
|---|---|
| Claude（ブラウザで開くチャット） | 設計の相談と、すべての指示を出す相手 |
| スプレッドシート | サイトの構成を、Claudeと一緒に設計した |
| Claude in Chrome（Chromeの拡張機能） | WordPressの管理画面を操作して、ページを作る・直す |
| Gemini・ChatGPT | 画像づくり。Claude in Chromeが指示を出し、チェックもさせた |
| Chromeリモートデスクトップ | 外出中にスマホからパソコンにつなぎ、止まった作業を再開する |
| WordPress＋SWELL | サイトの土台。公開後はお店が自分で更新する |
WordPressの管理画面は自分では直接触らず、すべてClaudeへの指示で作りました。
Claude Codeではなく、Claude in Chrome×WordPressにした理由
Claudeでホームページを作る記事は、Claude Codeで一からHTMLを作る方法が多く見られます。今回は、あえてWordPressとSWELLの組み合わせを選びました。理由は、お店が自分でサイトを育てやすいからです。
- HTMLが機械にも読み取りやすい作りで、構造化データも自動で出力される。SEOやAI検索に強い土台になると考えています
- 納品後も、お店の人が自分で更新しやすい
- 制作会社の手を離れても運用でき、「自分で育てる」サイトに向いている
一方で、SWELLはテーマのデザインが細部まで決まっています。これまでの制作では、そのデザインを消して、オリジナルのデザインにするのが大変でした。Claude in Chromeを使い、元のデザインを消すことも、思いどおりのデザインに変えることも、指示だけで進めました。
かかった時間｜いつもの約100時間が、人の作業は10時間未満に
今回の制作で、AIが動いた時間は約35時間、人が手を動かした時間は体感10時間未満でした。
| 区分 | 時間 | 中身 |
|---|---|---|
| いつもの作り方 | 約100時間（目安） | デザイナー・コーダーと分担して作る |
| 今回：AIが動いた時間 | 約35時間 | 設計（Claudeとの打ち合わせ）約15時間、WordPressで形にする作業約20時間 |
| 今回：人が使った時間 | 体感10時間未満 | 設計の相談、操作の許可、初稿の直しの指示 |
作業時間は細かく計っていないため、AIの時間はおおよその合計、人の時間は体感で書いています。
短い時間で1枚のページを作る方法もありますが、今回は22ページを、SEOとAI検索に向けた設計から作り込んだうえでの時間です。
人が手を動かしたのは、相談・許可・直しの指示だけ
Claudeが作業している間は、ほとんど待っているだけです。作業用とは別のパソコンでほかの仕事を進め、Claudeに許可を出すときと、一緒に相談するときだけ、作業用のパソコンで入力しました。
人がしたことは、次の3つだけです。
- サイトの構成を、Claudeと相談しながら決める
- Claude in Chromeが操作を進めるための許可を出す
- 初稿のデザインを見て、導線や細かなデザイン、余白の直しを指示する
パソコンの前を離れていてもスマホから許可を出せるようにしたのですが、制作中に一番つまずいたのはここでした。詳しくは「つまずいたこと」の章で書きます。
作る順番が変わった｜先にテストサイトを作ってから聞く
AIを使って一番変わったのは、速さよりも作る順番です。これまでとは逆に、先にテストサイトを作ってから、お客様に詳しく聞く形にしました。
| 段階 | これまで | 今回 |
|---|---|---|
| 最初 | ワイヤーフレームを作る前に、細かくヒアリングする | 軽い打ち合わせで、大まかなイメージとお店のこだわりを聞く |
| 次 | デザインを起こす | 検索を意識したテストサイトを、先に作る |
| 確認 | デザインを見てもらってから直す | 確認が必要なところを見える化して、2回目のヒアリングで聞く |
| 直し | デザイナーやコーダーが手で直す | ヒアリングの回答をAIに渡して、一気に直す |
先に作るから、聞かれていることが目で見てわかる
テストサイトの初稿は、検索を意識して内容を広めに作ります。お店に確認できていない部分は、仮の内容のまま置いておきます。
そのうえで、確認が必要なところを制作側で見える化し、Claudeにヒアリングシートとしてまとめてもらいました。この順番には、次のような利点があります。
- お客様は、どのページの何を聞かれているのかがわかりやすい
- 制作側も、確認待ちのところがひと目でわかる
- 回答をAIに渡せば一気に直せるので、直しの負担が小さい
これまではデザインまで作ってから直していたので、修正のたびにデザイナーやコーダーが大変な思いをしていました。今はヒアリングの回答をAIに渡せば一気に直せます。お客様にとっても、制作側にとっても便利な順番です。
AtoZ Design 大西
確認していない数字は「○○○」のまま残す
ただし、年や番号などの数字は、推測で入れずに「○○○」のまま残しています。AIは、それらしい数字を書いてしまうことがあるためです。
今は、2回目のヒアリングの回答を待っている段階です。回答をもとに初稿を直し、お客様に見ていただく予定です。お客様の反応は、見ていただいたあとにこの記事へ追記します。
人が時間をかけたところ①｜サイトの設計
設計に使った約15時間は、Claudeと打ち合わせを重ねた時間です。スプレッドシートの上でサイトの構成をClaudeと一緒に考え、SEOとAI検索に強い土台を作り込んでから、WordPressで形にしました。
特に気を使ったのは、検索とAIに参照されるための設計です。時間をかけたのは、主に次の4つでした。
- 1ページごとの語句とセクション：検索エンジンとAIに参照されるように、ページごとに何をどの順で載せるか
- トップページ：どんな情報を置けば、お問い合わせにつながりやすいか
- サイトを育てる仕組み：公開後に記事や実績を増やしていけるように、投稿の仕組みをどう作るか
- 更新のしやすさ：お店の人が画像や文章を差し替えやすい入力欄を用意し、その仕組み自体もSEOに強くする
自分だけでなく、お店の人が使いやすいWordPressになることを大事にしました。設計シートの中身は制作でいちばん大事な部分なので、画面は一部だけを載せています。
SEOとAI検索の両方に向けて設計する
AI検索への対策には、2つの考え方があります。AIに引用・推薦されるための対策（LLMO）と、AI検索に向けてサイトの構造や中身を整える対策（AIO）です。今回の設計では、検索エンジン向けのSEOとあわせて、この2つを補い合う形で取り入れました。LLMOの考え方は、LLMO対策とはで詳しく解説しています。
今回のお店では「何を一番強くするか」から決めた
お店が一番強くしたいのは、車の買取です。ハスラーのカスタムは集客の入口として、メニューにも単独で置きました。
人が時間をかけたところ②｜デザイン
WordPressで形にした約20時間のうち、一番時間を使ったのはデザインの修正です。
人にもAIにも読みやすくする
SEOに強いサイトを設計すると、どうしても文章が多くなります。一方で、人が見て直感的にお問い合わせまで進めるデザインや導線は、今のAIにはまだ難しいと考えています。
そこで、文章をただ並べるのではなく、カード型にまとめたり、画像やアイコンを増やしたりして、テキストを読まなくても見るだけで理解できるデザインにしました。文章は、それを補う形にしています。
人からもAIからも見やすく、読み取りやすいサイトにすることに一番時間をかけました。プロのデザイナーが一番気を使っているところだと思います。
AtoZ Design 大西
配色は、お店に合わせて途中で変えた
最初はロゴに合わせた配色の方針でした。打ち合わせを経て、女性向けの少しかわいいデザインに変えています。配色はハスラーの青系のオフブルー、ベースはクリーム寄りの白です。
ガラスコーティングのページを直した流れ
ガラスコーティングのページは、SEOの設計がまだ弱かったので、さらに強くするためにセクションを見直しました。そのとき、ページだけでなく、スプレッドシートの設計も一緒に直しています。
画像はClaude in ChromeがGemini・ChatGPTを動かして作った
できあがったデザインや画像がいまいちだったので、画像づくりにはGeminiやChatGPTも使いました。指示を出したのはClaude in Chromeです。それぞれの画面を操作して画像を作らせ、できた画像のチェックもさせています。WordPressの操作と同じく、画像づくりもClaudeとのチャットから進めました。
セクション、メガメニュー、ボタンも指示で作り直した
初稿を見てから、セクションごとのデザイン、メガメニューの追加、ボタンのデザインなどを指示して作り直しました。基本の設計ができているので、お客様がデザインを大きく変えたい場合でも、AIに作り直させるのは楽だと感じています。
つまずいたこと｜Claude in Chromeの接続が途中で切れる
制作中に一番つまずいたのは、パソコンの前を離れているときの作業です。
Claude in Chromeに作業をさせている間、人はパソコンの前にいなくても構いません。席を外しているときも作業を止めないように、許可はスマホから出していました。ところが、Claude in Chromeの接続が途中で切れて、作業が止まることが何度かありました。
対策していたこと
接続が切れる原因として考えられるものは、先にひととおり対策していました。
- パソコンのスリープは5時間に設定する
- 電源はバッテリーではなく、コンセントから取る
- Wi-Fiは常につながった状態にする
- Chromeの省エネ機能は使わない
- 許可はスマホから出す
なお、Claudeのデスクトップアプリは使わず、ブラウザで開くチャットから指示を出していました。それでも起きたのが、Claude in Chromeの接続切れです。作業中のタブを閉じたときに起きやすい印象があります。
解決策｜スマホからパソコンのChromeにつなぐ
Claude in Chromeはパソコンで使う拡張機能で、スマホでは動きません。そこで、Googleの「Chromeリモートデスクトップ」を使い、スマホからパソコンの画面を開けるようにしました。
設定の流れは次のとおりです。
- パソコンで、Chromeリモートデスクトップのリモートアクセスを設定する（パソコンの名前とPINを決める）
- スマホにChromeリモートデスクトップのアプリを入れ、パソコンと同じGoogleアカウントでログインする
- 作業が止まったら、スマホからパソコンにつなぎ、許可を押したり、Claude in Chromeをつなぎ直したりする
パソコン側で、PINを決めて設定します。設定が終わると「オンライン」と表示されます。
スマホのアプリでパソコンを選び、PINを入力するとつながります。
つながると、スマホからパソコンの画面を開いて操作できます（画像のパソコンの画面はぼかしています）。
細かい手順は、Googleの公式ヘルプ「Chrome リモート デスクトップを使って他のパソコンにアクセスする」で確認できます。
Claude in Chromeを使うときは、セキュリティに気をつける
Claude in Chromeは、ログインしている自分のChromeを、AIが直接操作する道具です。公式ヘルプでも、安全のための仕組みがあってもリスクはあると案内されています。使うときは、次の点に気をつけてください。
- 操作の許可を、すべて省く設定にしない
- 「このサイトは常に許可」は、作業に必要なサイトだけにする
- パスワードやカード情報など、大事な情報の入力はAIに任せない
- 使い始める前に、Claude in Chromeの公式ヘルプで安全な使い方の案内を読んでおく
なお、「常に許可」にしたサイトでも、ファイルのダウンロードや大事な情報の入力の前には、確認を求められます。
外からつなぐときの注意
外からパソコンを操作できるようになるので、次の点に気をつけましょう。
- PINは、誕生日や連番のような推測されやすい数字にしない
- Googleアカウントの2段階認証を設定しておく
- 長く離れる日は、パソコンがスリープに入らないよう設定を見直す（今回は5時間に設定）
検証してわかったこと｜誰でも良いサイトを作れる時代が来た
AIに任せたこと、人が決めたこと
今回、AIには作業を、人には判断を割り振りました。
| AIに任せたこと（人の指示で） | 人が決めたこと |
|---|---|
| WordPressの管理画面を操作して、ページを作る・直す | サイトの設計（どのページに、何を、どの順で載せるか） |
| テーマの元のデザインを消して作り直す | 導線と、人が見てわかるデザインの判断 |
| Gemini・ChatGPTを使った画像づくりとチェック | 初稿を見てからの直しの指示 |
| ヒアリングシートのまとめ | 数字を推測で入れず、お客様に確認すること |
| ヒアリングの回答をもとにした一括の修正 | 操作の許可 |
ある程度のデザインなら、指示だけで作れる
基本の設計ができていれば、お客様がデザインを大きく変えたい場合でも、AIへの指示で作り直せます。ある程度のデザインなら、指示だけでなんでも作れそうだと感じています。個人的には、デザインツールのFigmaがいらない環境になりそうです。
差がつくのは、作る前の設計
WordPressの操作も、画像づくりも、今回はClaudeとのチャットで指示を出して進めました。誰でもAIを使って良いサイトを作れる時代が来た、というのが今回の実感です。
そのうえで、良いサイトになるかどうかは、作る前の設計で決まります。設計があれば、誰でもサイトを作れる。それが今回の検証の結論です。この設計をお店と一緒に作るのが、AtoZ Designの新しいサービスです（記事の最後で紹介します）。
本番公開とAI検索の結果は、このあと追記します
今回のサイトは、本番公開に向けて制作を続けています。公開の前後で、検索やAI検索での見え方がどう変わるかを記録し、この記事に追記する予定です。
Claudeでホームページを作ることに関するFAQ
Q. Claudeの無料プランでも、今回の方法でホームページを作れますか？
有料プランが必要です。今回使ったClaude in Chromeは、Pro・Max・Ultra・Team・Enterpriseの有料プランで使える機能です。使える条件は変わることがあるため、公式ヘルプで確認してください。
Q. スマホだけでホームページを作れますか？
パソコンが必要です。Claude in Chromeはパソコンで使う拡張機能で、スマホでは動きません。今回は作業をパソコンで進め、スマホからは許可を出したり、Chromeリモートデスクトップでパソコンにつないだりしました。
Q. Claude CodeとClaude in Chromeは何が違いますか？
操作する場所が違います。Claude Codeは、コードを読み、ファイルを編集し、コマンドを実行する開発者向けの道具で、HTMLを一から作る使い方が多く見られます。Claude in Chromeはブラウザを操作する拡張機能で、WordPressの管理画面のように、人が画面で行う作業を指示どおりに進めます。
Q. プログラミングの知識がなくても作れますか？
作れます。今回もWordPressには直接触らず、Claudeとのチャットで指示を出して進めました。ただし、良いサイトにするには、作る前の設計が欠かせません。
Q. AIで作ったホームページは、検索やAI検索に出ますか？
すぐに結果が出るとは限りません。今回は、SEOとAI検索に向けた設計を先に作り込んでから形にしました。ただ、新しいサイトはサイトの評価（いわゆるドメインパワー）が積み上がるまでに時間がかかり、競合が強い分野では、すぐにAI検索で結果を出すのが難しい場合もあります。
公開後も記事や実績を増やし、継続して育てていくことが欠かせません。今回の結果は、公開後にこの記事へ追記します。
まとめ｜Claudeで良いサイトは作れる。差がつくのは作る前の設計
Claudeでのホームページ作成について、本記事で解説した要点を整理します。
- Claudeとのチャットで指示を出し、WordPressに直接触らずに22ページのサイトの初稿まで作った
- AIが動いたのは約35時間、人の作業は体感10時間未満。いつもの作り方なら約100時間かかる規模
- AIを使うと、先にテストサイトを作ってからお客様に聞く順番に変えられる
- 人が時間をかけたのは、検索とAIに参照されるための設計と、人にもAIにも読みやすいデザイン
- 誰でも良いサイトを作れる時代が来た。差がつくのは作る前の設計
AIは任せきりにせず、人が主導して動かす道具です。まずは、作る前の設計から始めてみてください。最新の機能や条件は、使う前に各公式サイトで確認してください。
AIでのホームページづくりは、設計からAtoZ Designにご相談ください
AtoZ Designは、LLMO・AI検索最適化とSEO・MEOを通じて、AI検索時代に選ばれるお店や会社をつくるWeb制作事務所です。クリニック、飲食店、美容室、建設会社など、地域の中小企業のホームページ制作と集客に携わってきました。
今回の検証でわかったのは、AIを使えば作業は大きく減らせる一方で、良いサイトになるかどうかは作る前の設計で決まるということです。「AIに選ばれるホームページを、自分でつくる」は、その設計をAtoZ Designが一緒に作り、ページを形にする作業はお店ご自身がAIを使って進める伴走サポートです。設計はプロと一緒に、作るのはお店自身で進められます。
AtoZ Designの伴走サポートには、次のような特長があります。
- ヒアリングと設計から伴走：業種・業態やお店の特徴を伺い、SEOとAI検索に向けた最初の設計を一緒に作ります
- 今回と同じ進め方：この記事の制作と同じように、設計を先に作り、Claudeへの指示でWordPressのサイトを形にしていきます
- 店舗運営の経験：代表は複数の業態の飲食店を運営してきた経験があり、店主の立場からお店の強みを一緒に言葉にします
- 完成まで、公開後も：最初はオンラインで、その後はチャットで、サイトが完成するまで伴走します。検索とAIに強いコラムの書き方もお伝えするので、公開後も自分で育てていけます
完成の目安は約2か月で、今あるホームページのリニューアルにも使えます。途中で「やはり作ってほしい」となった場合は、制作プランに切り替えられます。
「自分で作りたいけれど、何から決めればいいかわからない」「AIでホームページを作ってみたが、思うように仕上がらない」「今のホームページを、AI検索にも強い形に作り直したい」といった段階のご相談も歓迎しています。お気軽にお問い合わせください。
作るところまで任せたい方は、ホームページ制作のページをご覧ください。
▶関連記事：ホームページを自分で作る方法
参考文献
- Get started with Claude in Chrome（Claude Help Center）
- Claude in Chrome permissions guide（Claude Help Center）
- SWELLの特徴（WordPressテーマ SWELL）
この記事を書いた人
大西 励治おおにし れいじ
LLMO・AIO対策に強いホームページ制作「AtoZ Design」代表
自社サイトにおいてChatGPT・Perplexity・Gemini・Copilotなど主要AI検索で「LLMO対策に強い制作会社」として言及・推奨された実績を持ち、そのノウハウをクライアントのサイト制作に展開しています。飲食店、美容室、病院、建築業など多業種のクライアントにおいて、AI検索やGoogle検索での上位表示を多数実現。E-E-A-Tを土台にしたサイト設計を強みに、SEO・MEO・LLMO・AIOを一貫して支援。限られた予算でも成果につながる、現実的で価値ある提案を重視し、トータルなWebマーケティングを提供しています。
