無料AIを使ってホームページテンプレートを編集

「無料AI」を使って「対話だけで」ホームページテンプレートを編集

※この記事は、2026.5.21時点のものです。

無料版の ChatGPT、Gemini、Claude でテンプレをどこまで編集できるのか、実際に検証してみました。

最初に結論。
それぞれテストした結果、執筆時点ではClaudeだけがほぼ完璧に処理しましたので、当ページではClaude無料版を使った検証報告になります。

補足：
この記事では、「無料版」をテーマにしていますが、「有料版」をお持ちの場合、ClaudeのCoworkやGPTのCodexを使うと、AIと会話しながら、パソコン内のテンプレートフォルダを確認・編集してもらうこともできます。難易度の高い指示でもOK。

ChatGPTの検証結果はこちら。（※相談冒頭で終了しています）
Geminiの検証結果はこちら。（※相談冒頭で終了しています）

検証時のClaudeの環境

Claude（この記事では、無料版 Sonnet4.6を使用）
Googleアカウントを持っていれば、すぐ使えます。

作業前の注意点（以下工程を一緒にやってみる場合）

無料版だと、すぐ上限制限がきて以下のようなポップアップがでます。
ただ、数時間経過すれば解除されますので、アップグレードはせず、とりあえず待ちましょう。

現時点の情報だと、制限はメッセージ回数・トークン量・利用時間帯の3つで管理されており、5時間という時間枠の中での使用量を管理する仕組みです。5時間枠内で一定量を消費すると制限に達し、次の5時間枠が始まるまで送信できなくなります。
毎日30分程度ずつこつこつ進めるなら上限にはかかりにくいと思いますが、何時間も作業予定の場合は、スレッドを分けて依頼するといいようです。
（てっきり無料版アカウント全体で上限をかけるのかと思ったのですが、Claudeに聞いたところ、この回答でした。）

スレを分ける場合、途中までできているzipを、スレ開始時点で添付して下さい。
「前スレで途中まで作業完了しています。ここは、続きのスレです。要件は・・・・」
みたいな感じでスタートするといいかと。

以下、実際の検証記録です。
スレッドで当たり外れがあるかもしれません。この記事のようにうまくいかない場合は、新しいスレッドでやり直してみて下さい。この記事と同じ内容で進む保証はないので、うまくいかない場合は、Claude自身に相談しながら取り組んでみましょう。

※まず最初に、以下のテンプレートzipをダウンロードしておいて下さい。

