AIで自分だけのHTMLツールを作る方法｜Excelでプロンプトを自動生成して開発を効率化してみた

いつもブログをご覧いただき、ありがとうございます。

今回は、生成AIを活用した新しい取り組みとして、私が実際に使用している「開発支援ツール」の作り方を紹介します。

普段からAIを使ってブログ作成や情報整理、基礎知識の向上に取り組んでいますが、最近はさらに一歩進んで、「自分で使うための小さなHTMLツール」をAIで作ることにも挑戦しています。

たとえば、こんなことを感じたことはありませんか？

こんな便利ツールがあればいいのに
毎回同じような作業をするのが面倒
プロンプトさえ整っていれば、自分でもAIに作らせられそう
でも、毎回ゼロから指示を書くのは大変

私自身もまさにそう感じることが多くありました。

そこで今回は、Excelに「ツール名」「必要な機能」「デザインの方向性」を入力するだけで、AIに渡せる開発用プロンプトを自動生成する仕組みを作ってみました。

難しいプログラミング知識がなくても、AIに依頼するための指示文を整えることができるので、初心者の方にもかなり使いやすい内容だと思います。

今回作ったもの：HTMLツール開発用プロンプト自動生成シート
Excelシートの構成
E列に入れる数式
入力例①：ITパスポート過去問ツール
入力例②：SEO記事構成メーカー
AIでツールを作るときのおすすめ手順
実際に作ってみて感じた注意点
ITパスポート学習用データも配布しています
まとめ：AIを使えば、サラリーマンでも小さな開発は始められる

今回作ったもの：HTMLツール開発用プロンプト自動生成シート

今回作成したのは、Excelで管理するシンプルなプロンプト生成シートです。

ざっくり言うと、以下の内容を入力するだけで、AIにそのまま貼り付けられる開発依頼文が完成します。

作りたいツールのテーマ
必要な機能
デザインの方向性
出力してほしいHTMLコードの条件

完成したプロンプトをChatGPTやClaudeなどの生成AIに貼り付けることで、ローカルブラウザで動くシングルファイルHTMLツールを作成してもらう流れです。

ちなみに、今回の仕組みは無料で使っていただいて大丈夫です。

もし「役に立ったよ」「次の開発も応援してるよ」という方がいれば、シェアしていただけるだけでも本当にありがたいです。広告収益が数円でも入れば、次のツール開発費にまわせます。

正直、私も普通のサラリーマンなので、毎月2万円前後を開発や学習に使うと、それなりにお小遣いが削られます。笑

だからこそ、同じように「AIで何か作ってみたい」と思っている方に、できるだけ実用的な形で共有していきたいと思っています。

Excelシートの構成

今回のExcel管理シートは、以下のような構成です。

A列	B列	C列	D列	E列
ID	ツール名	必須機能	デザイン指針	プロンプト生成（コピー用）

B列に作りたいツール名、C列に必要な機能、D列にデザインの方向性を入力します。

そしてE列に数式を入れることで、AIにそのまま依頼できるプロンプトが自動生成される仕組みです。

E列に入れる数式

E列には、以下の数式を入力してください。

この数式を入れておくことで、B列・C列・D列の内容をもとに、AIへ依頼するためのプロンプトが自動で作成されます。

="# 依頼：デスクトップ完結型HTMLツールのプログラミング" & CHAR(10) &
"あなたはシニアフロントエンドエンジニアとして、以下の要件を満たすシングルファイルのHTMLツールを制作してください。" & CHAR(10) & CHAR(10) &
"## 1. ツール概要" & CHAR(10) &
"* テーマ: " & B2 & CHAR(10) &
"* ターゲット: ローカルのブラウザ（デスクトップ）で運用。" & CHAR(10) & CHAR(10) &
"## 2. 実装要件（必須）" & CHAR(10) &
"* 機能一覧: " & C2 & CHAR(10) &
"* 技術スタック: HTML5 / CSS3 / Vanilla JS / Tailwind CSS / Lucide-icons / localStorage" & CHAR(10) & CHAR(10) &
"## 3. UI/UX デザイン" & CHAR(10) &
"* 指針: " & D2 & CHAR(10) &
"* 構成: ヘッダー、メインコンテンツ、操作用ボタン、トースト通知" & CHAR(10) & CHAR(10) &
"## 4. 出力形式" & CHAR(10) &
"* コード構成: 全て1つのHTMLファイル内に完結" & CHAR(10) &
"* コード品質: 意味のある変数名、日本語コメントを付与すること。"

