Cursorで画像生成を効率化できちゃった
はじめに
こんにちは。株式会社フォノグラムでWebマーケティングを担当している「おきょう」こと森山です。
今回は、Cursorを使って画像生成を効率化した方法をご紹介します。
背景
画像生成AIは色々ありますが、日本語テキストと組み合わせると途端に怪しくなりがちですよね。
「なんかフォントが変だな...」「これは日本語なのか？」「文字が歪んでる...」という経験ありませんか？
gpt-image-1がその辺かなり強いらしいのですが、生成するのに毎回お金がかかるし、微調整が効かないのが悩みでした。
（もちろん私のプロンプトがいまいちなのもあります😅）
そこでふと思いついたのがCursorでできないかというアイデア。
エンジニアじゃなくても使えるCursorの可能性を探ってみました。
結論からいうと
先にHTMLを作ってjpgやpngに書き出せばいくらでも画像が作れちゃうんです！
しかも、自分のローカルにあるフォントやGoogleフォントを使えるので、日本語の表示も美しく仕上がります。
実際にやったこと
1. テンプレートになる画像を渡して、HTMLにしてもらう
まず、理想とする画像のサンプルをCursorに見せて、それをHTML+CSSで再現してもらいます。
今回はいつも使っているトコトンブログのアイキャッチ画像を再現してもらいました。
参考にしたアイキャッチ画像
この画像はこちらの記事で使っています。
「この画像のようなデザインをHTML+CSSで作成してください。背景画像は変更可能なように、
テキストも編集できるような形式にしてください。」
実際には何度かラリーをしていい感じにしてもらいました。
縦横のサイズが決まっている場合、そのサイズで作ってもらうのがポイントです。
出来上がったHTML
さすがですね。再現度高いです。
2. jpgにしてもらう
作成されたHTMLをブラウザで開き、画像化します。
といってもCursorに指示するだけ。
「このHTMLをjpg画像で書き出してください。」
Cursorが、以下の作業をやってくれました。
Puppeteerというブラウザ自動化ツールをインストール
HTMLをブラウザで開いてスクリーンショットを撮影するスクリプトを作成
スクリプトを実行して画像を生成
3. テンプレート化して今後の作業を効率化
生成されたHTMLとCSSをテンプレートにして、今後作るためのプロンプトを作成しました。
生成されたプロンプト
以下の仕様でテキストと画像を組み合わせたJPG画像を作成してください：
- サイズ: 1200px × 630px
- 背景画像: [画像ファイル名].jpg/png
- 背景オーバーレイ: 黒色、不透明度53%
- テキスト: [表示したいテキスト]
- フォント: 源ノ角ゴシック JP
- フォントサイズ: 65px
- フォント色: 白
4. テンプレート化された画像作成
実際のこのプロンプトで作ってもらった画像です。
簡易的に作ってもらいましたが、例えば画像と顔が被らない位置にテキストを移動してもらうとかまだ改善できそうですね。
強み
1. フォントの自由度が高い
- 自分のローカルに入っているフォントが使える
- Googleフォントも簡単に組み込める
- 日本語フォントもきれいに表示できる
2. 微調整がしやすい
- フォントの変更が簡単
- フォントサイズの調整も数値を変えるだけ
- 写真のサイズや位置も自由自在
- 色や透明度も細かく設定可能
3. デザインの改善もプロンプトでできる
「このHTMLのデザインを改善してください。タイトルをより目立たせて、
背景のオーバーレイを少し明るくしてください。」
使い道
- ブログのアイキャッチ画像
- SNS投稿用の画像
- 広告バナー
- プレゼン資料のヘッダー
-
メルマガのヘッダー画像
同じようなテンプレートで定期的に作っていくのに向いていると思います。
苦手なこと
いわゆるアイデアの壁打ち的な、新規性の高いデザインを作ってもらうのは生成AI単体の方が向いていそうです。
あと、写真から作ってもらうならターミナルから実行するAIでできるのかもしれないけど今はそこまではやってない状態です。
まとめ
Cursorを使えば、エンジニアじゃなくてもHTMLとCSSを活用して、美しい画像を効率的に生成できます。
特に日本語テキストを含む画像を作る場合、従来の画像生成AIよりも高品質な結果が得られるのが大きなメリットです。
同じような課題をお持ちの方の参考になれば嬉しいです。
2025.10.25追記
この方法を使って、図鑑を作りました！
おわりに
この方法は、デザインスキルがなくても、コーディングスキルがなくても、Cursorの力を借りれば誰でも実践できます。
ぜひ試してみてください！✨
修正指示をスムーズにする校正ツール「AUN（aun.tools）」を広島を拠点に開発・運営している、株式会社フォノグラムのテックブログです。 エンジニア熱烈❤️🔥募集中です！
Discussion