htmlテンプレートをzipでDLしてきました。 あなたに編集を手伝ってもらいたいんだけど、どうお願いすればいい？初心者なので、具体的にわかりやすく説明して下さい。
zipを添付するね。 （補足：Claudeの画面のどこでもいいのでドラッグ＆ドロップする方法が一番簡単です。）
（この画像はAIに添付する必要はありません。マニュアル用です。） トップページの、「診療科目のご案内」のブロックを編集したいです。 見出しの「診療科目のご案内」を、「当店のおすすめ」に。 「一般内科」のブロックは、以下に。 タイトル：ハンドドリップコーヒー 説明：自家焙煎の豆を一杯ずつ丁寧に淹れています。すっきりとした後味と、豆ごとに変わる香りをお楽しみください。 「小児科」のブロックは、以下に。 タイトル：日替わりランチ 説明：地元の旬の野菜をたっぷり使った、週替わりのランチプレート。スープと小さなデザートが付いて、ゆったりお過ごしいただけます。 「皮膚科」のブロックは、以下に。 タイトル：手作りスイーツ 説明：毎朝焼き上げる季節のタルトやチーズケーキ。コーヒーとの相性を考えて作っています。 その下の「もっとみる」ボタンは「メニューをみる」に。
実際のClaudeの作業結果ページを見る。
※もしzipで返却してくれない場合は、「zipで返却して下さい」と伝えてみて下さい。
（この画像はAIに添付する必要はありません。マニュアル用です。） 次は、「診療科目」ページの内容を変更したい。 現状、「診療科目のご案内」という見出しと、その下に６つのブロックがあるけど、「モーニング」で3つのブロック、「ランチ」で3つのブロック、にしたい。 その上で、各ブロックの内容を、以下に書き換えて。 【モーニング】 タイトル：トーストモーニング説明：自家製パンのトーストに、ゆで卵とミニサラダ、お好きなドリンクをセットで。朝の定番、ボリュームしっかりめです。 タイトル：クロワッサンプレート説明：バターたっぷりのクロワッサンに、ふんわりスクランブルエッグとカリッと焼いたベーコンを添えて。ドリンク付き。 タイトル：グラノーラボウル説明：自家製グラノーラと旬のフルーツ、無糖ヨーグルトを合わせた軽めのモーニング。はちみつをかけてどうぞ。 【ランチ】 タイトル：本日のパスタランチ説明：週替わりのパスタに、彩りサラダ・スープ・ドリンクが付くお得なセット。プラス料金で食後のデザートも追加できます。 タイトル：季節のキッシュプレート説明：旬の野菜を使った自家製キッシュに、サラダとスープを添えて。軽めに済ませたい日のランチにおすすめです。 タイトル：自家製サンドプレート説明：たっぷりの具材を挟んだボリュームサンドに、ポテトとスープが付きます。お持ち帰りもできます。
実際のClaudeの作業結果ページを見る。
（この画像はAIに添付する必要はありません。マニュアル用です。） 次は、メニュー一括置き換えをお願いします。 現状、 当院について 診療科目 スタッフ紹介 お問い合わせ 採用情報 とあるので、以下に変更して。 当カフェについて カフェメニュー スタッフ募集（※これだけ「採用情報」と同じボタン風にして） htmlファイル名も、それぞれ合う感じに変更して下さい。任せます。
実際のClaudeの作業結果ページを見る。
ファイルの削除は、あなたの権限ではできないのね？
いや、今回は自分で削除するからこのままでいいよ。
（この画像はAIに添付する必要はありません。マニュアル用です。） 次は、トップページのメイン画像３枚の入れ替えをお願いします。 １枚目：i16a297ff-6b5ad6103499.jpg ２枚目：i3c14cdc3-e7de7b5cbddd.jpg ３枚目：ib5f8d11c-efd8f827ba32.jpg （※実際に同じ画像を使ってみたい場合は、zipをDLして解凍し、AIに投げて下さい。） この画像3枚を、ZIPの中の images/1.jpg・2.jpg・3.jpg に上書きして下さい。 幅を2,000pxってのは決まってるんだけど、容量については「劣化しすぎないぐらいで、できるだけ圧縮」とかぼやっとした指示もできるの？
実際のClaudeの作業結果ページを見る。
ありがとう。2.jpgは私がphotoshopで圧縮強くかけちゃってたから、気にしないで。
（この画像はAIに添付する必要はありません。マニュアル用です。） 次の相談。ロゴ画像だけど、あなたは画像は生成できないのよね？
色付きもできるの？
では、ロゴの文字は「Sample Cafe」に。 色は黒に近い今の状態ぐらい。 フォントはゴシック。英語で洗練されたフォントがあれば、それを使って。 元画像にあるロゴマークは使わないので入れない。背景は透過PNG。 余白は文字のピクセルを自動検出して上下左右に均等に5pxだけ残すようにして。目視ではなくピクセル検出で処理してね。 上記処理後、ロゴ幅を1000pxにまで拡大して。 補足：ロゴは最初失敗しました。余白を具体的に指示しなかった為、余白たっぷりで出てしまいました。Claudeに直接尋ねた所、具体的に指示することで解決するとアドバイスをもらった結果が上の指示です。
実際のClaudeの作業結果ページを見る。
（この画像はAIに添付する必要はありません。マニュアル用です。） 次は、トップページのGoogle Mapを以下に入れ替えて下さい。 <iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d3240.8319461342535!2d139.76448111205085!3d35.681139772473024!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1779323829050!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> それと、ついでにトップページの以下のブロックは、削除しておいて。 診療日 お知らせ テンプレートのご利用前に必ずお読み下さい 無料CMS（Template Party CMS）のご案内 無料素材サイト（haconana）のご案内 ※補足：ここで初めてClaudeがミス。 マップの変更と、複数ブロックの削除をまとめて依頼したせいで、マップまで削除されてしまいました。Claude無料版が想像よりかしこいなと思って欲張ったのが原因でした。 依頼する際は、１種類の処理だけを具体的に指示することをお勧めします。 今回の場合は、２つに分けて指示するべきでした。
※ここでは、デモ用に東京駅の地図を使用していますが、実際にはご自身のお店の地図のコードを指示して下さい。 Google Mapの使いかたマニュアル。
実際のClaudeの作業結果ページを見る。
（この画像はAIに添付する必要はありません。マニュアル用です。） 次は、トップページの「当店のおすすめ」の３枚の写真を入れ替えて下さい。 ハンドドリップコーヒーは、ifff1a32f-077b55a9c5dc.jpg。ファイル名を、coffee.jpgに変更して使って。 日替わりランチは、i38933d86-6bfc5edfedad.jpg。ファイル名を、lunch.jpgに変更して使って。 手作りスイーツは、ia93ce3cb-8e5b38590ead.jpg。ファイル名を、sweets.jpgに変更して使って。 （※実際に同じ画像を使ってみたい場合は、zipをDLして解凍し、AIに投げて下さい。） 全て画像幅を1000pxにリサイズし、容量もいい感じに圧縮しておいて。
実際のClaudeの作業結果ページを見る。
最後に、全体の色の相談。 もともとがクリニック用なので、ブルー色なのよね。 カフェなので、温かみのあるブラウン系にしたいんだけど、あなたに指示するので一番理想的な方法は？ できるのであれば、カフェにあいそうな、温かみのある茶系、みたいな指示で通るのかな？
うん、サンプルお願いします。
「パターンC」で作業をお願いします。 補足： このテンプレの場合、テーマカラーを一括管理していた為、カラー変更が簡単にできましたが、少し前のテンプレだと直接カラーコードを複数箇所に記載しています。 その場合も一旦AIとどんな指示方法が一番失敗が少ないか相談しながら進めてみて下さい。
実際のClaudeの作業結果ページを見る。