AIに「うちの会社のホームページを作って」と頼むと、数分で整ったページが出てきます。ところが社内で見せると「きれいだけど、どこの会社でも使えそう」と言われることがあります。こうした相談を、AI-Brainの研修でもいただくようになりました。

原因は、AIの腕前より頼む順番にあります。見た目から先に頼むと、中身の言葉までAIが平均的なもので埋めてしまうためです。

この記事では、Claudeでホームページを作るときに、どの道具をどの順番で使えばよいかを4つのステップで紹介します。そのままコピーして使える頼み方も載せます。

▼記事を3分で理解できる！マンガ風スライドはこちら

AIに任せたホームページが似たり寄ったりになる理由

「ホームページを作って」とだけ頼むと、Claudeは決まっていない部分を、よくある形で埋めます。見出しは「私たちの強み」、写真の横に3つの特長、最後に問い合わせボタンが並びます。どれも間違いではありませんが、ほかの会社と入れ替えても成り立つページになります。

海外のビジネス誌Forbesに2026年10月に寄稿された手順ガイドも、同じ点を指摘しています。順番を逆にして、文章を先に固め、見た目は後から付けるという考え方です。この記事では、その考え方を地方の会社向けに組み直しました。

Claudeの3つの道具を使い分ける

ホームページ作りに使えるClaudeの道具は、大きく3つあります。

Artifacts（アーティファクト）：まず形を見る

いつものClaudeのチャットで「1ページのサイトを作って」と頼むと、画面の横に完成したページが表示されます。無料プランでも使えるので、最初の試作に向いています。

Claude Design（クロードデザイン）：見た目をそろえる

2026年4月に公開された、デザイン専用の機能です。会社の既存の資料やサイトを読み込ませると、色や文字の雰囲気をそろえたまま、複数のページを作れます。利用には有料プランが必要です。

Claude Code（クロードコード）：本当に動かす

問い合わせフォームのように、実際に動く仕組みを作る道具です。有料プランで、デスクトップアプリの「Code」タブから使えます。

流れとしては「Artifactsで形を見る、Claude Designで見た目をそろえる、Claude Codeで動かす」の順になります。ただし、どの道具に移る前にも、次の4つのステップで言葉を決めておきます。

ステップ1：お客さんが迷う理由を先に出させる

最初はページを作らせません。お客さんがどこで迷うかを、Claudeに言わせます。

私は[地域]で[事業内容]をしている[会社名]の担当者です。
お客さんは主に[どんな人]です。
疑り深い相談相手として、お客さんが問い合わせをためらう理由を3つ挙げてください。
それぞれについて、ためらいを解く一文をホームページ用に考えてください。
まだページのデザインは作らないでください。

たとえばリフォームの会社なら、「見積もりを頼んだら断りにくそう」「工事中の生活が不安」「地元の業者は高いのでは」といった理由が出てきます。この3つに答える文章が、ほかの会社と違うページの土台になります。

ステップ2：言葉の設計図を1枚にまとめる

次に、会社の人柄と色を決めます。

上の3つの理由をふまえて、[会社名]の人柄を3つの言葉で表してください。
合う色を3〜5色、カラーコード付きで提案してください。
会社を一言で表すキャッチコピーを、15字以内で3案ください。
最後に、ここまでの内容を「言葉の設計図」として1枚にまとめてください。

できあがった「言葉の設計図」は、メモ帳などに保存しておきます。チャット、Claude Design、Claude Codeは別々の画面なので、ここで決めたことが自動で伝わるとは限りません。道具を移るたびに、この1枚を最初に貼り付けます。

ステップ3：文章を先に書き、見た目は後にする

デザインを頼む前に、ページに載せる文章を全部そろえます。

次の「言葉の設計図」を使って、ホームページの文章を書いてください。
[言葉の設計図を貼り付け]
構成は、最初の見出しと説明文、選ばれる理由3つ、お客さんの声を入れる場所、よくある質問3つ、問い合わせへの誘導です。
一文は短くしてください。
まだデザインは作らないでください。

