結論｜文言修正やページ追加には十分活用でき、最終確認は人が行う
Claude Codeは、既存ホームページの文言修正、レイアウト調整、記事ページの追加といった作業には十分活用できます。一方で、公開前の最終確認や、ブランドイメージに関わるデザインの判断は、引き続き人が行う必要があります。
この記事では、マダナイ？が実際に自社サイトの制作・更新作業でClaude Codeを使ってみて分かったことを、手順・メリット・デメリットの順にまとめます。良い面だけを紹介する記事になりがちなテーマだからこそ、うまくいかなかった点も含めて率直にお伝えします。
Claude Codeとは（簡潔に）
Claude Codeとは、Anthropic社が提供する、コードの読み書きや修正作業を任せられるAIエージェントです。ターミナルやIDE、Webブラウザなど複数の環境から使え、指示を出すとファイルを読み取り、実際に編集・保存まで行ってくれる点が特徴です。詳しい仕組みや料金プランはClaude Codeとは？の記事で解説しています。
今回試した範囲
今回この記事でお伝えするのは、ゼロから1つのホームページをすべて自動生成した話ではなく、既存のホームページに対して行った、次のような作業の実体験です。
- 既存ページの文言修正・追加（サービス内容や料金表記のアップデートなど）
- 新しいブログ記事ページの追加（既存ページの構成を流用）
- レイアウトやスマホ表示の微調整（CSS）
- サイト内の表記・リンクの統一作業（サービス名や内部リンクのゆれの修正）
大阪・中央区にある小規模な店舗のホームページのように、ページ数が多くなく、デザインの型がすでに決まっているサイトほど、この方法が活かしやすいと感じています。逆に、ブランドの世界観を一から作り込むようなデザイン性の高いサイトでは、Claude Codeだけで完結させるのは難しいというのが実感です。
今回の記事は、特定のお客様の実案件を再現したものではなく、マダナイ？が自社サイトの運用の中で実際に行っている作業をもとに、一般化して紹介するものです。日々の小さな更新作業にどう向き合っているかを知っていただくことで、自社での活用イメージを持っていただければと思います。
実際の制作手順
実際に行った作業の流れは、おおよそ次のとおりです。特別な準備は必要なく、既存のホームページのファイル一式があれば始められます。
- 既存ページを流用元として指定し、変更したい内容を日本語で具体的に伝える（例：「このページと同じデザインで、新しいブログ記事ページを作って」）
- Claude Codeが該当ファイルを読み取り、修正案を提示・反映する
- ローカル環境（自分のパソコン上）で見た目を確認する
- スマホ・タブレット・PCの各サイズで表示崩れがないかを確認する
- 問題がなければ、サイト全体への影響（リンク切れ・SEOタグなど）を確認する
- 最終確認のうえ、公開用のサーバーへ反映する
特に3〜5のステップは省略せず、必ず人の目で確認することを徹底しています。1回の指示で完璧な結果が返ってくるとは限らないため、「もう少しここを調整して」と対話を重ねながら仕上げていくのが実際の進め方に近いです。焦らず何度かやり取りすることを前提に進めると、無理なく取り入れられます。
作業内容ごとの対応状況
実際に試した作業内容ごとに、Claude Codeでの対応状況を一覧にまとめました。「できた」と評価している項目も、必ず人による確認工程を挟んだうえでの結果である点にご留意ください。
| 作業内容 | 対応状況 | 補足 |
|---|---|---|
| 既存ページの文言修正 | できた | 指示どおりの箇所を的確に修正 |
| 新規ページのたたき台作成 | できた | 既存ページの構成を流用する形でスムーズ |
| レイアウト調整（CSS） | できた | 意図が伝わりにくい場合は微調整が必要 |
| 画像の最適化・差し替え | 一部できた | 画像自体の生成・加工は別ツールが必要 |
| SEOタグ・構造化データの設定 | できた | 既存ページの型を踏襲する形で対応 |
| 公開・サーバーへの反映 | 人が対応 | 最終判断は必ず人が行っている |
良かった点
実際に使ってみて、特に良かったと感じた点は次のとおりです。制作会社に依頼するほどではないけれど、自分たちだけで対応するには手間がかかる、という中間的な作業との相性の良さを感じています。
- 「〇〇ページと同じ構成で新しいページを作って」のような指示だけで、たたき台をすぐに作成できる
- 複数ページにまたがる表記の統一など、地味だが時間のかかる作業を短時間で終えられる
- 修正内容をファイル単位で確認しながら進められるため、意図しない変更に気づきやすい
- 過去のやり取りを踏まえて、サイト全体のデザインルールに沿った提案をしてくれる
特に効果を感じたのは、サイト内の表記ゆれ（同じサービス名の書き方が複数ページでバラバラになっているなど）を、まとめて洗い出して修正する作業です。人が手作業で全ページを確認するには時間がかかりますが、この種の網羅的なチェック・修正はAIとの相性が良いと感じています。
困った点
一方で、困った点や注意が必要だと感じた点もあります。
- 指示があいまいだと、意図と異なる修正が行われることがある
- スマホ表示など、実際に画面を見ないと分からない崩れは、都度目視での確認が欠かせない
- デザインの細かなニュアンス（余白の感覚など）は、言葉だけで伝えるのが難しい場合がある
- 公開判断を任せることはできず、最終確認の工程は省略できない
特に、指示が抽象的なときほど意図と異なる結果になりやすいという点は、実際に使ってみて強く感じた部分です。「もっと見やすく」ではなく「見出しのフォントサイズを◯pxに」のように、具体的に伝えるほど狙った結果に近づきやすくなります。
ChatGPTだけで進めた場合との違い
ChatGPTだけでホームページ制作を進める場合との違いも整理しておきます。以前、簡単な修正をChatGPTのみで試したこともありますが、提案されたコードを自分でファイルに貼り付けて確認する作業が発生し、複数ファイルにまたがる修正では手間がかかると感じました。ChatGPTでのAI活用全般についてはChatGPTでできること15選の記事もあわせてご覧ください。
| 比較軸 | ChatGPTのみ | Claude Code |
|---|---|---|
| コードの実行 | コードを提案してもらい、自分で反映する必要がある | 提示だけでなく、実際にファイルへ反映まで行う |
| 複数ファイルの操作 | 1つずつコピー＆ペーストで対応することが多い | 複数ファイルをまとめて読み取り・編集できる |
| 作業の再現性 | 会話の流れによって結果がぶれやすい | プロジェクトのルールを踏まえて一貫した提案をしやすい |
| 向いている用途 | 文章の下書きやアイデア出し | 実際のファイル修正・作業の実行 |
向いている人・向いていない人
向いている人
すでにホームページを持っていて軽微な修正を自社で対応したい方、社内にある程度ITに詳しい担当者がいる方には向いています。特に、既存ページの型を流用しながら記事やページを増やしていきたい場合は、相性の良い使い方だと感じています。
向いていない人
ゼロからデザインを含めて本格的なホームページを作りたい方、公開作業まで一人で完結させたい方には、単独での活用は難易度が高い傾向があります。また、社内に確認できる担当者が誰もおらず、生成された内容をそのまま公開してしまうような進め方は、リスクが大きいためおすすめできません。ホームページ制作会社への依頼を検討する際は制作会社の選び方の記事もご参考ください。
試す前に確認したいチェックリスト
Claude Codeでのホームページ制作・修正を試す前に、次の項目を確認しておくことをおすすめします。実際に運用してみて、この5点を満たしていない状態で始めると、後から手戻りが発生しやすいと感じています。
- すでに公開中のホームページ、または流用できるページの型がある
- 変更前の状態に戻せるよう、バックアップを取っている
- 公開前に必ず人の目で確認する体制になっている
- スマホ・PCなど複数サイズでの表示確認ができる環境がある
- 本番環境ではなく、まずはテスト環境で試せる
これらの項目に不安がある場合は、いきなり自社だけで進めるのではなく、専門家に相談しながら小さく試すことをおすすめします。
マダナイ？でできること
マダナイ？では、Claude Codeを含むAIツールを実際の制作・運用業務に取り入れながら、ホームページ制作・修正・保守をサポートしています。自社での実践を踏まえたうえで、どの作業を内製化でき、どの作業をプロに任せるべきかを一緒に整理することも可能です。
- 既存ホームページの軽微な修正・更新代行
- AIツールを活用した制作フローのご提案
- 本格的な制作・保守が必要な場合のホームページ制作のご相談
「まだない」を「もうある」へ。Claude Codeでどこまで自社対応できそうか、気軽にご相談ください。すべてを内製化するのが難しい場合も、部分的にプロへ依頼するという選択肢があります。制作費用の目安はホームページ制作の費用相場の記事でもご確認いただけます。
よくある質問
Q. 今回はどんな範囲をClaude Codeで対応しましたか？
ゼロからのデザイン制作ではなく、既存ページの文言修正、記事ページの追加、レイアウトの微調整といった範囲で活用しました。
Q. 制作にどれくらいの時間がかかりましたか？
作業内容によって異なりますが、文言修正のような軽微な作業は数分〜数十分、新規ページの追加は既存ページの型を流用することで、ゼロから作るより短時間で済むことが多い印象です。
Q. コードの知識がなくても同じように進められますか？
日本語での指示自体は可能ですが、提案された修正内容が正しいかどうかを判断するには、ある程度の知識があると安心です。詳しくはClaude Codeとは？の記事もご参照ください。
Q. 意図と違う修正をされたことはありますか？
はい、指示があいまいだった場合に、意図と異なる範囲まで修正されたことがあります。対象範囲を具体的に指定することで、こうしたずれは減らせます。
Q. バックアップは取りましたか？
はい、変更前の状態にいつでも戻せるよう、作業前にバックアップを取ることを徹底しています。
Q. デザインの細かい調整も対応できましたか？
余白やフォントサイズなどの数値で指定できる調整は対応できましたが、色使いや雰囲気といった感覚的な部分は、言葉で伝えるのに工夫が必要でした。参考にしたいページのスクリーンショットを見せながら伝えると、意図が伝わりやすくなります。
Q. スマホ表示の確認はどう行いましたか？
複数の画面サイズでの見た目を、都度目視で確認しました。この工程は省略せず、必ず人の目でチェックしています。文字の折り返し位置やボタンの押しやすさなど、実機に近い環境で見て初めて気づく点も多くありました。
Q. 今後もClaude Codeでの制作・更新を続けますか？
はい、文言修正やページ追加など、向いている作業については継続して活用する予定です。一方で、大きなデザイン変更や新規サービスページの立ち上げなど、判断の重い作業は引き続き人が主体で進めます。
Q. これから試したい場合、何から始めるのがおすすめですか？
いきなり本番のホームページを触るのではなく、まずは小さなテストページや、社内向けの簡易ページから試すことをおすすめします。慣れてきたら、影響範囲の小さい修正から少しずつ本番環境に取り入れていくと安心です。
Q. 商用のホームページでもこの方法は使えますか？
使えますが、公開前の最終確認や、SEO・表示崩れのチェックを省略しないことが前提になります。不安な場合は、専門家によるチェックを併用することをおすすめします。
Q. Cursorなど他のツールと迷っています。どう選べばいいですか？
ホームページ制作という用途であれば、料金や操作環境の違いで選び方が変わります。詳しくはClaude CodeとCursorを比較の記事で解説しています。
まとめ
Claude Codeは、既存ホームページの文言修正やページ追加、レイアウト調整といった作業には十分活用できる一方、公開判断や細かなデザインの最終確認は、引き続き人が行う必要があります。ChatGPTとの違いは、実際にファイルを操作し作業を完了させる点にあります。
実際に使ってみて感じたのは、Claude Codeは「代わりにすべてやってくれる魔法のツール」ではなく、「地道な作業を一緒に進めてくれるパートナー」という感覚に近いということです。最終的な判断や確認を人が担うという前提を守れば、日々のホームページ運用の負担を減らす手段のひとつになります。
Claude Code自体の料金や始め方はClaude Codeとは？の記事、他のツールとの比較はClaude CodeとCursorを比較の記事、料金の詳細はClaude Codeの料金解説の記事、実際に使えるプロンプト例はClaude Codeのプロンプト30選の記事もあわせてご覧ください。