Claude Codeでホームページを作る方法｜AIっぽさを消す4ステップ

自分の教室やサロンのホームページを、AIで作ってみた方は多いと思います。Claude Codeに「ホームページを作って」と頼めば、すぐにそれらしいページができあがります。ところが、見出しの下に3列のカードが並び、絵文字のアイコンが添えられた、どこかで見たようなサイトになりがちです。

AIは、指示が少ないと、よくある無難な形を選びます。そのため、頼み方を変えない限り、何度作り直しても似た仕上がりになります。お客さんに見せるサイトがほかの人と同じ見た目では、自分の事業の雰囲気は伝わりません。

僕がサイトを作るときは、先に参考にするサイトを決めてから、Claude Codeに頼んでいます。参考サイトのどこを真似するのか、サイトの目的は何かを伝えると、AIが作るサイトがぐっと自分らしくなります。

この記事では、Claude Codeでホームページを作るときに、AIっぽさを消すための4つのステップを説明します。後半では、指示文の組み立て方と、真似してよいところ・だめなところも取り上げました。

Instagramでこの動画を見る

Claude Codeでホームページを作る4ステップ

Claude Codeでホームページを作るときの流れは、次の4つです。

1. Webデザインの見本集から、参考サイトを探す
2. 参考サイトの「動き」と「トンマナ」のどこを真似するかを決める
3. サイトの目的を伝えて、ページの流れをClaude Codeに設計してもらう
4. サイトの一番上（ヒーローセクション）に動画や画像を入れる

この4つは、すべてClaude Codeに頼む前の準備です。ステップ1と2で見た目の方向を決め、ステップ3で中身の順番を決めます。ステップ4で、サイトを開いた人が最初に見る場面を作ります。

上の画像は、この4ステップで作った採用サイトの見本です。参考にしたのは、ある会社のコーポレートサイトでした。画面いっぱいの動画の上に大きな白い見出しを重ねる見せ方を取り入れ、文章・写真・ロゴは自社のものにしています。

Claude Codeをまだ入れていない方は、Claude Code 初期設定の4ステップを先に読んでおくと進めやすくなります。

ステップ1・2 参考サイトを探し、真似するところを決める

ステップ1 Webデザインの見本集で参考サイトを探す

参考サイトは、Webデザインの見本を集めたサイトから探すと早く見つかります。僕がよく使うのは次の3つです。3つとも無料で見られるサイトです。

SANKOU!は、日本のサイトが中心の見本集です。「採用サイト」「スクール・習い事・教材」「美容室・サロン・エステ・ヨガ」のように、サイトの種類と業種で絞り込めます。まずは自分と同じ業種で絞り、その中から好きな雰囲気のサイトを選ぶのがおすすめです。

81-web.comは、色やフォントで絞り込める見本集です。サイトごとに使っているフォントの名前が書いてあるので、「この文字の感じが好き」と思ったらフォント名を控えておいてください。

MUUUUU.ORGは、動きや見せ方で探せる見本集です。サイトを開いたときの演出や、スクロールしたときに背景と文字が違う速さで動く見せ方を探すときに向いています。

参考サイトは、まず1つに絞ってください。いくつも混ぜると、何を真似したいのかがAIに伝わりにくくなります。

ステップ2 「動き」と「トンマナ」のどこを真似するか決める

参考サイトが決まったら、そのサイトのどこを真似したいのかを書き出します。見るところは「動き」と「トンマナ」の2つです。トンマナはトーン＆マナーの略で、色、文字、写真、言葉の調子など、サイト全体の雰囲気を指します。

見本の採用サイトでは、動きとして「開くと白い画面にロゴが出て、写真に切り替わる」「スクロールすると背景の写真だけがゆっくり動く」を真似しました。トンマナとしては「写真の上に大きな白い見出しを重ねる」を取り入れています。

書き出すときは、見たままの言葉で書くのがコツです。「おしゃれな感じ」では、AIはどこを再現すればよいか分かりません。「画面いっぱいの写真が3枚、続けて並んでいる」のように書けば、Claude Codeはその部分を狙って作ります。

フォントを真似するときは、有料かどうかを確かめてください。見本の参考サイトは有料のフォントを使っていたので、Claude Codeに近い形の無料フォントを選んでもらいました。英字はPoppins、日本語はZen Kaku Gothic Newで、どちらもGoogle Fontsで無料で配られています。

ステップ3・4 目的を伝え、最初に見える場面を作る

ステップ3 サイトの目的を伝えてページの流れを設計する

次に、そのサイトで何をしたいのかをClaude Codeに伝えます。問い合わせを増やしたいのか、ブランドを伝えたいのかによって、ページで見せる順番が変わるからです。

この見せる順番や使いやすさを考えることを、UI・UXの設計と言います。UIは画面の見た目やボタンのこと、UXはサイトを見る人の体験のことです。目的を伝えれば、Claude Codeがこの設計から考えてくれます。

個人で事業をしている方の多くは、1つめの「問い合わせを増やしたい」に当たると思います。この場合は、見る人の悩みとその答えを最初に見せ、最後に「無料で相談する」のようなボタンを置きます。表の流れはよくある例なので、自分のお客さんに合わせて順番を入れ替えてかまいません。

