Geminiに作成済みHTMLを改造させる方法｜新規作成される原因と既存コードを修正してもらうコツ

GeminiにHTMLアプリの修正や機能追加を依頼した際、元のHTMLを渡しているにもかかわらず、まったく新しいコードを生成されてしまうことがあります。これはGeminiがHTMLを読み取れないという意味ではなく、指示の出し方や渡している情報量によって、最適化の判断が変わるために起こります。

この記事では、既存のHTMLをベースに改造してもらうための具体的な依頼方法や、新規作成ではなく修正作業として認識してもらうポイントについて解説します。

Geminiが既存HTMLではなく新しいものを作る理由

Geminiは、ユーザーから与えられたコードを参考にして回答を生成しますが、必ずしも「既存コードを編集する」という目的を自動的に理解するわけではありません。

例えば「このHTMLをもっと使いやすくしてください」という依頼の場合、Geminiは改善方法としてコード全体を作り直す方が適切だと判断することがあります。特にHTMLの量が少ない場合や、改善内容が大きい場合は、新規作成という形で回答されやすくなります。

また、「改造」「改善」「リニューアル」などの言葉は、人によって意味が異なるため、AI側では既存コードを維持する必要性が明確ではありません。

Geminiに既存HTMLを変更してほしい場合は、単純にコードを貼り付けるだけではなく、元のコードを維持するよう明確に指定することが重要です。

例えば以下のような指示にすると、既存HTMLを編集する方向に誘導できます。

「以下のHTMLをベースに修正してください。現在のデザインや構造はできるだけ維持し、新しいHTMLを最初から作り直さず、必要な部分だけ変更してください。」

さらに「変更箇所以外のコードは削除しないでください」「完成したHTML全文を出力してください」などの条件を追加すると、元データを残した修正になりやすくなります。

長いHTMLの場合、チャット欄に貼り付けるだけではGeminiがコード全体を正確に把握できない場合があります。

特にJavaScriptやCSSを含むWebアプリでは、HTMLだけでなく関連するCSSやスクリプト部分も必要になることがあります。HTML部分だけを渡すと、Geminiが不足情報を補うために新しい構成を作成する場合があります。

例えば、ボタンの動作を変更したい場合はHTMLだけではなく、該当するJavaScriptも一緒に渡すことで、既存機能を維持した修正を依頼しやすくなります。

既存HTMLを改造したい場合は、以下のようなテンプレートを利用すると効果的です。

「このHTMLアプリはすでに完成しているものです。新規作成ではなく、現在のコードをベースに修正してください。既存のレイアウト、デザイン、機能は維持してください。変更が必要な部分だけ編集し、削除や作り直しは行わないでください。」

機能追加の場合は、さらに「追加したい機能は○○です。既存機能を壊さないように実装してください」と具体的な条件を加えることで、より希望に近い結果になります。

新しいGeminiチャットでは、以前の会話内容や開発経緯が引き継がれません。そのため、以前作成したHTMLを渡すだけでは、Geminiはそのコードがどのような目的で作られたものなのか判断できません。

例えば前のチャットで「ゲームアプリとして作成したHTML」と説明していた場合でも、新しいチャットではその情報がありません。そのため、HTMLと一緒に「これは○○という目的で作ったアプリです」と背景を説明すると理解度が向上します。

コードだけではなく、現在の問題点、変更したい部分、絶対に残したい機能を整理して伝えることが、AIをプログラミング補助として活用するポイントです。

Geminiが既存HTMLを渡しても新しいものを作成するのは、コードを扱えないからではなく、依頼内容から「修正」より「再設計」が適切だと判断している可能性があります。

既存コードを維持したい場合は、「新規作成ではなく現在のHTMLをベースに修正する」「変更箇所以外は保持する」と明確に指示することが重要です。

また、HTMLだけでなくCSSやJavaScript、アプリの目的や変更条件も一緒に伝えることで、Geminiはより正確に既存アプリを改造できるようになります。