文章とデザインを同時に頼むと、AIは見た目に合わせて文章を削ったり、ありがちな言い回しで埋めたりしがちです。文章を先に固めておけば、デザインは「この文章をどう見せるか」だけの作業になります。

文章ができたら、ArtifactsかClaude Designに「言葉の設計図」と文章を貼り、1ページのサイトを作ってもらいます。

ステップ4：作り直させず、AIっぽい3点を挙げさせる

最初のデザインを見て、どこかで見た感じがしても、「作り直して」とは頼まないでください。作り直すと、別の「どこかで見た感じ」が出てくるだけになりがちです。代わりに、どこがありがちなのかを指摘させます。

経験豊富なWebデザイナーとして、このデザインを辛口で評価してください。
「AIが作ったっぽい」「どこにでもある」と感じさせる部分を3つ挙げ、
それぞれ具体的にどう直せばよいかを提案してください。
まだ直さないでください。

指摘が出たら、1つずつ直してもらいます。3つまとめて直させると、どの変更が効いたのかが分からなくなるためです。

この「作る役と評価する役を分ける」考え方は、非エンジニアがClaude Codeでアプリを作る12ステップでも紹介した、別のセッションに点検させる方法と同じです。

問い合わせフォームと公開は、点検してから

見た目が決まったら、Claude Codeに移って問い合わせフォームなどを動くようにします。この段階の進め方は、上の12ステップの記事で詳しく書いています。

特に気をつけたいのが、公開前の点検です。問い合わせフォームは、お客さんの名前や電話番号を預かる場所になります。公開する前に、Claude Codeへ次のように頼んでください。

このサイトを公開する前に、セキュリティの観点で点検してください。
パスワードや鍵になる文字列がファイルに直接書かれていないか、
問い合わせフォームにおかしな入力をされたときに困ることがないかを確認してください。
見つかった問題は、危険度の高い順に一覧にしてください。

自動の点検は、詳しい人の確認の代わりにはなりません。決済や大切な個人情報を扱う場合は、公開前に必ず専門家に見てもらってください。

公開先は、NetlifyやVercelといったサービスが使えます。Netlifyには、できあがったフォルダを画面に置くだけで公開できる「Netlify Drop」という入口もあります。

よくある質問

Q. 無料プランだけでホームページは作れますか？

Artifactsでの試作は無料プランでも使えます。見た目をそろえるClaude Designと、フォームを動かすClaude Codeは有料プランが必要です。

Q. 自社のロゴや色を反映できますか？

Claude Designでは、既存の資料やサイトを読み込ませて、色や文字の雰囲気をそろえられます。ステップ2の「言葉の設計図」と合わせて渡すと、方向がぶれにくくなります。

Q. 今あるホームページを作り直すときにも使えますか？

使えます。今のページの文章をステップ1の頼み方と一緒に貼り、「お客さんが迷う理由に答えられているか」を見てもらうところから始めてください。

Q. 見た目のお手本を渡す方法とは何が違いますか？

お手本を渡す方法は、見た目の質を上げるやり方です。この記事の方法は、その前に載せる言葉を決めるやり方です。両方を組み合わせると、見た目も中身も自社らしいページに近づきます。お手本の渡し方はデザインが苦手でもAIにお手本を渡せばプロ級のサイトは作れるで紹介しています。

まとめ

AIで作ったホームページが似てしまう原因は、頼む順番にあります。

・ページを作らせる前に、お客さんが迷う理由を3つ出させます

・言葉の設計図を1枚にまとめ、文章を先に固めてから見た目を頼みます

・デザインは作り直させず、AIっぽい3点を挙げさせて1つずつ直します

まずはいつものClaudeのチャットで、ステップ1の頼み方を貼るところから始めてみてください。

▼3分で理解できる！マンガ風スライドはこちら

AI活用について、社内でどう進めるべきか迷っていませんか？
AI-Brainでは、中小企業向けに30分の無料相談を実施しています。
まずはお気軽にご相談ください。

30分無料相談はこちら