こんにちは。サービスデザイン部の片山と山口です。
私たちは、ブラウザプラットフォーム「ゲソてん」を運営しています。
ゲソてんは、自社のプラットフォームだけではなく、OEM展開も行っています。

これまで、バナー制作をより効率的かつスムーズに行うために、Figmaを活用した「バナーテンプレート」の構築に取り組んできました。

本記事では、完成までの奮闘や獲得したノウハウを大公開します！
日々の業務で「大量のバナー制作・運用に追われている」「もっと効率的な仕組みが欲しい」と感じている方にとって、少しでもヒントになれば幸いです。

バナーテンプレートとは

私たちが「バナーテンプレート」の制作に取り組み始めた背景には、次のような事情がありました。
ゲソてんでは、複数の連携先にOEM展開を行っており、連携先ごとに複数サイズのバナーを用意する必要があります。

• 各ゲームごとにテンプレートを作成し、1タイトルあたり100枚以上のバナーを制作

• インセンティブ金額や日付がOEM先ごとに異なる

• OEM先のサービス・ゲームごとのレギュレーションを遵守する必要がある

• それらを毎月コンスタントに作り続ける

このように、膨大かつ複雑な制作要件があるため、Illustratorで管理していた頃はファイルが重くなり、動作に支障をきたすこともありました。

そこで私たちは、制作フローを根本的に見直し、Figmaでのテンプレート化に踏み切りました。
Figma化によって実現したのは次のポイントです。

• サイズの軽量化でスムーズに編集できる

• インセンティブ内容や日付の一元管理が可能

• 非デザイナーでも作成できる仕組みを整備

これにより、デザイナーだけでなくチーム全体で効率的にバナーを運用できるようになりました。

運用を続けて見えてきた課題

Figma化によって当初の課題はおおむね解決され、非デザイナーでもバナー制作が可能になりました。
作業時間も従来の半分以下に削減され、大きな効果が得られました。
しかし、運用を続ける中で新たに次のような課題が見えてきました。

• メモリ使用量が限界に達し、一部のメンバーは復旧モードでしかファイルを開けない

• OEM先ごとのレギュレーションが細分化され、調整に時間がかかる

• デザイン変更が難しいため、デザインの変更量が乏しく、CTRが減少する懸念がある

• Figmaのバグにより、軽微なレイアウト崩れが発生することがある

これらを解決するため、2回目のアップデートでは
メモリ使用量の削減、デザインパターンの拡充、Figmaバグへの対処
を主な目的としてリニューアルに取り組みました。

FigmaBuzzとの比較と検討結果

課題の洗い出しを進める中で、他ツールで代替できないかも検討しました。
その一環として、Figmaの手軽にアセットの制作が行えるツール「FigmaBuzz」も実際に触ってみました。

結果として、FigmaBuzzは非常に便利なツールではあるものの、私たちの求める運用スケールや構造管理まではカバーしきれないことが分かりました。

FigmaBuzzは、いわば「1枚のテンプレートをもとに、テキストや画像を差し替えて量産するツール」です。
しかし、私たちが目指す「複数レイアウトを同時に管理し、大量のバナーをコンポーネント制御で一括更新」といった運用までは対応していませんでした。

FigmaBuzzは、1つのテンプレート構造をもとに同型のバリエーションを生成する前提のため、複数サイズ・複数構成を1つのFigmaファイル内で運用するケースには向きません。
また、コンポーネントの一括置換や、Selection Variantsのプラグイン機能も利用できないため、キャラクターやロゴなどをまとめて更新する運用は難しいという結果になりました。

一方で、編集権限を制限できる機能など、非デザイナー向けの安全設計には優れており、今後の改善の参考になる要素も多くありました。

この検証を通して、「自チームの運用に最適化した仕組みを自作することが最短ルート」という結論に至り、今回のリニューアルにつながりました。

リニューアル内容

ここからは、実際にどのようにバナーテンプレートをリニューアルしたのかをご紹介します。

全体設計の方向性

設計段階で目指したのは、非デザイナーでも迷わず・すばやく・きれいに作れるテンプレート。
そのために、次の4つを軸にリニューアル方針を立てました。

• メモリの削減

• 新しいゲーム・メディアへの横展開を簡単＆スピーディーに

• キャンペーン更新時に印象をガラッと変えられる柔軟な構成

• 非デザイナーでもデザイン変更まで完結できる仕組みづくり

これらを実現するため、テンプレートのUI構造や管理方法を全面的に見直しました。

デザインの変更点

見た目のデザインは下のように変わりました。

