弊社のROXX Tech Blogのカバー画像ジェネレーターをFigma Makeでつくりました。
いきなり結論ですが、社内向け画像ジェネレーター類はFigma Makeを使うことで驚くほど低コストで実現でき、シンプルに喜ばれて運用に乗りやすいものなのでFigma Makeのとっかかりとしておすすめです（アウトプットのレイアウト制御などあるため制作はデザイナー向き）。
成果物はこちらです👇
https://sample-grtbc.figma.site/ （本記事向けに複製したサンプル版です）
自由に試してもらって大丈夫ですが、会社のロゴが含まれるためインターネット上へのアップロードや、少しでも悪意を持った利用はご遠慮ください。何卒お願いします🙏
例えば本稿用にはこんなカバー画像を出力しました。
なんで作ったのか
せっかくテックブログを社内のみんなが書いてくれているのに、カバー画像が無いケースが多くてもったいないなと思ってました。
Techブログ用にFigmaでテンプレは用意してて、「作るんでいつでも依頼してねー」と言ってもコミュニケーションコストや、デザイナーに対する申し訳ない的な気持ちでなかなか運用が回らなかったのが実情です。
なのでジェネレーターがあれば解決できるかな？と急に思い立ってメイクしました。
Figma Makeってそもそも何？（2025年12月現在の解説）
一言で言うと、「テキストやデザインから、機能するWebアプリ（Reactコード）を生成・実行できるAI開発環境」です。
従来の「CSS書き出し」や「静的なモック」とは異なり、ロジックを含む動的なアプリケーションを構築します。
-
出力コード: React + TypeScript。
-
AIモデル: バックエンドにはClaude 3.7 Sonnet等を採用（高精度なコード生成）。
-
npm対応: 外部ライブラリ（npm packages）をインポートして利用可能。
-
データ連携: Supabaseとの連携により、バックエンド（DB/Auth）を含むアプリ構築が可能。
-
デザインシステム連携: 自社のUIライブラリやDesign Systemを認識させ、それに準拠したコードを生成可能。
-
Preview & Edit: 生成されたアプリがその場で動作。
-
「Code View」タブで、生成されたReactコードを直接確認・編集可能。
-
AIチャットで修正指示（例：「APIのエラーハンドリングを追加して」）も可能。
-
-
Deploy: Webアプリとしてそのまま公開、またはコードをエクスポートして自社リポジトリへ。
どうやって作ったのか
正直、前提知識ゼロの状態で触り始めても、このくらいシンプルなアプリなら作れます。思い立ってからリリースまで60分。Figma Make、おすすめです。
1. 始め方
Figmaのプロジェクト内にMakeというファイルがあるので、新規作成して始めます。
2. まず要件を整理
大枠の要件を整理していきます。この段階では「まだ実装始めないで」と「アセットは後で送る」って宣言するのがポイント。この段階で相談ベースで一緒に要件を考えてもらうのもありです。
3. アセットを提供する
今回の場合は以下のアセットを提供しながら進めました。
-
レイアウト見本
-
出力時に使用するテンプレ素材（ロゴなどが含まれるもの）
-
グラデーションの値
4. 実装をどんどんやってくれるので、修正指示や追加要件を投げる
根気強くやってください。最終的に公開した際のバージョンは44でした。
5. 公開する
右上にある公開ボタンから。公開後（多分公開前にはできなそう）にドメインを任意の文字列にしたり、細かく設定できます。
つまったポイント
順調な開発など存在しません。プレビューとダウンロードする画像にズレがずっとあって、解消するのにちょっと時間がかかりました。
やらなかったこと
執筆者のプロフィール情報を追加できる機能も検討しましたが、今回はテックブログにおける優先度として「誰が書いたか」よりも「何を書いたか」「いつ書いたか」が重要であると考え、機能としては落としました。
こだわりポイント
時間をかけないでサクッと作る中でも、使う人（主にエンジニア）がテンション上がるように細かいアイデアを盛り込みました。
1. UIはクールに
Tech Blog用途なのでちょっとターミナル感のあるようなギークなトーンのUIでまとめました。アプリの名前もGeminiと相談して「generate_roxx_tech_blog_cover()」に。体験としてはなるべくシンプルに、破綻しにくいけど自由さがあるバランスで調整しました。
2. 出力画像のスタイルはDay/Nightの2つのトーンを用意
ROXXではメインのコーポレートロゴにDay/Nightバージョンが存在するため、そこを踏襲しています。
3. 保存はPNG/WebP形式から選択
WebPはとにかく軽いので普及させたいという思いから。選んでダウンロードみたいな一手間を削りたいため、各動線は独立させて並列で置きました。
4. 簡易アナリティクス機能搭載
一個くらい無駄なもの付けたくて、タイトル入力に応じて簡易評価してくれる機能をつけました。タイトルの長さやキーワードからスコアを算出しています。
本記事の内容は以上です。お読みいただいてありがとうございました！
