AIにアイキャッチをお願いしようと思った

WordPressで小説サイト

実のところ、AIにカットをお願いしようとして四苦八苦した…というのは今に始まったことではありません。

いくらコパイ先生やChatGPT先輩、Gemini君のようないわゆるLLM 1といえど…自然言語で提示されたプロンプトでは思ったような描画は難しいのだという、至極当たり前の話に行き当たったのでした。

そりゃそうですね。人間サマだって提示された文章構成、読み手の言語処理能力によっては文脈を読み間違うように、AIだって要領を得ない文章を投げられたら困ることはあるでしょうよ。

じゃあ、こっちにわかりやすい言葉で書いた文言から、AIにわかりやすいフォーマットを吐いてくれる仕組みプログラムを作ればいい!

おそらく、今のご時世もっと機能・効率の良いアプリが市販されているコトとは思います。…が、有り体に言えば自分がやりたいことに特化したものがほしい、という至ってワガママな思いつきなのですよ。
まずはご笑覧くださいませ。

HTMLでプロンプト入力フォームを作る(画像生成プロンプト ジェネレーター)

コパイロット先生もGemini君も、真っ直ぐに「どういうプロンプトがいい?」と訊くと、「自然言語で結構ですよ」と優しく仰るのですが…それで要領を得んからこちとら焦れてるのであって。

ここは作戦を変えて、こうお願いしてみました。

画像生成のためのプロンプトを入力するフォーマットを、HTMLでつくって

前回Pythonでえらく呻吟しましたので、今回は最初からHTMLで行こうと心に決めていました。
そうしてできあがったのがこちら。作ってもらったまんまの無修正です。

これで吐いたプロンプトがこちら

誰もいない海岸線、波打ち際に座り、向こうを向いた銀髪の男の子, watercolor illustration, wide shot, from behind,, soft morning light、misty, monochrome blue, nostalgic, 男の子の髪が風に柔らかく靡く様子 傍に群れるカモメ
aspect ratio: 16:9

上記HTMLに含まれる、コパイ先生提案のパラメーターは殆ど英語。
よくわからないまま語感だけで選んでコピペしました。なるべく英語のほうが通りがいいというのは前回で一応学習しておりますが、細かい描写まで英訳しておりません。まあ、どこまでできるのか実験ですからね。

出てきた画像

画像
さあ、誰でしょう

概ねイメージ通りのものを吐いてくれました。
とりあえず成功のようです。

パラメータの検討

これをもとに、もうちょっと作り込んで最終的に出てきた項目はこちら

画像サイズ(縦横の長さ、プリセットつき)
キャラクター設定(概要、種族、外見、服装、ポーズ)
シーン設定(場所、時間帯、背景要素)
ビジュアルスタイル
画風
構図


質感・ディテール
ムード・ 感情トーン
追加描写
除外したいもの

以下、それぞれの工夫点・調べた点について。
追加で調べたものも入っていますので、全ての項目が今回のプロンプトジェネレーターに盛り込めた訳ではありません。

画像サイズ

アイキャッチに使用するならピクセル指定までしておいた方が便利でしょう。
また、縦長・横長の指定が上手くいかないことが多かったのでアスペクト比のプリセットをプルダウンで選べるようにしてみました。9:16の需要がよくわからなかったのですが、どうやらスマホ向けということのようです。成程。

キャラクター設定

ここらへんはイメージをまんま書きます。
なるべく具体的に書けというのが定石らしいですが、そこは鍛錬かと。

キャラクターの概要
種族(例: 人間、エルフ、アンドロイド)
外見(髪・目・体格など)
服装(服装・小物)
ポーズ(ポーズ・視線)
シーン設定(シーンの概要・場所・時間帯)
背景要素(背景に入れたい要素)

ビジュアルスタイル(VisualStyle)