従来は、背景画像の上に赤枠のインセンティブエリアを重ねるレイアウトでしたが、新テンプレートでは左右のエリアを縦線ではっきりと分けたデザインに変更しました。

また、本テンプレートは16のOEM先のサービスのレギュレーションをすべて満たす必要があります。
そのため、下記のような文字量・縮小時の視認性に強い、柔軟な構成にしています。

• 可変な文字数に対応（コピーが長短どちらでもレイアウト破綻しない）

• 最小文字サイズを確保（縮小しても読める／最小行間・禁則処理を考慮）

• コンテナ幅が自動で調整される（テキストの増減に合わせてエリアが伸縮）

ここからは、構造や運用がどのように変わったのかを順にご紹介します。

テンプレート構造の整理と効率化

旧テンプレートでは、複数のコンポーネントをそれぞれ素材ライブラリから呼び出して組み合わせる形式でした。

そのため、新しいゲームのテンプレートを作る際は、

1. 既存ファイルを複製

2. 119枚のバナー内の複数コンポーネントを一括置換（Selection Variantsのプラグイン使用）

3. レイアウト崩れを1枚ずつ手作業で修正

という流れで、2人がかりで約2時間かかっていました。

新しいテンプレートでは、ゲームエリアとインセンティブエリアをそれぞれ独立して管理。

6つのゲームエリアコンポーネントを調整するだけで、119枚すべてのバナーに背景・キャラクター・ロゴの変更が自動で反映されます。
サイズ比率も保たれるため、デザイン崩れゼロで横展開が可能です。

結果、2人×2時間掛かっていた作業が1人×5分に短縮！劇的な効率化を実現しました。

さらに、ライブラリ構造も見直し、どこまでをマスターコンポーネントで管理し、どこからをローカルで編集できるかを明確化しました。

マスター側（ライブラリ）

• 色・柄などの差分パーツを集約

• 以前発生していた“コンポーネント崩れバグ”を、画像化・アウトライン化によって防止

ローカル側（各ゲームファイル）

• 日付・インセンティブ背景・配色などを自由に変更可能

• バリアント操作だけで印象を切り替えでき、非デザイナーでも安心して運用可能

加えて、各テンプレートには非デザイナー向け操作ガイドを添えており、Figmaに慣れていない方でも手順通りに操作するだけで更新が完了します。

背景は、デフォルトのグラデーションに加え、Adobe Fireflyで生成した差し替え用背景も複数追加し、キャンペーンや季節感に合わせたカスタマイズが簡単にできるようになりました。 もちろん、新しい素材の追加もすぐに行えます。

こうしてテンプレートの構造を根本から見直したことで、作業効率 × 表現の自由度 × 誰でも運用できる安心感の3つを両立する仕組みに生まれ変わりました。

得られた効果

上でも述べた通り、リニューアルによって大幅な時短が実現し、構造のアップデートにより非デザイナーのみでの調整も可能になりました。

これまで、ちょっとした文言変更や色差し替えにもスクラムでチケットを切ってもらっていましたが、今ではその場で即対応できるようになったのは大きな変化です。
無駄なコミュニケーションコストが減り、他の制作や新しい施策に時間を回せるようになったのも、チーム全体の成果だと感じています。

以前は、キャンペーン導線で使われているにも関わらず、同じバナーがずっと表示され続けて「更新感がない」「ユーザーが飽きてしまう」という課題がチーム・OEM先双方から上がっていました。

一方で、デザイナー側も大量のバナーを量産する単純作業に週何時間も取られており、ずっと悩ましい状態でした。

今回のリニューアルによって、これらの課題に対して大きく前進できたと感じています。
まだ改善の余地はありますが、日々の運用負荷がぐっと軽くなり、更新の選択肢が広がりました。

終わりに

いかがでしたでしょうか。

• すべてのOEM先のサービス・ゲームのレギュレーションをクリアできるデザイン構造

• マスター／ローカルコンポーネントの最適な使い分け

• 非デザイナーでも間違えにくい命名・設計

• 横展開してもデザイン崩れが起こらないファイルづくり

など、実際に運用するチーム全員が使いやすいテンプレートを目指して、たくさん試行錯誤しました。
これからは運用だけでなく、クリック数など成果面も見据えたよりコスパの良いバナー制作を模索し続けます。

皆さんのチームでも、大量のサイズ違いバナーを作ることはありますか？
もし同じような課題を感じていたら、ライブラリ・コンポーネント・プラグインをフル活用したテンプレート設計を、ぜひアイデアのひとつとして思い出してください！
少しの工夫で、きっと制作の自由度とスピードが変わるはずです。