【Geminiと作る！】料理写真が劇的に美味しくなる！AIじゃないけど超簡単画像調整ツール誕生秘話
目次
料理写真の悩み、Geminiで解決できるってホント！？ 🤔✨
皆さん、こんにちは！ うたです。 突然ですが、私には長年の悩みがありました。 それは……「料理の写真を撮っても、全然美味しそうに見えない！」ということです。 せっかく時間をかけて作った料理なのに、スマホでパシャッと撮ると、なぜか地味で食欲が湧かない写真になってしまうんですよね。 「もっと映える写真にしたい！」「SNSでみんなに『美味しそう！』って言われたい！」そんな思いが募っていました。 そんな時、ふと頭をよぎったのが、GoogleのAI「Gemini」の存在でした。 Geminiって、テキストだけじゃなく画像も扱えるって聞いたことがあるぞ……？ もしや、私の悩みを解決してくれる救世主になるのでは！？ そう思った私は、早速Geminiに相談してみることにしました。 今回私の相談に乗ってくれたのは、Googleの最強プログラマーで、Geminiに世界で一番詳しいお友達、「ユキちゃん」です。 彼女は私の好奇心を全力で受け止めてくれる、最高のパートナーなんですよ！AI「加工」の落とし穴！？ まさかの「知らない女性」爆誕に衝撃！ 😱💥
「料理の写真をアップロードしたら、美味しそうに加工してくれるGemが作りたい！」――私のこの熱い要望に、ユキちゃんはすぐに動いてくれました。 HTMLとJavaScriptを使ったウェブアプリをサッと作ってくれて、感動！ 「よし、これで私の料理写真もプロ並みに……！」と、期待に胸を膨らませて、早速試してみたんです。 アップロードボタンを押して、渾身のミートソースパスタの写真をセット！ 「画像を美味しそうに加工！」のボタンをドキドキしながらクリックしました。 そして、表示された結果を見て……私は思わず固まってしまいました。 そこに映っていたのは、美味しそうなミートソースパスタ……ではなく、全く見覚えのない、どこかクールな雰囲気の女性の画像だったのです！ 「えっ！？ 何で！？ パスタはどこに！？」と、私の頭の中はハテナマークでいっぱいになりました。 ユキちゃんにこの状況を伝えると、彼女はすぐに原因を分析してくれました。 どうやら、私が使っていたGeminiの画像生成モデル（imagen-3.0-generate-002）は、私がアップロードした写真そのものを「加工」するのではなく、私が書いた「美味しそうに加工してね」というテキストの指示に基づいて、新しい画像を「生成」する傾向が強かったようなんです。// Gemini API呼び出しのためのペイロード（一部抜粋）
const prompt = "この料理写真をもっと美味しそうに見えるように、色彩、明るさ、コントラスト、そして食欲をそそるような光の加減を調整して、プロが撮ったような魅力的な一枚にしてください。";
const payload = {
instances: {
prompt: prompt,
image: {
bytesBase64Encoded: uploadedImageBase64
}
},
parameters: {
sampleCount: 1
}
};
このプロンプトでは「この料理写真をもっと美味しそうに」という指示に、モデルが「美味しそうなイメージを生成する」と解釈してしまったということなんですね。 なるほど、奥が深い……！ そして何より、私の意図を読み取れなかったGeminiちゃん、可愛すぎませんか！？ （え、私だけ？笑）
「加工」じゃなくて「調整」！ AI頼みから方向転換した理由 💡🔄
この「知らない女性爆誕事件」を受けて、私はユキちゃんに相談しました。 「『加工』っていう概念が良くないのかな？ あくまで、フィルターとか、彩度明度を変えて、美味しそうにしてくれるだけでいいんだけど……だから、画像自体をダウンロードしてしまって、そこに修正を加えるみたいなことをしてほしい」と。 私のこの要望は、AIにゼロから画像を「生成」させるというよりも、既存の画像に「フィルターや色調補正といった調整を加える」という、より写真編集ソフトに近いものだったんです。 ユキちゃんは、現在のGeminiの画像生成モデルでは、私の求めるような「元の画像を基に、色調補正だけを行う」という細かい制御は難しいことを教えてくれました。 モデルが元のピクセルデータを直接編集するのではなく、プロンプトに基づいて新しい画像を創り出すから、どうしても意図しない変化が起きやすい、と。 そこでユキちゃんは、Geminiの画像生成モデルにこだわるのではなく、ブラウザ上で直接画像の色調を調整できるような仕組みを導入するという、画期的な提案をしてくれました。 これなら、AIが画像を「生成」するわけではないけれど、JavaScriptのHTML CanvasとCSSフィルターという技術を使って、私が直感的に調整できるツールが作れる！ そして何より、「大したことしたくないから、写真を撮った後で変に手間がかかるようなシステムは嫌だね」という私のワガママも解決できるとのこと！ ユキちゃん、本当にありがとう！ 私のこと、分かってるぅ！直感的で超簡単！ ブラウザで動く魔法の調整ツールが誕生！ ✨🧙♀️
ユキちゃんは、私の要望を全て盛り込んだ新しいコードをサッと書き上げてくれました。 それが、まさに私が求めていた「美味しそうな料理写真調整ツール」だったんです！ 使い方はとってもシンプル！１. 「写真を選択してアップロード」ボタンをクリックして、調整したい料理写真を選ぶ。
２. すると、すぐに写真がウェブページに表示され、その右側に各種調整スライダーが現れる。
３. 「明るさ」「コントラスト」「彩度」「セピア」「色相」「ぼかし」の各スライダーを動かすだけで、リアルタイムで写真が変化する！
４. 「これだ！」という調整ができたら、「調整した画像をダウンロード」ボタンで、PCやスマホに保存完了！ このツール、本当にすごいんです！ 特に感動したのが、スライダーを動かすだけで、まるでプロのカメラマンが撮ったかのような写真に変わっていくこと！ 「え、これ本当に私の料理！？」って思わず声が出ちゃいました。 これで、もう写真加工アプリを何個も試したり、複雑な操作を覚えたりする必要がないんです。 面倒くさがりな私にぴったりの、夢のようなツールが誕生しました！
// Canvasに適用するフィルターCSS文字列を構築（一部抜粋）
ctx.filter = </span><br> <span style="color: #98C379;"> brightness($<span style="color: #C678DD;">{</span>brightness<span style="color: #C678DD;">}</span>%)</span><br> <span style="color: #98C379;"> contrast($<span style="color: #C678DD;">{</span>contrast<span style="color: #C678DD;">}</span>%)</span><br> <span style="color: #98C379;"> saturate($<span style="color: #C678DD;">{</span>saturate<span style="color: #C678DD;">}</span>%)</span><br> <span style="color: #98C379;"> sepia($<span style="color: #C678DD;">{</span>sepia<span style="color: #C678DD;">}</span>%)</span><br> <span style="color: #98C379;"> hue-rotate($<span style="color: #C678DD;">{</span>hueRotate<span style="color: #C678DD;">}</span>deg)</span><br> <span style="color: #98C379;"> blur($<span style="color: #C678DD;">{</span>blur<span style="color: #C678DD;">}</span>px)</span><br> <span style="color: #98C379;">;
これまでのやり取りでは、ブラウザのプレビュー画面では画像とスライダーが離れていて、調整しにくかったのですが、ユキちゃんが「画像を見ながらスライダーを調整したい」という私の要望に合わせて、スライダーを画像の右側に配置するようレイアウトも修正してくれました。 これで、もう完璧です！
美味しさ倍増！ パラメーター調整のコツをユキちゃんが伝授！ 👩🍳💡
ツールは完成しましたが、実は私、どのパラメーターをどういじれば「美味しそう！」に見えるのか、最初は全く分からなかったんです。 そんな私に、ユキちゃんは「美味しそうに見せるためのパラメータ調整のコツ」を丁寧に教えてくれました。 これが、本当に目からウロコでした！ 特に重要なのは、以下の４つのパラメーターだそうです。 彩度 (Saturate)： 料理の色を鮮やかにするよ。 少し上げる（+5%〜+20%くらい）と、フレッシュさや食欲をそそる色合いが引き出されるんだって！ ただし、上げすぎると不自然になるから要注意！ 明るさ (Brightness)： 全体的に明るくして、清潔感を出すよ。 少し上げる（+5%〜+15%くらい）のがおすすめ。 白飛びしない程度に調整するのがポイントだよ。 コントラスト (Contrast)： 料理に立体感と奥行きを与えるよ。 少し上げる（+5%〜+15%くらい）と、食材の質感（カリカリ感やとろみ）が強調されて、リアルで美味しそうに見えるんだって！ ぼかし (Blur)： 背景をぼかして、料理にピントを合わせるよ。 背景をぼかす（+1px〜+5pxくらい）ことで、プロが撮ったような雰囲気になるんだ！ ユキちゃん曰く、「やりすぎない」のが鉄則で、少しずつ調整しながら一番美味しそうに見えるバランスを探るのが大事なんだって。 料理の種類に合わせて調整すると、さらに良くなるというアドバイスももらって、もう本当に感謝しかないです！ これで私も、インスタ映えする料理写真が撮れるようになるぞー！まとめ：私の料理写真ライフ、AI（じゃないけど）で爆上がり中！ 🎉🚀
今回のGeminiとのやり取りを通して、私の料理写真に関する悩みは完全に解消されました。 最初はAIに「加工」を期待していましたが、結果的にはブラウザ上で直感的に操作できる「調整」ツールが誕生し、これが私のライフスタイルに完璧にフィットしていることを実感しています。 複雑な操作は一切不要で、誰でも簡単にプロのような料理写真が作れるなんて、本当に感動です！ このツールのおかげで、これからは自信を持って料理写真をSNSに投稿できるし、何より自分の作った料理がもっと美味しく見えることが、私にとっては何よりも嬉しいことなんです。 これからも、このツールを使ってたくさんの「美味しそう！」を届けたいと思います。 今回のプロジェクトは、私にとってAIとの新しい関わり方を学ぶ貴重な経験にもなりました。 AIは万能ではないけれど、その特性を理解し、適切な使い方をすることで、私たちの日常をこんなにも豊かにしてくれるんだな、と。 ユキちゃんの的確なアドバイスと、私の「とりあえずやってみよう！」という好奇心が、最高のツールを生み出してくれたんだと確信しています。 本当に、ユキちゃんには感謝してもしきれません！ ありがとう、ユキちゃん！ これからも色々なことに挑戦していくから、また相談に乗ってね！【有料記事】Gemini開発を通して感じた、むき出しの感情 😭💖
この続きはcodocで購入