この数式を使えば、毎回ゼロからプロンプトを書く必要がなくなります。

「どんなツールを作りたいか」「どんな機能がほしいか」「どんな見た目にしたいか」をExcelに入力するだけで、開発依頼文が完成します。

入力例①：ITパスポート過去問ツール

たとえば、私が実際に作ってみた例がこちらです。

ID	ツール名	必須機能	デザイン指針
1	ITパスポート過去問ツール	CSV読込、ランダム出題、正解記録(localStorage)、残り時間タイマー	ダークモード、集中を妨げないシンプルUI、正解時に緑色に光る

この内容を入力すると、以下のようなプロンプトが自動生成されます。

# 依頼：デスクトップ完結型HTMLツールのプログラミング

あなたはシニアフロントエンドエンジニアとして、以下の要件を満たすシングルファイルのHTMLツールを制作してください。

## 1. ツール概要
* テーマ: ITパスポート過去問ツール
* ターゲット: ローカルのブラウザ（デスクトップ）で運用。

## 2. 実装要件（必須）
* 機能一覧: CSV読込、ランダム出題、正解記録(localStorage)、残り時間タイマー
* 技術スタック: HTML5 / CSS3 / Vanilla JS / Tailwind CSS / Lucide-icons / localStorage

## 3. UI/UX デザイン
* 指針: ダークモード、集中を妨げないシンプルUI、正解時に緑色に光る
* 構成: ヘッダー、メインコンテンツ、操作用ボタン、トースト通知

## 4. 出力形式
* コード構成: 全て1つのHTMLファイル内に完結
* コード品質: 意味のある変数名、日本語コメントを付与すること。

私は今年の7月を目標に、ITパスポート資格の取得に向けて勉強を進めています。

ただ、教材以外にはあまりお金をかけたくないという気持ちもありました。

そこで、

「それなら自分で勉強用ツールを作ってしまえばいいのでは？」

と思ったのが、この仕組みを作るきっかけです。

入力例②：SEO記事構成メーカー

もうひとつの例として、ブログ作成に使える「SEO記事構成メーカー」も考えてみました。

ID	ツール名	必須機能	デザイン指針
2	SEO記事構成メーカー	構成案(H1〜H4)自動生成、文字数カウント、HTMLタグ付きコピー、メモ保存	清潔感のある白ベース、2カラム構成、完了時にトースト通知

この内容を入力すると、以下のようなプロンプトが生成されます。

# 依頼：デスクトップ完結型HTMLツールのプログラミング

あなたはシニアフロントエンドエンジニアとして、以下の要件を満たすシングルファイルのHTMLツールを制作してください。

## 1. ツール概要
* テーマ: SEO記事構成メーカー
* ターゲット: ローカルのブラウザ（デスクトップ）で運用。

## 2. 実装要件（必須）
* 機能一覧: 構成案(H1〜H4)自動生成、文字数カウント、HTMLタグ付きコピー、メモ保存
* 技術スタック: HTML5 / CSS3 / Vanilla JS / Tailwind CSS / Lucide-icons / localStorage

## 3. UI/UX デザイン
* 指針: 清潔感のある白ベース、2カラム構成、完了時にトースト通知
* 構成: ヘッダー、メインコンテンツ、操作用ボタン、トースト通知

## 4. 出力形式
* コード構成: 全て1つのHTMLファイル内に完結
* コード品質: 意味のある変数名、日本語コメントを付与すること。

このように、アイデアさえあれば、AIに作ってもらうための指示文を効率よく準備できます。

ブログ、勉強、仕事、データ整理、タスク管理など、活用できる場面はかなり多いと思います。

AIでツールを作るときのおすすめ手順

実際に使ってみて感じた、AIでHTMLツールを作るときのおすすめ手順を紹介します。

1. まずはExcelでプロンプトを作成する

最初に、Excelへ以下の内容を入力します。

ツール名
必要な機能
デザインの方向性

すると、E列にAIへ依頼するためのプロンプトが自動生成されます。

この時点で、かなり具体的な開発依頼文になります。

2. ChatGPTなどにプロンプトを貼り付ける

次に、生成されたプロンプトをChatGPTなどのAIに貼り付けます。

ここで大切なのは、最初から完璧を求めすぎないことです。