ビジュアルスタイルとは何ぞや。
定義としては、視覚的な印象やデザインの方向性。作品の「見た目の統一感」や「雰囲気」を指す…そうな。以下、コパイ先生提案のビジュアルスタイル20選。

  1. モノクロームブルー(Monochrome Blue)
  2. パステルトーン(Pastel Tones)
  3. ネオンサイバーパンク(Neon Cyberpunk)
  4. レトロフィルム(粒状感+退色)(Retro Film Style (grainy + faded colors))
  5. ミニマル&余白重視(Minimalist with Emphasis on Negative Space)
  6. ハイコントラスト・ドラマチックライト(High-Contrast Dramatic Lighting)
  7. ソフトフォーカス・ドリーミー(Soft-Focus Dreamy Look)
  8. 霧・霞を強調したアトモスフェリック(Atmospheric Fog and Haze)
  9. アンビエント・ローキー(暗部重視)(Ambient Low-Key Lighting (shadow‑heavy))
  10. ウォームトーンのノスタルジック(Warm-Toned Nostalgic Style)
  11. クールトーンの静謐スタイル(Cool-Toned Serene Style)
  12. 手描き風テクスチャ(紙の質感強め)(Hand-Drawn Texture (strong paper grain))
  13. フラットデザイン(影なし・単色)(Flat Design (no shadows, solid colors))
  14. グリッチ・デジタルノイズ(Glitch and Digital Noise)
  15. アナログ写真風(光漏れ・色ズレ)(Analog Photography Look (light leaks, color fringing))
  16. 水彩のにじみを強調した柔らかい表現(Soft Watercolor Bleed Effect)
  17. インクライン+淡彩の繊細スタイル(Ink Line Art with Light Wash Colors)
  18. 幻想的グロー(光が滲む)(Fantasy Glow (blooming light))
  19. ヴィンテージポスター風(粗い網点)(Vintage Poster Style (coarse halftone dots))
  20. シネマティックカラーグレーディング(映画調)(Cinematic Color Grading)

日本語のまま突っ込むとまた誤解されそうなので、今後はUIを日本語、プロンプトには英語で入れられるように改造予定。

画風(Artstyle)

定義:作品全体の表現技法や芸術的な傾向。作者や流派の「手癖」や「思想」が反映される。

特徴:
• 技法や筆致:水彩、油彩、鉛筆画、インク、コラージュなど
• 表現の抽象度:写実的、印象派、抽象画、ミニマル、シュールレアリスムなど
• 歴史的・文化的背景:浮世絵、バロック、アール・ヌーヴォー、現代アートなど
• 作者固有の癖:線の強弱、色使い、構図の傾向

例:ジブリ風・ディズニー風・浮世絵風・印象派・バロック調・ルネサンス風・漫画風・線画・ドット絵・水墨画風・アールヌーボー・アールデコ・フラットデザイン等

定義はわかったけど、ジブリだのディズニーだの、そんなもの指定して出てきた画像…うっかりしたところに出すと権利関係でモメそうですな。削除しとくのが無難でしょう。

構図(Composition)

定義:画面の中に「何を」「どこに」「どんなバランスで」配置するかを決める設計のこと。

人物…バストアップ・全身・アップ(顔のクローズアップ)
この辺はわかりやすい。

わからなかったので調べたのが以下の「代表的」構図。
高校で美術選択でもしていれば習ったのかもしれませんが、筆者はこれでも音楽選択だったので美術系の基礎知識はからっきしです。いい機会なので調べてみました。

構図が決めるもの
• 作品の 印象(静けさ、緊張、広がり、親密さ)
• 視線の 誘導(どこを最初に見せたいか)
• 画面の 安定感・動き
• 物語性(何を中心に据えるか)
• 感情の方向性(孤独、希望、緊張、解放感など)
構図は、色や画風よりも前に存在する“基礎骨格”です。

● 三分割構図(Rule of Thirds):画面を縦横3分割し、交点に主役を置く。自然でバランスが良く、最も使われる。
● 中央構図(Center Composition):主役を中央に置く。強さ・静けさ・象徴性が出る。
● 対角線構図(Diagonal Composition):画面を斜めに走るラインを意識。動き・緊張感・ドラマ性が生まれる。
● 余白構図(Negative Space):主役を小さく、余白を大きく取る。孤独・静寂・広がりを表現しやすい。
● シンメトリー構図(Symmetry):左右対称。秩序・美しさ・安定感。

わかったようなわからないような。
画像認識に難アリな柳のオツムには、実は一番キビシイ領域ではありますまいか。こういう項目を自在に使えるようになれば、もっと自分の思い通りの画を描いてもらえるんでしょうけどね。
ここは勉強が必要です。

