こんにちは！システム開発部のデザイナー、moco（@moco_megane）です。
今日は、当プロダクトブログ運用の裏側で抱えていた課題を解決するために、Figma Makeを活用して「ブログサムネ生成ツール」をつくった取り組みについて紹介します🧑🍳
実際に使ったプロンプトも公開しているので、参考になれば嬉しいです。
制作の背景／ブログ運用で直面していた課題
SEN PRODUCT BLOGは、エンジニアやPdM、デザイナーなど幅広いメンバーが記事を書いています。執筆者が多様だからこそ、社外にも社内に知見が広がりやすいのですが、一方で課題がありました。
それはサムネイル制作です。
Figmaのフルシート（編集権限）を持つのは主にデザイナーだけ
記事を書いた本人が直接編集できず、デザイナーに依頼が必要
もしくは個人でコピーを作って編集 → エクスポートという二度手間が発生
デザイナー以外だと文字組みがうまくできず、クオリティが担保されない
ブログの更新頻度はとても高く、どんどん記事を書いてほしいのに、公開直前のサムネ作成がボトルネックとなっていました。
「サムネができるまで公開できない」という状況が続くのは、せっかくのアウトプットの勢いを削いでしまう……。この課題をどうにかしたいと思ったのが、今回の取り組みの出発点です。
Figma Makeでの挑戦／サムネイルを自動生成する仕組み
そんなときに目にしたのが、株式会社スタメンのみぴさんが公開していたnote記事でした。
個人的にスタメン社のデザイナーさんとは仲良くさせていただいており、組織レベルでの発信のクオリティが素晴らしいな……と尊敬しています！大いに参考にさせていただきました！
「Figma Makeで直接つくる」のではなく、 「作る仕組みをつくる」という発想に触れ、まさに目から鱗が落ちました。
「これならうちの課題解決にも応用できそう！」と思い立ち、早速手を動かしてみました。
試行錯誤のプロセス
今回の取り組みでは「Figma Makeの得意・不得意を知る実験も兼ねたい」という思いから、あえて緻密な設計をせずに進めてみました。
結果的には、このように段階的な進め方になっていたようです。
フェーズ1：プロンプトをざっくり書いて、まずは動かしてみる
背景画像は年間通して12ヶ月分のものがすでに用意されているので、それをまず１種類読み込ませます。
これが一番最初のアウトプットです。ここから、最終的な理想形を頭に浮かべながら、まずはサムネ自体のデザインをブラッシュアップしていきます。
- 書体・ウェイト・カラーの指示：
- 「書体はZen Maru Gothicのboldにして。カラーは白か黒を選べるように」
- タイトル位置の指示：
- 「タイトルの位置を変更したい。上から100pxのあたりをデフォルトにして、Y軸の位置をユーザーが任意で移動できるようにして」
- 12ヶ月分の背景画像を渡す：
- 「12ヶ月分の背景があります。背景画像として選択できるようにして。すでにアップしてあるハロウィンは10月、今アップするものは1月です」
フェーズ2：生成ツール自体のUIをブラッシュアップする
プレビューで見るサムネの仕上がりはおおむねOK。 次は生成ツール自体のUIを使いやすくしていきます。
- サムネ選択をするUIの変更：
- 「背景画像はセレクトボックスではなくサムネを見て選択できるUIに変更して。横に4カラム並ぶくらい縮小して」
- 生成ツール自体のレイアウト変更：
- 「プレビューを右にレイアウトして、操作できるUIは左側にレイアウトして。プレビューを見ながら操作ができるように」
- 文字色選択のユーザビリティ向上：
- 「7月と9月はタイトルの色が白、それ以外は黒をデフォルトとしたいです。推奨であることがわかるようなUIにして」
フェーズ3：プレビューと書き出しで状態が違う問題を解消
- プレビューと画像とをとにかく近づけたい：
- 「タイトルとロゴが動的に出力されているので、実際にダウンロードした時の見た目と一致していないようです。画像としてプレビューを表示することはできる？」
- 起きている状況を伝えるために画像で説明
- 「（画像を添付して）だいぶ小さく見えます。プレビューと全く同じになるように調整して」
フェーズ4：公開リンクとFigma Make内の表示がずれることに気づき、何度もテスト
- 何と指示したらいいのかわからないので困りごとを伝える：
- 「公開リンクをブラウザで開くと、やはりプレビューと画像とがずれてしまいます」
- 位置の微調整：
- 「タイトルと著者名の間の余白が、画像だと狭くなっています。プレビューに近づけて」
フェーズ5：実際に使う際の状況をイメージしてユーザビリティを向上
- ブログ自体の投稿ガイドラインと画像の元データのリンクを追加：
- 「タイトルの下に以下の二つを加えて ①背景画像の元データ（Figma）←これに以下のリンクを貼るhttps://hoge ②プロダクトブログ投稿ガイドライン（Backlog）←これに以下のリンクを貼る https://fuga」
- ブラウザで実際に使ってみて困ったことを修正：
- 「操作メニューを2つのタブに分けたいです。現在のレイアウトだと、操作項目が画面の下に行きすぎて、プレビューと同時に閲覧しにくいからです。」
- ダウンロード前のチェック項目を設置：
- 「『タイトルが適切に改行できているか』『タイトルがイラストやロゴに重なっていないか』をチェックしないとダウンロードに進めないようにして。非デザイナーにもクオリティの基準を示したい」
こうした小さな改善を積み重ね、ようやく「実務で安心して使える」レベルの生成ツールに到達しました。
最終的に約70回の試行錯誤となりました。 最初からバチっと要件を定義したらもっと早いはずですが、今回は実験も兼ねていたので致し方なしの回数だと思っています！
また、不思議なことにCursorやClaude Codeと比べて「自分の手を動かしてデザインしている感」がありました。後輩デザイナーの横についてアドバイスをしているような感覚です。
プロンプトを書く上で気を付けていたのは以下です。
- 冗長になりすぎないよう簡潔にまとめる
- 目的も添えて伝える
- Figma Make上の「ポイントして編集」機能や画像の添付機能を使い、指示する箇所を誤解されないようにする
改めて考えると、これって人間に対して何かお願いする時にも必要な観点ですよね。
プロンプトを操ってうまく成果物を出せる人は、人に何かを頼んだり指示したりするのがすごく上手いんだろうな〜と思いました。
実際に使ってもらった効果
出来上がったジェネレーターを社内に公開してみると、早速ユーザーが！
エンジニアやPdMから「困っていた点が解消された」「今書いた記事で早速使ってみました！」と好評をもらえました。
まだまだ検証回数が少ないので、これから不具合が出る可能性もあります。そこはFigma Makeならではの「作って壊す」のやりやすさが効いてくるはずです。
これからの展望
私たち開発組織やプロダクトデザイナーの本来の役割は、ユーザーに価値を届けること。 そこにしっかりと時間を割くためには、日常業務の効率化は避けて通れません。
例えば今回のサムネイル制作のように、「毎回手間をかけなくてもいいこと」を自動化することで、開発部全体の生産性が上がるだけでなく、デザイナー自身も「もっとユーザーに価値を届ける仕事」に集中できます。
今回のサムネ生成ツールはその一例にすぎませんが、「仕組みをデザインする」という視点を持つだけで、社内の小さな課題が解決されることを実感しました。
生成AIをはじめとする新しいツールは、毎日のように登場しアップデートを繰り返しています。 「これも使える？」「仕組み化できるかな？」と試しながら、自分たちなりの運用方法に落とし込んでいきたいと思います。
この記事を読んで、千のプロダクトデザインや開発に興味を持っていただけた方はぜひお気軽にカジュアル面談いたしましょう！
お待ちしてます👋