まずは大枠を作ってもらい、そのあとで改善していくイメージがちょうどいいです。

3. 出力されたHTMLを保存して動作確認する

AIがHTMLコードを出力してくれたら、メモ帳やエディタに貼り付けて、拡張子を「.html」で保存します。

保存したファイルをブラウザで開けば、ローカル環境でツールを動かすことができます。

インストール不要で使えるのが、シングルファイルHTMLツールの便利なところです。

4. 3〜4回ほど改善指示を出す

一度出力されたコードをそのまま完成とするのではなく、何度か改善指示を出すのがおすすめです。

たとえば、以下のような指示を追加します。

さらに機能を向上させ、使いやすさを改善してください。
UIをより見やすくし、初心者でも直感的に操作できるデザインにしてください。
不具合が起きにくいように、コード全体を見直してください。

このように何度か修正を重ねることで、かなり実用的なツールに近づいていきます。

5. 最後にClaudeなど別のAIで仕上げる

私の場合は、最後にClaudeにもコードを確認してもらうことがあります。

たとえば、以下のような指示を出します。

このHTMLツールをプロ仕様に改善してください。
デザイン、操作性、コード品質、保守性の観点から問題点を洗い出し、より良い完成版にしてください。

AIによって得意な部分が少しずつ違うので、複数のAIを使い分けると、思いのほか完成度が上がります。

実際に作ってみて感じた注意点

今回のようにAIでHTMLツールを作ると、かなり便利です。

ただし、実際にやってみると、いくつかつまずきやすいポイントもありました。

文字化けには注意

私が特につまずいたのは、文字化けです。

日本語を扱うHTMLツールでは、文字コードの指定がうまくいっていないと、画面上の文字が崩れて表示されることがあります。

その場合は、AIに以下のように依頼すると改善しやすいです。

日本語が文字化けしないように、UTF-8指定を含めてHTML全体を修正してください。

腹が立つくらい文字化けすることもありますが、ここは根気よく修正していけば大丈夫です。

AIに「文字化けを修正して」と繰り返し依頼するだけでも、少しずつ改善されていきます。

localStorageのスペルミスに注意

もうひとつ注意したいのが、localStorageの表記です。

ブラウザ内にデータを保存する機能ですが、スペルを間違えると正しく動かない場合があります。

たとえば、入力例の中では「LocalStrage」と書いてしまいがちですが、正しくはlocalStorageです。

こういった細かいミスも、AIにコードレビューをお願いすると見つけてもらいやすくなります。

最初から完璧なものは出てこない

AIはとても便利ですが、一発で完璧なツールが完成するとは限りません。

ボタンの動きがおかしい、保存機能がうまく動かない、デザインが少し見づらいなど、細かい修正は出てきます。

ただ、そこを改善していく過程も含めて、AI開発の面白いところです。

「一発完成」ではなく、AIと一緒に育てていく感覚で進めると、かなり楽しく取り組めます。

ITパスポート学習用データも配布しています

今回の流れで、ITパスポート学習用の一問一答データも用意しています。

ITパスポートの勉強をしている方は、よければ活用してみてください。

▼ITパスポート一問一答 100問

it_passport_100.csv (0 ダウンロード ) it-passport-50.html (0 ダウンロード )

私自身もまだ学習中なので、分からないところやつまずくことは普通にあります。

だからこそ、完璧を目指しすぎず、気軽に進めていくのが大事だと思っています。

分からないところが出てきたら、その都度AIに聞けばOKです。

一緒に少しずつ進めていきましょう。

まとめ：AIを使えば、サラリーマンでも小さな開発は始められる

今回は、Excelを使ってAI開発用のプロンプトを自動生成する方法を紹介しました。

正直なところ、数か月ぶりに自分の言葉でしっかり書いた記事かもしれません。

もちろん、文章の日本語修正にはAIも活用しています。笑

ただ、今回伝えたかったのは、プログラミングが本職でなくても、生成AIを使えば自分用の便利ツールを作れる時代になっているということです。

私自身も普通のサラリーマンですが、AIを使いながらブログを書いたり、勉強したり、小さなツールを作ったりしています。

これからも、そういったリアルなAI活用の記録を発信していきたいと思います。

「AIを使って何か作ってみたい」

「でも、何から始めたらいいか分からない」

そんな方にとって、今回の記事が少しでも参考になれば嬉しいです。

また気軽に遊びにきてください。

最後まで読んでいただき、ありがとうございました。