「Claudeでサイトを作って」とだけお願いすると、なんとなく平凡な仕上がりになることが多くあります。
特にビジネスでのサイト利用を考えている方にとっては、士業(行政書士・税理士・社労士など)や、個人でビジネスをされている方の場合、サイトは「この人(この事務所)に頼んでも大丈夫だろうか」を判断される、いわば信頼の入り口です。デザインが良いだけでなく、「安心して問い合わせできるか」がとても重要になります。
この記事では、「開業したばかりの行政書士の先生が、自分の事務所のホームページ(LP)を作る」という具体例を使いながら、実際にClaudeへそのまま打ち込める言葉(プロンプト)の作成方法を紹介します。
実際作成する前にプロンプトやイメージを磨くことで作りたいサイトに近づけることができます。
税理士・社労士・コンサルタント・士業以外のビジネスサイトを検討している方にも、同じ考え方で応用できます。
(TBD)作成したサイトのイメージ画像、URL
1. まず「誰のための、何のサイトか」をはっきりさせる
一番大事なのはここです。「かっこいいサイトを作って」だけだと、Claudeも「無難な答え」しか出せません。
お願いする前に、次の3つを自分の中で決めておきましょう。
- これは何のサイト?(例:行政書士事務所のLP)
- 誰に見てほしい?(例:初めて相続手続きで困っていて、誰に相談すればいいか分からない人)
- 見た人にどうなってほしい?(例:「この人になら相談してみよう」と思って、問い合わせボタンを押してもらいたい)
ポイントは「何を・誰に・どうなってほしいか」の3つを、自分の言葉で書くことだけです。
士業の場合は特に「ゴール(問い合わせ・電話・予約など)」をはっきり書くと、Claudeがその行動を後押しする作りにしてくれます。
2. いきなり「作って」と言わず、先に「案」を見せてもらう
家を建てるとき、いきなり工事を始める人はいません。まず設計図を見ますよね。サイト作りも同じです。
サイト作成の依頼と共にまずはイメージを固めたいということを伝えます。
※私がイメージを固めるまで実際のサイトの作成を行わないでください。
作成をスタートする際には必ず確認して許可をとってください。
行政書士事務所のホームページ(1ページのLP)を作りたいです。
見る人は、相続や遺言の手続きで初めて困っていて、
誰に相談すればいいか分からない一般の方です。
このページを見て「この人になら相談してみよう」と思ってもらい、
無料相談の問い合わせをしてもらうことがゴールです。
私の強みは、丁寧なヒアリングと、費用を最初にはっきり伝えることです。
いきなり完成させず、まず色の雰囲気・文字のイメージ・全体のレイアウトの案を
3パターンくらい、文章で説明してください。
士業として「誠実さ」「信頼感」が伝わる雰囲気を大事にしたいです。
私が気に入ったものを選んでから、実際に作ってもらいます。Claudeがいくつか案を出してきたら、たとえばこんな返し方ができます。
2番目の「落ち着いた紺色と、清潔感のある白を基調にした案」が気に入りました。
これで進めてください。もし全部しっくりこなければ、遠慮なく自分のリクエストを伝えましょう。
どれもちょっと堅すぎる印象です。もっと「話しやすそう」「相談しやすそう」な、
柔らかい雰囲気にしてほしいです。
完成してから直すより、案の段階で確認してイメージを固めていくのが大事です。
この後にClaudeからサイト詳細について問われるので必要な項目を答えていきます。
解答例 (Claudeからの質問内容は状況により変わります)
事務所名:さくら行政書士事務所
対応エリア:横浜
実績:地元で20年の信頼
取扱範囲:相続、遺言、その他お困り事
料金:無料相談で見積もり
問い合わせ方法:フォームと電話番号3. 一番最初に見える部分(トップ)にこだわる
やりとりを繰り返すとClaudeが作成イメージを見せてくれますので、そのイメージを調整していきます。
サイトを開いて最初に目に入る部分は、いわば「事務所の看板」です。ここで「何を頼める人なのか」「安心できそうか」が伝わらないと、すぐに離れてしまいます。
また公式感と信頼感を得られるような印象を画像などのビジュアルで伝えられるようにすることも大事です。
行政書士の例なら、こんな相談ができます。
ページを開いて一番最初に大きく表示する言葉(キャッチコピー)を、
3つくらい候補で考えてください。
「相続の手続き」「初めての方でも安心」という2つが伝わるようにしてください。
メインビジュアルとなる画像で著作権の問題ないものも探してきてください。士業のサイトでは特に、「何を相談できるか」が一目で分かることが大切です。「行政書士 ◯△務所」だけでは、見た人は何を頼めるのか分かりません。
メインビジュアルの画像についてもしっかりと吟味した上で指定することが大事です。
ご自身で権利を持っている利用可能な画像があるのであればそちらを使用することをおすすめします。
無料画像サイトなどでご自身で探すとよりイメージに近いものを選ぶことができます。
4. 「なんとなくの飾り」をつけない
数字の「①②③」や、線での区切りなど、それっぽく見える飾りを入れたくなることがあります。でも、それが本当に必要か考えてみましょう。
- 本当に「順番」がある内容(例:相談から手続き完了までの流れ)なら、番号は意味があります
- でも、ただの項目の羅列(例:「相続」「遺言書作成」「会社設立」というサービス一覧)に無理に番号をつけると、逆にごちゃごちゃして見えます
士業のサイトでは、「相談の流れ(①お問い合わせ→②面談→③手続き)」のような番号は、むしろ不安を減らすので効果的です。こんな一言で、Claudeに一度チェックしてもらいましょう。
「ご相談の流れ」の部分には、①②③のような番号をつけて、
初めての方でも次に何が起こるか分かるようにしてください。
一方でサービス一覧の部分は、番号なしでシンプルに並べてください。5. 動き(アニメーション)は「使いすぎない」
サイトに動きがあると華やかに見えますが、あちこちがピカピカ・ふわふわ動くと、かえって「軽い」「胡散臭い」印象になってしまいます。士業のサイトでは特に、動きすぎるサイトは信頼感を下げるので注意が必要です。
こんな一言を最初のお願いに加えておくと安心です。
ページ内の動き(アニメーション)は控えめにして、
派手な演出は避けてください。誠実さや落ち着きが伝わることを優先してください。6. 派手にするところは「1箇所だけ」に絞る
全部を目立たせようとすると、結局どこも目立たなくなります。士業のサイトの場合、目立たせるべきは「先生の顔写真・プロフィール」または「問い合わせボタン」であることが多いです。
このサイトで一番目立たせたいのは「無料相談のお問い合わせボタン」です。
ページの中で何度か目に入るように配置しつつ、
他の部分(事務所概要や料金表など)は控えめで落ち着いたデザインにしてください。「どこを一番目立たせたいか」を自分の中で1つだけ決めてから伝えるのがコツです。士業なら、「顔が見える」ことが信頼につながるので、プロフィール写真の扱いも意識してみましょう。
私の顔写真とプロフィールを掲載する予定です。
「どんな人が対応してくれるのか」が伝わるよう、
プロフィール部分は誠実な印象になるようレイアウトしてください。7. 文章の言葉づかいも「デザインの一部」と考える
ボタンや案内の文章も、見た目と同じくらい大事です。特に士業は専門用語が多い業界なので、分かりやすい言葉に言い換えることが信頼につながります。
専門用語(例:「遺留分」「相続放棄」など)をそのまま使うのではなく、
一般の方にも分かるように、やさしい言葉で説明を添えてください。
ボタンの文言も「Submit」ではなく「無料相談を申し込む」のように、
何が起こるか具体的に分かる言葉にしてください。料金についても、士業では「結局いくらかかるか分からない」という不安が問い合わせの壁になりがちです。
料金については、正確な金額が出せない場合でも、
「初回相談は無料です」「目安の料金はこちらでご案内しています」のように、
不安を減らす伝え方をしてください。8. スマートフォンで見たときの見え方も必ず確認する
パソコンで綺麗に見えても、スマートフォンで見ると崩れていることがあります。今は多くの人が悩みごとをスマホで検索して、そのままスマートフォンでサイトを見ます。
スマートフォンで表示しても問題ないように指示を出すのも大切です。
スマートフォンで見たときにも、文字や写真が崩れず、
お問い合わせボタンがすぐに押せるようにしてください。9. わかったふりをせずに理解できるまでしっかり確認する
提案がぱっと出てくるとわからない部分があっても承認して進めてしまいがちです。
理解しないままで簡単に決めてしまうと、後から修正が増えてしまう可能性があります。
わからない部分はわかるまで質問する、自分でアイデアが固まらない時はしっかりと相談しながら進めるということも大事です。
そうすることで自身のイメージを納得のいく形でまとめていくことができます。
10. 「これで完成」の前に、一度離れて見返す
作業をしていると、細かい部分にばかり目が行きがちです。少し時間を置いてから、初めて見る人のつもりで全体を見返してみましょう。
Claudeにこう聞くのも効果的です。
このサイトを、初めて相続の悩みを抱えて検索してきた一般の方の立場で見たとき、
分かりにくいところや、不安を感じさせてしまう部分がないか、
正直な意見をください。自分では気づかなかった、不安にさせる表現や分かりにくい専門用語を指摘してもらえることがあります。
11. 慣れてきたら:「注文書」のようにまとめて伝えてみる
ここまでは、1〜10の一言を都度Claudeに伝える方法を紹介してきました。これでも十分良いサイトができますが、慣れてきたら最初に条件を全部まとめて伝える方法もあります。会話を何往復もする代わりに、いわば「注文書」を一枚渡すイメージです。
プロのWeb制作者は、色の指定を「HEX値」で、余白の指定を「px」で、というように専門的な言葉で細かく条件を書いた、かなり詳細な指示書を使うこともあります。でも、専門用語を覚える必要は一切ありません。あなたがやることは、下のような「空欄を埋めるだけのテンプレート」に、自分の言葉で答えを書き込むことだけです。あとはClaudeが、それを専門的な指示に自動で変換して作ってくれます。
コピペして使えるテンプレート
下記の内容でホームページ(1ページ)を作ってください。
【業種】
【誰に見てほしいか】
【見た人にしてほしい行動(ゴール)】
【メインカラーのイメージ】(例:落ち着いた紺色、あたたかいベージュ など)
【全体の雰囲気】(例:誠実で話しやすい、明るく元気 など)
【一番目立たせたい場所】
【動き(アニメーション)の量】(例:控えめに/なくてもよい/少しにぎやかに)
【問い合わせフォームに入れたい項目】
【スマホ対応】必須
【注意してほしいこと】
・文字や項目を省略せず、全部きちんと表示してください
・入力ミスがあったときは、何が間違っているか具体的に教えてください
・派手すぎない、上品なデザインにしてください行政書士の例なら、こう埋められます
下記の内容でホームページ(1ページ)を作ってください。
【業種】行政書士事務所
【誰に見てほしいか】相続や遺言の手続きで初めて困っている一般の方
【見た人にしてほしい行動(ゴール)】無料相談への問い合わせ
【メインカラーのイメージ】落ち着いた紺色と、清潔感のある白
【全体の雰囲気】誠実で、初めての方でも相談しやすい柔らかさ
【一番目立たせたい場所】無料相談の問い合わせボタンと、私のプロフィール写真
【動き(アニメーション)の量】控えめに、上品な範囲で
【問い合わせフォームに入れたい項目】お名前・メールアドレス・電話番号・ご相談内容
【スマホ対応】必須
【注意してほしいこと】
・文字や項目を省略せず、全部きちんと表示してください
・入力ミスがあったときは、何が間違っているか具体的に教えてください
・派手すぎない、上品なデザインにしてくださいなぜこの方法が効果的なのか
- 空欄を埋める形式なら、「何を答えればいいか」に迷いません。白紙の状態から文章を考えるより気が楽です。
- 「省略しないでください」「入力ミスは具体的に教えてください」のような注意書きを入れておくと、あとで手直しする回数がぐっと減ります。
- 1〜10で紹介した考え方(誰のため?何を目立たせる?飾りすぎていないか?)は、実はこのテンプレートの空欄そのものです。会話でやってきたことを、先に一枚にまとめただけなので、難しく考える必要はありません。
もちろん、テンプレートを埋めて一度で全部お願いした後も、「もう少し色を変えてほしい」「ボタンをもっと目立たせてほしい」のように、追加で会話しながら直していくのはこれまで通りです。一括で頼んで、あとは会話で微調整、というのが一番効率のよい進め方です。
まとめ:困ったらこの3つを思い出してください
専門的なことが分からなくても、次の3つの「問いかけ」さえ持っていれば、Claudeと一緒に信頼されるビジネスサイトを作ることができます。
- これは誰のための、何のサイト?(何を相談できる人か、はっきりさせる)
- 一番伝えたいことは何?(問い合わせボタンや、あなたの人柄を目立たせる)
- 飾りすぎていないか?(派手さより、誠実さ・分かりやすさを優先する)
あとは、この記事のプロンプト例を参考に、自分の業種・強み・伝えたいことに置き換えるだけです。「何を、誰に、どう伝えたいか」を自分の言葉で説明できれば、それが一番良いプロンプトになります。
会話しながら少しずつ作るのでも、慣れてきたら11で紹介した「注文書」テンプレートを使って一気に伝えるのでも大丈夫です。
どちらの進め方でも、自分に合った方法を見つけてみてください。
(TBD) 作成したサイトのURL