光(Lighting)

コパイ先生にこれだけストックがあったら暫く遊べそうだ、というくらい例を出して貰いました。実は読んでるだけでも結構楽しかったりします。

AIに対する指定項目としても面白いですが、小説そのものを書くときの言葉のヒントになりそうでとても興味深いですね。

1. 時間帯による光

  • Soft Morning Light(柔らかい朝の光)
  • Golden Hour Light(黄金色の夕暮れ光)
  • Blue Hour Light(日の出前・日没後の青い光)
  • Midday Harsh Light(真昼の強い直射光)
  • Twilight Light(薄明かり)
  • Moonlight(月光)

2. 方向による光

  • Front Lighting(順光)
  • Backlighting(逆光)
  • Side Lighting(サイド光)
  • Top Lighting(トップライト)
  • Under Lighting(アンダーライト)

3. 質感・性質による光

  • Soft Light(柔らかい光)
  • Hard Light(硬い光)
  • Diffuse Light(拡散光)
  • Ambient Light(環境光)
  • Volumetric Light(光の筋が見える光)
  • Rim Light(縁取り光)
  • Glow Light(発光・滲む光)

4. 天候・環境による光

  • Misty Light(霧の中の光)
  • Foggy Light(濃霧の光)
  • Overcast Light(曇天の光)
  • Storm Light(嵐前のドラマチックな光)
  • Sunbeam / God Rays(雲間から差す光)

5. 人工光(Artificial Light)

  • Neon Light(ネオン光)
  • LED Light
  • Spotlight
  • Studio Softbox Light
  • Candlelight(ろうそくの光)
  • Lantern Light(ランタンの光)

6. 演出・映画的な光

  • Cinematic Lighting(映画調の光)
  • Low-Key Lighting(暗部重視の光)
  • High-Key Lighting(明るく均一な光)
  • Dramatic Lighting(強い陰影)
  • Noir Lighting(フィルムノワール風)
  • Backlit Silhouette(逆光シルエット)

色(Color)

画像指定でよく使われる色の種類(体系分類)これも読んでて楽しい。情景描写に使えそうな言葉もあって素敵です。

1. 基本色(Primary / Basic Colors)

  • Red(赤)
  • Blue(青)
  • Yellow(黄)
  • Green(緑)
  • Orange(橙)
  • Purple(紫)
  • Pink(ピンク)
  • Brown(茶)
  • Black(黒)
  • White(白)
  • Gray(灰)

2. 色調(Tone / Shade / Tint)

  • Pastel Colors(パステル)
  • Muted Colors(くすみカラー)
  • Vivid Colors(鮮やか)
  • Deep / Dark Tones(深い色)
  • Light / Pale Tones(淡い色)
  • Monochrome(単色)
  • Duotone(2色構成)

3. 温度感(Color Temperature)

  • Warm Colors(暖色:赤・橙・黄)
  • Cool Colors(寒色:青・緑・紫)
  • Neutral Colors(中間色)

4. 雰囲気・世界観を表す色指定

  • Monochrome Blue(モノクロームブルー)
  • Sepia Tone(セピア)
  • Vintage Faded Colors(退色したヴィンテージカラー)
  • Cinematic Teal & Orange(映画的ティール&オレンジ)
  • Dreamy Soft Colors(夢のような柔らかい色)
  • Noir Black & White(ノワール調モノクロ)
  • Neon Colors(ネオンカラー)
  • Icy Blue Palette(氷のような青)
  • Earthy Colors(アースカラー)
  • Pastel Rainbow(パステルレインボー)

5. 自然現象に基づく色

  • Sunset Colors(夕焼け色:赤・橙・紫)
  • Dawn Colors(夜明けの淡い青・ピンク)
  • Ocean Blue Palette(海の青)
  • Forest Green Palette(森の緑)
  • Mist Gray Palette(霧の灰色)
  • Moonlight Blue(月光の青)

6. 質感と結びついた色

  • Metallic Colors(金属色:Gold, Silver, Bronze)
  • Pearlescent Colors(真珠のような光沢)
  • Matte Colors(マットな色)
  • Glossy Colors(光沢のある色)
  • Translucent Colors(半透明の色)

