aptpod Advent Calendar 2025 – 12 月 4 日の記事です。
この記事は、コーポレートマーケティング室デザイナーの tetsu が担当しています。
当チームでは、製品・案件向けアプリケーションの UI デザインをはじめ、マーケティングクリエイティブ、WEB サイトや当テックブログのデザイン・運用などを担当しています。
テック業界の師走といえばアドベントカレンダー。アプトポッドのテックブログでも毎年多くの記事が公開されます*1が、その運用の中で地味に負荷が大きかったのが OGP（サムネイル画像）の作成 でした。
これまでは、デザイナーが毎回書き出し・設置を行っており、急ぎの差し替えや連携の手間が小さなストレスとして積み重なっていました。
そこで今年は Figma の新機能「Figma Make」 を活用し、OGP 作成から進捗管理までを自動化・アプリ化しました。この記事では、その構築プロセスを紹介します。*2 www.figma.com
これまでの OGP 制作フロー
通常時のテックブログでは、記事内容に合わせて毎回サムネイルを手作業で制作しています。 コンテキストに合わせたイメージを作るため、記事を読む時間と画作りで1記事に1〜2時間までの工数を目標に制作しています。
しかしアドベントカレンダー期間中は、
- 毎日更新（時間制約）
- 全体の統一感（デザイン要件）
という理由から、昨年までテンプレートを使用していました。
テンプレートの活用をした場合でも、執筆者とのやりとりや設置確認などで15分程度はかかります。
15分×20記事で300分程度は工数をかけていたことになります。
また、工数以上に急ぎの差し込み対応である場合が多く、常に他のタスクの手をとめる必要がありました。
上記の課題を解決するために、今年はさらに一歩進め、テンプレートから“アプリ化”へと発展させた形です。
作成ステップ
1. Figma Make の設定
Figma Make の設定から 「実験モデル > Gemini 3 Pro」 を有効化します。
これにより、プロトタイプ上で高度な AI モデルを利用できるようになります。
2. デザインと基本機能の実装
ベースデザインの作成
まず、アドベントカレンダー向けにクリスマスらしいベースデザインをラフで作ります。 この段階で 編集可能エリア（タイトル・著者名） をあらかじめ定義しておきます。
画像生成機能の実装
プロンプトで以下を指定します：
- サイズは 1200 × 630px（OGP 標準）
- プレビュー内容を JPG としてダウンロード可能 にする
- 日替わり感を出すため、アイコンや小物を可変にする
テキスト配置の調整
テキストの級数やフォントは UI から調整できますが、 位置・マージン調整は精度を高めるため数値指定 が必要でした。
Figma Make と数度やりとりし、うまくいかない箇所はコードを確認しながら値を指定しました。
3. 管理アプリとしての UI 拡張
ここまでは「デザインチームが書き出し、Figma に一覧化」という想定でした。しかしアドベントカレンダー期間中は、執筆者の編集待ちや掲載タイミングの調整が発生し、お互いに小さな負荷が生まれがちです。
そこで、執筆者自身が “自分の担当日を選び、その場で OGP を生成できる” 管理 UI を追加しました。
- 担当日を選択して OGP を作成
- 入力完了ステータスを一覧で可視化
画像を生成する側のUIにも、管理UIとの導線や、現在編集している日付をわかりやすくするために右側に日付バーなどを追加しました。
これにより、執筆者は進捗を自分で管理でき、デザイナー側も状況を一目で把握できるようになりました。
4. Supabase 連携によるステータス管理
プロトタイプ段階ではステータスがブラウザローカルに保存されるだけで、実運用には不十分でした。
そこで、オープンソースの BaaS （Backend as a Service）である Supabase を採用し、進捗ステータスをクラウドで管理できるようにしました。
Figma Make は API 連携まわりの操作性が良く、デザイン畑の人間でもほぼノーコードで扱える点が特に便利でした。
5. 書き出し画質の最適化
最終的にデザインの細部を調整し、出力処理を整えます。
普段はデザイナーが毎回 JPG 圧縮の度合いを調整していますが、今回は 設置作業を執筆者に委ねるため、品質設定をシステム側で固定しています。
- 書き出し時に自動で Quality 0.8 の JPG に変換
- 画質とファイルサイズのバランスを安定化
これにより、誰が生成しても品質が揃い、運用負荷を最小化できます。
まとめ
今回の取り組みによって、師走の忙しい時期に細切れで発生していたデザイナーのタスクが大幅に軽減されました。執筆者も、自分のタイミングで OGP を生成・設置でき、全体の流れがスムーズになりました。
「運用フロー自体をデザインする」ことで、チーム全体のコンテキストスイッチを減らせたことが最大の成果だと感じています。
Figma Make のようなツールを活用すれば、デザイナーでもアプリライクな課題解決を手軽に実装できます。ぜひ試してみてください。
