はじめに
AI画像生成を始めると最初にぶつかるのが「英語プロンプトの壁」です。Stable DiffusionやMidjourneyで思い通りの画像を作るには、スタイル・構図・照明・品質などを英語で細かく指定する必要があります。
「cinematic lightingって何？」「ネガティブプロンプトはどう書けばいい？」——こうした悩みを解消するため、日本語のGUIで選ぶだけで英語プロンプトが自動生成されるWebツールを作りました。フレームワーク不要、HTML/CSS/JSだけで動きます。
ツールの機能
主な機能は以下の通りです。
- スタイル選択: 写真風・アニメ風・油絵風など20種類以上
- 構図・アングル: 俯瞰、ローアングル、クローズアップなどをワンクリックで指定
- ライティング: スタジオ照明、自然光、ゴールデンアワーなど
- 品質プリセット: ネガティブプロンプトも自動付与
- ワンクリックコピー: 生成結果をクリップボードに即コピー
サーバー不要で完全にクライアントサイドで動作します。
技術的なポイント
CSS変数によるテーマ管理
UIのカラーテーマをCSS変数で一元管理しています。ダークモード対応もこの仕組みで実現しました。
const setTheme = (theme) => {
const root = document.documentElement;
Object.entries(themes[theme]).forEach(([key, value]) => {
root.style.setProperty(`--${key}`, value);
});
};
ステートマシンでプロンプトを構築
各カテゴリの選択状態をオブジェクトで管理し、変更のたびにプロンプトを再構築します。
const state = {
style: null,
composition: null,
lighting: null,
quality: 'standard'
};
const buildPrompt = () => {
const parts = [];
if (state.style) parts.push(styles[state.style].en);
if (state.composition) parts.push(compositions[state.composition].en);
if (state.lighting) parts.push(lightings[state.lighting].en);
parts.push(qualityPresets[state.quality].positive);
return parts.join(', ');
};
日本語ラベルと英語プロンプトのマッピングをデータとして保持することで、新しいカテゴリの追加も容易です。
SVGアイコンのインライン生成
外部ライブラリに依存せず、SVGをJavaScriptから動的に生成しています。CDN依存ゼロで、オフラインでも動作可能です。
const createIcon = (path, size = 24) => {
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('viewBox', `0 0 ${size} ${size}`);
svg.innerHTML = `<path d="${path}" fill="currentColor"/>`;
return svg;
};
まとめ
英語プロンプトに悩む時間をなくしたい、という動機から作ったツールです。プロンプトの構造を学ぶ教材としても使えるので、AI画像生成を始めたばかりの方にもおすすめです。
全コードはHTML/CSS/JSで完結しているので、フォークしてカスタマイズも自由にできます。
ツールはこちらから試せます：
AI画像生成プロンプトビルダー
作り方の詳しい技術解説はブログにまとめています：
詳しくはこちら