上記サンプルでも使ったMonochrome Blueなんて全きフィーリングで選んで放り込んだのですが、なかなかどうしてとっても詩的な色合い。


質感・ディテール(Texture)

質感・ディテールの主なカテゴリ一覧

1. マテリアル(素材)系

物体そのものの素材感を指定するカテゴリ。

  • 金属(polished metal, brushed steel, chrome)
  • 木材(oak, walnut, driftwood)
  • 石・鉱物(marble, granite, obsidian, quartz)
  • 布(silk, linen, velvet, wool)
  • 皮革(leather, suede)
  • ガラス(frosted glass, stained glass)
  • プラスチック(matte plastic, glossy plastic)
  • 紙(washi, textured paper, cardboard)
  • 液体(水滴、油膜、インク、樹脂)

2. 表面質感(テクスチャ)系

素材とは別に、表面の細かい質感を指定するカテゴリ。

  • マット(matte)
  • グロス(glossy)
  • 半光沢(semi-gloss)
  • 粗面(rough, gritty)
  • 滑面(smooth)
  • 粒状(grainy)
  • ざらつき(sandy)
  • ひび割れ(cracked)
  • しっとり(moist, dewy)
  • ふわふわ(fluffy)
  • もこもこ(puffy)

 3. ディテール密度・描写レベル

画像生成で最も効果が大きいカテゴリ。

  • 超高精細(ultra-detailed, hyper-detailed)
  • 微細描写(intricate details)
  • 写実的(photorealistic)
  • ミクロ描写(micro-detail, macro photography)
  • 繊細な線(fine linework)
  • 荒い線(rough sketch)
  • デフォルメ(stylized, simplified)

4. 光・反射・空気感

質感と密接に関わるカテゴリ。

  • ソフトライト(soft lighting)
  • ハードライト(hard lighting)
  • 逆光(backlight)
  • 反射(specular highlights)
  • 拡散光(diffused light)
  • 体積光(volumetric light)
  • 霞(haze)
  • 湿度感(humidity, moist air)
  • 空気遠近(aerial perspective)

5. 仕上げ・加工表現

アート寄りの質感カテゴリ。

  • ブラシストローク(brush strokes)
  • インクブリード(ink bleed)
  • 版画調(woodblock texture)
  • 粗い塗り(impasto)
  • 水彩の滲み(watercolor bleed)
  • フィルム粒子(film grain)
  • ノイズ(digital noise)
  • ボケ(bokeh)

6. 生物的質感

キャラクターや生物に使う質感。

  • 皮膚(smooth skin, textured skin)
  • 鱗(scales)
  • 羽毛(feathers)
  • 毛並み(fur texture)
  • 甲殻(chitin)
  • 粘膜(slimy, glossy membrane)

7. 建築・人工物の質感

  • コンクリート(raw concrete, polished concrete)
  • レンガ(brick texture)
  • タイル(ceramic tile)
  • 金属パネル(metal plating)
  • 塗装(weathered paint, peeling paint)
  • サビ(rusted metal)
  • 摩耗(worn edges)

質感の指定にこれだけ語彙ボキャブラリがあるということに、新鮮な感動を受けました。いずれじっくり遊んでみましょう。

ムード / 感情トーン(Mood)

1. 明るい・ポジティブ系

軽やかで前向きな印象を与えるトーン。

  • cheerful(陽気)
  • joyful(喜び)
  • hopeful(希望)
  • uplifting(高揚感)
  • peaceful(穏やか)
  • serene(静穏)
  • playful(遊び心)
  • dreamy(夢見心地)

2. 暗い・ネガティブ系

重さや緊張感を伴うムード。

  • melancholic(物悲しい)
  • somber(沈鬱)
  • lonely(孤独)
  • tense(緊張)
  • dramatic(劇的)
  • sorrowful(悲哀)
  • eerie(不気味)
  • desolate(荒涼)

3. 情熱・強い感情系

エネルギーや激しさを表すトーン。

  • passionate(情熱的)
  • intense(強烈)
  • energetic(エネルギッシュ)
  • fierce(激しい)
  • bold(大胆)
  • chaotic(混沌)
  • ecstatic(恍惚)

