「ホームページ制作をAIに頼む」と聞くと、エンジニアやWeb制作会社のような専門知識がある人の話だと思われるかもしれません。それでも今、皆さんがご覧になっているこのホームページのコンテンツの多くは、生成AI「Claude(クロード)」との対話だけを頼りに、自分で作り込みました。
この記事は、「Claudeの3つの顔」の使い分けを具体的な業務に当てはめてご紹介する連載の第1回です。ホームページ制作という、多くの中小企業が「専門家に丸投げするしかない」と感じがちなテーマを、実際にどう進めたのか、つまずいた点も含めて正直にお伝えします。
きっかけ:会社案内サイトのままでは受注につながらない
もともと私のホームページは、会社概要・サービス紹介・お問い合わせフォームがある、いわゆる「名刺代わりのサイト」でした。情報は正しく載っているものの、見た人が「相談してみよう」と一歩を踏み出す仕掛けが弱い状態だったと思います。
この課題感を整理するところから、コンテンツ制作は始まりました。
ステップ1:Chatで方針を固める
最初に取り組んだのは、Claudeの中でも会話形式の「Chat」を使った企画の壁打ちです。
- 今のサイトのどこが弱いのか
- ページ構成をどう組み替えるべきか
- 制作を本格的に進めるにあたって、何を準備しておけば作業がスムーズになるか
といったことを対話しながら整理し、実装フェーズに引き継ぐための方針メモを作りました。ここでのポイントは、いきなり作り始めないことです。デザインのトーン(ネイビーを基調にした色使い)、ページごとの役割、既存ページとの整合性など、方向性を先に言語化しておくことで、後の作業が格段にスムーズになります。
ステップ2:Codeで作り込む ― 1セッション500回超のやり取り
方針が固まったら、いよいよ実装です。ここで使うのが「Code」――ファイルを直接読み書きしながら作業を進めてくれる、Claudeのもう一つの顔です。
「Codeはターミナル(黒い画面)を使うエンジニア向けのツール」というイメージがあるかもしれませんが、私はデスクトップアプリ版を使っています。難しいコマンドを覚える必要はなく、Chatと同じ感覚で「このページを作って」「この色に統一して」と指示を出せば、Claudeが実際のファイルを読み書きしてくれます。
最初の制作セッションでは、Claudeとのやり取りが500回を超えました。外部CIO・IT顧問サービス、DX戦略策定、RFP作成支援、代表者プロフィール、会社情報——ページを1つずつ、デザインを統一させながら作っていきました。
正直、うまくいかないこともありました。使っているWordPressテーマには独自の制約があり、「特定の書き方でHTMLを組むと表示が崩れる」といったテーマ固有のクセに何度もぶつかりました。そのたびにClaudeに症状を伝え、原因を一緒に切り分けながら、正しい書き方のパターンを見つけていく——という地道な繰り返しでした。専門知識がなくても、「うまくいかない」という事実を素直に伝え続ければ、一緒に解決策にたどり着けるのだと実感した工程です。
ステップ3:完成後に「自分で自分を評価させる」
ページが一通り揃ったところで、私はもう一つ、意外と効果があった使い方を試しました。Claudeに、フラットな第三者の目線で自社サイトを分析させることです。
「この会社の人間だと思わず、客観的に見て、引き合いや受注を増やすために何が足りないか教えてほしい」と依頼したところ、Claudeは実際にサイト全体を巡回し、他社の類似サービスとも比較しながら、次のような課題をはっきり指摘してきました。
- 実績・お客様の声が一切ないため、発注判断の材料に欠けている
- ページごとにCTA(問い合わせを促す導線)の強さがバラバラで、良いオファーが下層ページに埋もれている
- 連絡手段がフォームのみで、電話派の経営者層に対応できていない
- トップページのキャッチコピーが「誰の・何の課題を解決するか」を伝えきれていない
自分では気づきにくい「サイトの外からの見え方」を、忖度なく指摘してもらえたのは新鮮でした。
ステップ4:指摘をもとに改善 ― さらに300回超のやり取り
この分析結果をもとに、再びCodeで改善作業に入りました。統一CTAの整理、ページごとのトーン調整など、指摘された課題を一つずつ潰していく作業です。このセッションだけで、やり取りは300回を超えました。
企画(Chat)→ 作り込み(Code)→ 自己点検(Chat/Code)→ 再度の作り込み(Code)というサイクルを回すことで、「作って終わり」ではなく「作って、見直して、また作る」という改善のループが自然にできあがりました。
この経験から言えること
- 専門知識がなくても、方針さえ言語化できれば作り込める。難しいのはコードを書くことではなく、「何を作りたいか」を自分の言葉で整理することでした
- 企画と実装で使うツールを分けると、頭の切り替えがしやすい。Chatで考え、Codeで手を動かす、という役割分担が効きました
- AIに「自分を厳しく評価させる」使い方は強力。身内の視点では気づけない改善点が、驚くほど具体的に出てきます
「ホームページを見直したいが、制作会社に頼むほどの予算も踏ん切りもつかない」という中小企業は多いはずです。私自身がその立場で、生成AIを相棒にここまで作り込めた、という事実が、何かのヒントになれば幸いです。
次回は、セミナー資料作成でのClaude活用についてご紹介します。