[{"data":1,"prerenderedAt":22},["ShallowReactive",2],{"$fIRSH0yopTn4PA9e3ZI1Vz6wnNwYZ70pv8TT3JnGjkE4":3},{"id":4,"createdAt":5,"updatedAt":6,"publishedAt":6,"revisedAt":6,"title":7,"content":8,"eyecatch":9,"category":13,"meta":18},"generated-thumb-ai","2026-03-06T00:05:28.534Z","2026-03-06T00:13:57.524Z","生成AI(Gemini)でサムネイルのトンマナ調整はできるか","\u003Cp>ここ最近、生成AIで色々とやることが増えてきました。\u003C/p>\u003Cp>アイデア出しにクリエイティブの制作やコーディング、まだそのまま右から左に流し込んで使えるようなところまでは行っていないんですが、それでもかなり作業効率は良くなっています。\u003C/p>\u003Cp>私が投稿している記事のサムネイルも生成AIで作っているんですが、前提情報なしだとどうしてもAIっぽいサムネイルが出来上がってしまいます。\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/c29791d0949647aeb8ace8649461ea24/f32a521fbc8344faa48cf431a531203d/seoimage.png\" alt=\"\" width=\"1000\" height=\"558\">\u003C/figure>\u003Cp>こんなやつですね。\u003C/p>\u003Cp>今回はこのAI生成っぽいサムネイルをどこまで自分のwebサイトのトンマナに寄せられるかGeminiで検証してみました。\u003C/p>\u003Ch2 id=\"hc41f310a1f\">サムネイル生成の検証\u003C/h2>\u003Cp>Midjourneyの--srefコード（ \u003Ca href=\"https://sref-midjourney.com/ja\">https://sref-midjourney.com/ja\u003C/a> ）を使えば手間が省ける部分もあるかもですが、あまり色んな生成AIツール使うの好きじゃないので今回もGemini proでやります　笑\u003C/p>\u003Cp>検証は以下の３点で行います。\u003C/p>\u003Cp>1.普通に一文で生成してみる\u003C/p>\u003Cp>2.明確な指示をして生成してみる\u003C/p>\u003Cp>3.あらかじめサイトのソース( \u003Ca href=\"https://www.dig-it-design.com\">https://www.dig-it-design.com\u003C/a> )を提供して生成してみる\u003C/p>\u003Cp>さあ、どんな結果になるのでしょうか。\u003C/p>\u003Cp>楽しみになってきましたね。\u003C/p>\u003Ch3 id=\"he183e2f6ac\">普通に一文で生成してみる\u003C/h3>\u003Cp>まずはワンショット。一文と条件を簡単につけて生成を依頼してみます。\u003C/p>\u003Cpre>\u003Ccode>以下を記事のタイトルとして、その雰囲気を表すサムネイルを作成してください。\n- 生成AIでサムネイルのトンマナ調整はできるか\u003C/code>\u003C/pre>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/c29791d0949647aeb8ace8649461ea24/35f936269174482e89bcdb1513c94d7f/screen1.png\" alt=\"\" width=\"1000\" height=\"337\">\u003C/figure>\u003Cp>生成結果　↓\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/c29791d0949647aeb8ace8649461ea24/12ff6e0d4dbf4208b9149a96dfa93232/onshot_generate.png\" alt=\"\" width=\"1000\" height=\"558\">\u003C/figure>\u003Cp>うん。AIっぽい。\u003C/p>\u003Cp>でもこんなのがものの数秒で出来上がっちゃうんだからとんでもないですね。\u003C/p>\u003Ch3 id=\"h6108fa2b6e\">明確な指示をして生成してみる\u003C/h3>\u003Cp>次はフューショット。\u003C/p>\u003Cp>ソースは渡しませんが、自身のwebサイト( \u003Ca href=\"https://www.dig-it-design.com\">https://www.dig-it-design.com\u003C/a> )に則ったカラーなどを伝えます。\u003C/p>\u003Cpre>\u003Ccode>以下を記事のタイトルとして、その雰囲気を表すサムネイルを作成してください。\n- 生成AIでサムネイルのトンマナ調整はできるかデザインの条件は下記です。\n- 写真的なイメージは不要\n- シンプルでミニマルアイコンを用いた雰囲気\n- 余白を多く用いて、すっきりした印象\n- 実際にwebサイトで使っているカラー定義（下記）を参考に配色お願いします$color-black: #000;$color-secondBlack: #282828;$color-dark-gray: #333;$color-gray: #707070;$color-light-gray: #ccc;$color-yellow: #eeae1aff;$color-white: #fff;\u003C/code>\u003C/pre>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/c29791d0949647aeb8ace8649461ea24/0f2c530efbe04ca1adc749d92f0a2f9b/screen2.png\" alt=\"\" width=\"1000\" height=\"707\">\u003C/figure>\u003Cp>若干見切れてますがご勘弁を。 ↑\u003C/p>\u003Cp>生成結果　↓\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/c29791d0949647aeb8ace8649461ea24/8ed86d83c7194e71b91bd6e53494d5ca/fewshot_generate.png\" alt=\"\" width=\"1000\" height=\"558\">\u003C/figure>\u003Cp>先ほどのワンショットよりは、だいぶ雰囲気に近づいたような気がしますね。\u003C/p>\u003Cp>しかし必ずと言ってもいいほど文字が入るのがAIっぽい。\u003C/p>\u003Ch3 id=\"h5606c84f7d\">あらかじめサイトのソースを提供して生成してみる\u003C/h3>\u003Cp>では最後に、自身のwebサイトのソース( \u003Ca href=\"https://www.dig-it-design.com\">https://www.dig-it-design.com\u003C/a> )を渡して生成を依頼してみましょう。\u003C/p>\u003Cpre>\u003Ccode>以下を記事のタイトルとして、その雰囲気を表すサムネイルを作成してください。\n- 生成AIでサムネイルのトンマナ調整はできるかデザインの雰囲気は https://www.dig-it-design.com のイメージに合わせてください。\u003C/code>\u003C/pre>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/c29791d0949647aeb8ace8649461ea24/3aabadaac47140148d380c5ff12f15c1/screen3.png\" alt=\"\" width=\"1000\" height=\"323\">\u003C/figure>\u003Cp>生成結果　↓\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/c29791d0949647aeb8ace8649461ea24/99d677cf37df446484d1e2a664e7e9b7/source_generate.png\" alt=\"\" width=\"1000\" height=\"545\">\u003C/figure>\u003Cp>なんなんこれ。\u003C/p>\u003Cp>もはやサムネイルではなく、webサイトのスクショのような画像が出来あがってしまいました。\u003C/p>\u003Cp>実はGeminiは、\u003Cstrong>ソースから構造(文章やhtml構造など)を取得することはできても、視覚的に情報を得ることが難しいAI\u003C/strong>です。\u003C/p>\u003Cp>ここの雰囲気で画像を作成して欲しい。と言っても、このような見当違いの画像が出てきてしまうことがほとんどで、情報を読み取ることができても、雰囲気を反映することができないんですね。\u003C/p>\u003Ch2 id=\"ha214098e44\">まとめ\u003C/h2>\u003Cp>さて、ざっくりとですが、３つの方法を検証した結果、「明確な指示をして生成してみる」が一番雰囲気に近いサムネイルを生成できましたね。\u003C/p>\u003Cp>Geminiではこのように文書化が精密であればあるほど、期待する結果を得やすくなります。\u003C/p>\u003Cp>うまく利用して、作業の効率化を図りたいものですね。\u003C/p>\u003Cp>（他の画像生成得意な生成AI使えよって話もあるんですがそれは置いておきましょう。）\u003C/p>\u003Cp>ではでは。\u003C/p>\u003Cp>\u003C/p>",{"url":10,"height":11,"width":12},"https://images.microcms-assets.io/assets/c29791d0949647aeb8ace8649461ea24/8ed86d83c7194e71b91bd6e53494d5ca/fewshot_generate.png",558,1000,{"id":14,"createdAt":15,"updatedAt":16,"publishedAt":15,"revisedAt":15,"name":17},"tech-topics","2026-01-31T05:00:43.404Z","2026-01-31T05:02:14.964Z","技術についてのひとりごと",{"fieldId":19,"description":20,"imageogp":21},"meta","生成AIで作るサムネイル、どうしても「AIっぽさ」が出ちゃいませんか？Geminiを使って、自分のサイトのトンマナにどこまで寄せられるか検証してみました！URL読み込みより確実だった「意外な指示方法」とは？効率アップに繋がる画像生成の実践的レビューです。",{"url":10,"height":11,"width":12},1783582447830]