4. 静けさ・内省系

落ち着きや深い思索を感じさせるムード。

  • contemplative(内省的)
  • meditative(瞑想的)
  • tranquil(静謐)
  • nostalgic(ノスタルジック)
  • wistful(切ない)
  • gentle(やわらかい)

5. ファンタジー・非現実系

世界観の空気を決めるトーン。

  • magical(魔法的)
  • mysterious(神秘的)
  • surreal(超現実)
  • ethereal(浮遊感・幽玄)
  • whimsical(奇想天外)
  • enchanted(魅了された)

6. 都市・ドラマ系

シネマティックな雰囲気を作るトーン。

  • cinematic(映画的)
  • noir(ノワール)
  • gritty(荒々しい)
  • urban melancholy(都市の哀愁)
  • dystopian(ディストピア)
  • futuristic(未来的)

7. 自然・環境ムード

自然の空気感を強調するトーン。

  • refreshing(清涼)
  • earthy(大地の温かみ)
  • misty(霧がかった)
  • warm sunlight(暖かな日差し)
  • cold and crisp(冷たく澄んだ)
  • stormy(嵐の気配)

雰囲気を伝える言葉もこれだけあると、結構いろいろな場面に応用できそうです。


追加描写

メインの被写体や構図を補強し、世界観・物語性・リアリティを高めるための追加情報

• 主題をより明確にする
• 雰囲気やストーリーを補強する
• 質感・光・背景を豊かにする
• モデルの解釈の幅を狭め、狙い通りの画像に近づける


1. 背景・環境の追加描写

被写体の周囲にある世界を補足する情報。

例:「少女」→「少女が霧の森の中で立っている」


2. 小物・アクセサリーの追加描写

被写体に物語性や生活感を与える。

例:「猫」→「猫が古い本の上で丸くなっている」


3. 動き・アクションの追加描写

静止画でも“動き”を感じさせる。

例:「人物」→「風に髪が揺れる人物」


4. 光・空気の追加描写

ムードを強化する空気感の補足。

例:「街並み」→「ネオンの反射が濡れた路面に広がる街並み」


5. 質感・ディテールの追加描写

主題の細部を強調する。

「ドレス」→「繊細な刺繍が施されたドレス」


6. 感情・雰囲気の追加描写

ムードを補強する感情的な要素。

例:「風景」→「どこか懐かしさを感じる夕暮れの風景」


除外したいもの(negative prompt)

これはどけてくれ、という指定。もしくは不要な要素, 避けたい質感, 避けたい構図を指定する。

1. 不要な物体・要素の除外
2. スタイル・質感の除外
3. 構図・カメラの除外
4. キャラクターの除外
5. アートスタイルの除外
6. 品質に関する除外

インターフェース

最初のHTMLからインターフェイスとして修正を入れたのが、選択項目。
上記のようなキーワードを全部手打ちで打ち込むのは難儀ですから、ポチっと選択出来るとうれしい。
当初見た目すっきりプルダウンを考えましたが、ラジオボタンないしチェックボックス形式が良さそう、ということで仕様変更しました。項目が縦一列にずらっと並んでしまっても、CSSで調整すれば良いのです。
ここらへんはサイト作成で培ったノウハウがありますのでそれほど怖くない。正直JavaScriptはまだ怖いのですが、コパイ先生に貰ったコードを切り貼りすればまあ、なんとかなります。

今後はすべて日本語で選択して、英語でプロンプトを吐かせるという仕様にできるといいなと考えています。

現状と課題について

そんなわけでできあがったのがこちら。まだまだ暫定です。

今回のアイキャッチはこれで作りました。
「TOP SECRET」より、シェインに自分の正体を説明するジェスターのカット…のつもり。

画像
微妙に透けてるジェスター(笑)
Copilot 画像作成プロンプトと言いながら
Geminiで出力させたのはご愛嬌

「私は〝ジェスター〟だよ、アストレイ。あなたも認めたのでは?」
「俺だって自分の技術にそれなりの自負はあるが、所詮プログラミングに関しては言ってみればアマチュアだ。自惚れるつもりはない。(中略)
 …もう一度訊くぞ、『お前は誰だ』」