ステップ4 ヒーローセクションに動画や画像を入れる

ヒーローセクションは、サイトを開いて最初に見える部分です。ここで雰囲気が伝わらないと、そのまま閉じられてしまいます。そこで、動画や画像を入れて、ひと目で伝わるようにします。

僕はこの素材を、動画を作るAIのサービスHiggsfieldで作ることが多いです。見本の採用サイトでは、ロゴが動く短い動画を1本と、人の場面の動画を3本作りました。Higgsfieldの使い方は、AIインフルエンサーの作り方でも紹介しています。

素材を作るときは、見出しをのせる場所を空けておいてください。見出しを重ねる部分が明るすぎると、白い文字が読みにくくなります。また、動画は重いままだと表示に時間がかかります。Claude Codeに「音を外して軽くして」と頼めば、サイトで使いやすい大きさにしてくれます。AIで人物を作るときは、有名人や知り合いに似せないようにしてください。

Claude Codeに送る指示文の組み立て方

4ステップで決めたことは、1つの指示文にまとめてClaude Codeに送ります。僕は次のような見出しで組み立てています。

このサイトを参考に、Webサイトを作ってください。
参考サイト：（URL）

【作るサイト】
誰の、何のサイトか／サイトの目的／見てほしい人／見たあとにしてほしいこと

【参考にするところ】
動き／トンマナ／文字（有料のフォントなら無料の近いものを提案して）／このサイトを選んだ理由

【参考にしないところ】
文章・写真・ロゴ・イラストはそのまま使わない

【進め方】
参考サイトを開いて特徴をまとめる → ページの順番を提案する → 確認してから作る → パソコンとスマホの幅で見せる

「進め方」では、いきなり作らせずに、先に参考サイトの特徴とページの順番を見せてもらうと、方向がずれたまま作り込むのを防げます。Claudeのデスクトップアプリの「Code」タブを使うと、Claude Codeが参考サイトをブラウザで開いて、動きやフォントまで確かめてくれます。なお、Claude Codeを使うにはClaudeの有料プランが必要です。

できあがったサイトが参考サイトと違うときは、「参考サイトと見比べて、まだ違うところを3つ挙げて」と頼みます。そのうえで、特に再現してほしいところを1つ名指しすると、狙った部分に近づきます。

大事なのは参考サイトの良さを自分の言葉で説明すること

ここまでの4ステップは、手順を知っていれば誰でもできます。仕上がりに差が出るのは、参考サイトの「どこが、なぜ良いのか」を自分の言葉で説明できるかどうかです。

AIに頼む前に、次の3つの問いに答えてみてください。

1. 参考サイトの、どこが良いのか
2. それは、なぜ良いのか
3. それは、今回のサイトの目的に合っているか

見本の採用サイトなら、「画面いっぱいの映像が3枚続くところが良い」「働く人の表情から入るので、会社の空気が文章を読む前に伝わる」「ここで働きたいと思ってもらう目的に合っている」と答えられます。

この3つの答えを、指示文の「このサイトを選んだ理由」に書き足してください。理由まで伝えると、AIにも狙いが伝わり、細かいところの判断がぶれにくくなります。答えられないときは、参考サイトの選び方がまだ浅いのかもしれません。

事業での活用例

Web制作・デザインのフリーランス

お客さんのサイトを作る前に、参考サイトの候補と「どこが、なぜ良いのか」を書いたメモを見せて、方向をすり合わせます。合意した内容をそのまま指示文に入れれば、Claude Codeで試作まで進められます。デザインの意図を言葉で説明できれば、提案の場面でも話が通りやすくなるはずです。

料理教室やヨガ教室を開いている方

目的は「体験レッスンの申し込みを増やす」です。SANKOU!で「スクール・習い事・教材」に絞って参考サイトを探し、ヒーローセクションには教室の様子が伝わる動画を入れます。ページの最後には、体験レッスンを予約するボタンを置きます。

整体院やサロンを営んでいる方

目的は「問い合わせを増やす」です。最初にお客さんの悩みとその答えを見せ、できること、お客さんの声、料金、よくある質問の順に並べます。トンマナは、落ち着いた色と余白の多いサイトを参考にすると、店の雰囲気に合わせやすくなります。

真似してよいところ、だめなところ

参考サイトから学んでよいのは、雰囲気や見せ方の考え方までです。中身をそのまま使うと、著作権などの問題になります。

レイアウトの考え方、動きの種類、色の組み合わせの雰囲気、余白の取り方は真似してかまいません。文章、写真、ロゴ、イラスト、動画はそのまま使わず、自分の事業のものに入れ替えてください。指示文の「参考にしないところ」にこの内容を書いておくと、Claude Codeもそれに沿って作ります。

まとめ

Claude Codeでホームページを作るときは、「サイトを作って」とだけ頼まずに、参考サイトを先に決めます。動きとトンマナのどこを真似するか、サイトの目的は何かを伝え、ヒーローセクションに動画や画像を入れると、AIっぽさの少ないサイトになります。

そのうえで、参考サイトの良さを自分の言葉で説明できるかが、仕上がりを左右します。今日はまず、SANKOU!で自分と同じ業種のサイトを開き、参考にしたいサイトを1つ選んでください。