0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

HTML1枚&ブラウザ完結!痒い所に手が届く「自分だけのAIプロンプトビルダー」を自作して公開した話

0
Last updated at Posted at 2026-09-29

こんにちは!Stable Diffusionでの画像生成ライフを楽しんでいる秋風です。

みなさんは、AIイラストを描くときの「プロンプト入力」、毎回どうしていますか?

「よく使う定番のタグはあるけど、毎回手打ちするのは面倒……」

「もっとニッチで、自分好みの細かな構図やニュアンスのタグをサクッと選べたらいいのに……!」

そんなモヤモヤを解消するために、HTMLとJavaScript1枚だけでサクサク動く、自分好みのプロンプトビルダーを自作して、Web上に公開しました!

今回は、このツールの特徴や、こだわったポイントについてご紹介します。

作ったもの(デモ&公開先)

まずは、実際に動かせるツールのリンクとリポジトリはこちらです。

WEBツール(すぐ使えます):https://prompt-builder-lemon.vercel.app/

GitHubリポジトリ(コードはこちら):https://github.com/akikaze0716/prompt-builder

スマホやPCのブラウザから、インストール不要ですぐに動かすことができます。

このツールのこだわり・特徴

  1. インストール不要、ブラウザで爆速起動

複雑なアプリや環境構築は一切なし。Webブラウザさえあれば、いつでもどこでも一瞬で開いてプロンプトを組み立てられます。

  1. 「痒い所に手が届く」ニッチなタグの厳選

ネット上に転がっている大量のプロンプト集から、「本当に自分でよく使うもの」「イラストの質感をグッと上げるお気に入りのタグ」だけを厳選してリスト化しました。クリックするだけで、ポジティブプロンプトとネガティブプロンプトに綺麗に振り分けて自動生成してくれます。※今後も追加予定です。

  1. 誰でも自分好みにカスタマイズ可能

「自分だけの最強ビルダーに育てたい!」と思い、タグの追加や修正がしやすいシンプルなコード構成にしています。日々新しいプロンプトを試行錯誤しながら、自分好みにアップデートしていく楽しさもあります。

ツールの画面イメージ

image.png

ちょっとした裏話(開発の工夫)

今回は、複雑なフレームワークを使わず、HTMLとCSS、そしてJavaScriptの組み合わせ(1枚のファイル)でコンパクトに仕上げました。

「いかにスムーズにポチポチ選んで、一発でコピペできるようにするか」というUIの使い勝手にこだわっています。SNSをあまりやっていない個人開発の身ですが、試行錯誤しながら形にするのって本当に楽しいですね!

おわりに & 応援のお願い

今回は、自作のプロンプトビルダーのご紹介でした。

もし「このツール便利そう!」「自分も使ってみたい!」と思っていただけたら、ぜひ触ってみてください。

また、「開発のモチベーションをもっと上げたい!コーヒーでも奢ってやってもいいぞ」という心優しい方がいらっしゃいましたら、以下のリンクから応援(投げ銭・OFUSE)をいただけると、めちゃくちゃ泣いて喜びます☕️✨

🧡 OFUSEでの応援はこちら:https://ofuse.me/f9193d79

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?