「困ったね」
 ホログラムが再び動き出す。耳やヒゲを動かす、いかにも猫くさい動作をして見せた後、テーブルの上にどっかりと寝そべって顔を洗い始めた。
「そろそろ言われる頃じゃないかとは思っていたよ」

参考までに、プロンプトはこちら

以下の条件で画像を1枚 生成してください。
画像サイズ: (比率: 16:9)
キャラクター: ブリティッシュブルーのショートヘア猫、実はAIの投射映像
種族: 猫
外見: ブリティッシュブルー、ショートヘア、スレンダー
ポーズ: パソコンのまえ、キーボードに前脚を乗せている
シーン: 猫の姿をしたAIが自分の正体について説明する
場所: ムデハル様式のリビングルーム
時間帯: 夜
背景要素: 応接セット、窓の外は夜、暗闇に噴水
ビジュアルスタイル: ファンタジー調
画風: フォトリアル
構図: 背景を強調する構図
光: 月明かり、ディスプレイの放つ光
色: ダークトーン
質感・ディテール: 毛並みの細かさ
ムード / 感情トーン: 静かで落ち着いた
以上を踏まえて、最適なビジュアルを作成してください。

実は…コパイロット用プロンプトジェネレーターと言いながらGeminiで出力したのは、同じプロンプトをコパイ先生で出力させるといくつもいくつも画像を生成しようとして途中でハングアップするという事象があったからです。仕方なく、一枚目を出力し終えたらハングアップする前にすかさずダウンロードするという荒技で成果物を保存していました。Gemini君なら普通に出力してくれるのですが。
このため、プロンプトに「画像を1枚」などという但し書きを付加していたのです。この問題もまだ完全には解決していないので調整課題。

ちなみに、同じプロンプトでコパイ先生が吐いたのはこちら。柳としましては、slenderをちゃんと認識してくれたのは良いとしても…軍配はGemini君に上がりました。ゴメンよコパイ先生。

今後の課題

項目を増やすと起きるのが…当然と言えば当然ですがコードが長くなる問題。これに関してはCSSとJavaScriptを切り分けるともっとすっきりする筈。そんなわけで切り分けたのがこちら。見た目は殆ど変わってない筈ですが、HTML本体はかなり軽くなってます。

もうひとつは、コパイ先生おすすめの「JSON辞書化」。
JSON(JavaScript Object Notation) は、データを“構造化して表現するためのフォーマット” のことだそうな。

• 人間が読んでも分かりやすい
• コンピュータが扱いやすい
• Web・アプリ・AI・API など、あらゆる場面で使われる
• 軽量でシンプル
• 階層構造を自然に表現できる

という特徴があり、辞書化してUIに紐づけると圧倒的に扱いやすくなる…というのがコパイ先生の弁。
要は、今ずらずらとHTML上に書き並べている選択肢を別ファイル(.json)にまとめることができるということのようです。
これも出来ると面白そう。

 …と思って、休日ほぼ一日潰してコパイ先生と呻吟してみました。結果は…

もういい。手入力する

いいたかないですが、面倒くさい。ざっと言えば辞書ファイル(.json)をJavaScriptでHTMLと接続する訳ですが、変数の大文字と小文字が違ってもオコられ、ファイル名が違うとオコられ、挙句特定不明なエラーが頻発。…プログラムやるなら当然っちゃ当然なのですが、どうにも全く本筋と関係ないところで時間を食いすぎた気がして意気阻喪してしまったのでした。
柳が途中で思いついて仕様変更したりするから余計にいかんのだ、という事実も厳然として存在するんですけどね。

今回は…画像指定のための語彙をたっぷり収集できたのが収穫ということにしておきましょう。

  1. 大規模言語モデル / Large Language Model…膨大なテキストデータを学習することで、人間のように自然な文章を理解・生成できるAIシステム、だそうな。実は結構black box…つまり実はどういう処理でそういう答えが出るのかわかってないというお話もあり。面白いというか怖いというか。
  2. 大規模言語モデル / Large Language Model…膨大なテキストデータを学習することで、人間のように自然な文章を理解・生成できるAIシステム、だそうな。実は結構black box…つまり実はどういう処理でそういう答えが出るのかわかってないというお話もあり。面白いというか怖いというか。

コメント