ChatGPTなどのAIにHTMLを作ってもらったとき、
機能は問題ないけど、もう少し見た目を良くしたい
と思うことがあります。
そんなときに便利なのが、自分が気に入ったHTMLを「HTML資産」として残しておく方法です。
例えば、以前作ったボタンや入力フォーム、写真アップロード要素などで、
この見た目は気に入っている
と思ったものを保存しておきます。
そして、AIに作ったHTMLの見た目を向上してもらうとき、そのHTMLを参考資料として渡します。
AIにゼロからデザインを考えてもらうのではなく、自分が過去に気に入ったデザインを見本として渡すという考え方です。
この記事では、この方法について紹介します。
見た目の良いHTMLを参考としてAIに渡す
例えば、以前作った「写真アップロード要素」のデザインが気に入っていたとします。
この時「写真アップロード要素」部分を抽出した単一HTMLを保存しておけば、AIに作ったHTMLの見た目を向上してもらうときに、
写真アップロード要素の見た目は、下記のHTMLを参考にしてください。
（ここに自分が保存していたHTMLを貼り付ける）
と指示できます。
単純に、
もっと見た目を良くしてください
と依頼するより、自分が求めているデザインの方向性をAIへ具体的に伝えやすくなります。
AIにゼロからデザインを考えてもらうのではなく、
「自分が過去に気に入ったデザイン」を参考資料として渡す
という使い方です。
HTML資産は汎用的な形にしておく
保存するHTMLは、そのサイト専用のコードのまま残すより、他のサイトでも参考にしやすい形に整理しておくと便利です。
例えばAIに、
この写真アップロード部分だけを抽出して、
他のHTMLでも参考にできる汎用的な単一HTMLにしてください。
と依頼します。
その際、
- 必要なHTML
- そのHTMLに必要なCSS
- 必要に応じてJavaScript
だけを残し、関係のないコードは除外してもらいます。
こうしておくと、次にAIへ渡す参考資料として使いやすくなります。
JavaScriptを含めるかどうか
HTML資産にJavaScriptを含めるかどうかは、用途によって変わります。
見た目だけを参考にしたい場合は、HTMLとCSSだけでも十分です。
一方で、JavaScriptも含めておくと、
- ボタンを押したときの動作
- ダイアログの表示
- ファイルのドラッグ＆ドロップ
- 読み込み表示
など、見た目だけでなく動作もAIへ参考として渡せます。
似た機能を実装するときや、不具合を修正するときにも役立つ場合があります。
ただし、JavaScriptには処理を実行するコードも含まれるため、出所が不明なコードをそのまま実行しないなどの注意は必要です。
保存したHTMLは一度ブラウザで確認する
AIに抽出してもらったHTMLは、そのまま保存するのではなく、一度ブラウザで開いて確認することをおすすめします。
例えば、
- 見た目が崩れていないか
- ボタンなどが正常に動くか
- 不要な部分が残っていないか
を確認します。
問題なければ、そのHTMLを自分の資産として保存しておきます。
なおこの記事では、こうして保存したHTML・CSS・必要に応じたJavaScriptをまとめて「HTML」と表記します。
少しずつHTML資産を増やしていく
例えば、次のようなものを保存しておきます。
- 見た目の良いボタン
- 写真アップロードパネル
- 入力フォーム
- カードデザイン
- ダイアログ
- 読み込み表示
- ヘッダー
- メニュー
サイトを作るたびに、
これは今後も使えそう
と思ったものを少しずつ残していきます。
すると、自分専用のHTML部品集が少しずつ育っていきます。
最初は数個しかなくても、10個、20個と増えていくと、AIへサイト制作を依頼するときの参考資料としてかなり便利になります。
特に、毎回
もう少しモダンにしてください
もっと見やすくしてください
もう少しおしゃれにしてください
と曖昧な指示を出すより、実際のHTMLを見せた方がデザインの方向性を伝えやすくなります。
HTML資産を管理するサイトも作りました
以前、こうしたHTML資産をまとめて管理するためのツールも作りました。
詳しくはこちらの記事で紹介しています。
ツールはこちらです。
複数のHTMLをドラッグ＆ドロップして、
- ボタン集
- フォーム集
- アップロード要素集
- カード集
など、自分専用のHTML資産集を作ることができます。
出力サンプルはこちらです。
GitHubでも公開しています。
可能であれば、コードの内容を確認したうえでローカルに保存し、オフラインで利用する方法もおすすめです。
まとめ
AIに
もっと良い見た目にしてください
とだけ依頼するより、
この要素の見た目は、このHTMLを参考にしてください
と具体的な参考HTMLを渡した方が、自分好みのデザインへ近づけやすくなります。
そのためにも、普段から気に入ったHTML要素を捨てずに、資産として残しておくと便利です。
AIにHTMLを書いてもらうほど、自分のHTML資産も増えていく。
そして、増えた資産を次のAI生成に再利用する。
この繰り返しによって、少しずつ自分好みのサイトをAIに作ってもらいやすい環境を作っていけます。