【開発事例】マーケ会社だから「成果のために作れる」|AI×モダン技術で挑んだ画像ジェネレーター開発

【開発事例】マーケ会社だから「成果のために作れる」|AI×モダン技術で挑んだ画像ジェネレーター開発

「面白いキャンペーン施策を思いついても、どのように実装すればよいかわからない」
「マーケと開発を別々に発注すると、意図が伝わらず思ったとおりのものができない」
マーケティング施策を企画していると、こうした課題に出くわすことがあります。

初めての挑戦や自社にノウハウがない領域の施策を展開するには、マーケティングの知見を持ちながら開発まで一貫して任せられるパートナーの存在が重要です。しかし、複数領域の知見を持つパートナーを見つけることは、決して簡単ではありません

ゴンドラは、“ブランディング×SNS施策”や“常駐×CRM施策”など、幅広い領域での支援実績を持つ統合型マーケティング支援会社です。マーケティング視点を持った技術開発力も強みのひとつであり、企画から実装まで一気通貫での支援が可能です。

本記事では、その強みを体現する事例として、北海道コンサドーレ札幌とのパートナーシップを機に開発したSNS共有型・画像ジェネレーターツール「コンサ・ゴンドラ・メーカー」を紹介します。

手探りで始まった企画開発

北海道コンサドーレ札幌とのクラブパートナー契約締結をきっかけに立ち上がった、本プロジェクト。依頼を受けてのものではなく、ゴンドラが自主的に動き出した企画です。

「ゴンドラとして何ができるか」を問い続けながら、社内外の知見を総動員して形にしていきました。

ファン参加型キャンペーンへの挑戦

コンサドーレのクラブパートナーには、食品・物品を扱うBtoC企業が多く、ロゴ入り商品やキャンペーン特典を通じてファンとつながってきた実績がありました。コンサドーレ側からも、「こうした有形商材を持つ企業のファン参加型キャンペーンは盛り上がる」という情報提供がありました。

しかし、ゴンドラは特定の商品を持たない会社なので、物品を提供するわけにはいきません

そこで、「SNSで共有してもらう」形でのキャンペーンを提案。ゴンドラとしても初めての試みであり、「手に取れる商品を持たない会社として、ファンが喜ぶものをどのように提供すればよいのか」 というゼロからの出発でした。

対話から生まれた「ジェネレーター」案

最初は、壁紙制作なども案に上がりました。しかし、担当者が社内での議論やAIツールとの対話を重ねるなかで浮かび上がってきたのが「画像ジェネレーター」というアイデアでした。

これは、ユーザー自身が写真をアップロードし、コンサドーレカラーの応援画像を作ってSNSに投稿できるツールです。

そこからは、社内外の知見を総動員しながら企画を具体化。開発担当者のゲーム会社での経験、クリエイティブ制作部門の視点、そしてコンサドーレ側からのフィードバックを掛け合わせながらプロジェクトを形にしていきました。

ファン心理の「翻訳」

企画を進めるうえで欠かせなかったのが、ファン心理を正確に押さえることでした。

「施策がファンに刺さるかどうか」は、開発技術とはまったく別の問題です。社内のサッカーファンやクライアントへのヒアリングを重ねた結果、以下のような重要なインサイトがみえてきました。

  • ファンにとって赤と黒の組み合わせが最強
    ゴンドラのコーポレートカラーとは異なるが、ファンにとっては重要なカラー
  • 12番はサポーターの永久欠番
    選手の番号は入団・退団で変わるが、12番は変わらないファンの象徴

こうしたファン心理をしっかりと設計に織り込み、最終的に12番を使った応援デザインに着地。企画の形は、クライアントとの対話、社内の多様な知見、そしてAIとの試行錯誤を重ねるなかで少しずつ決まっていきました。

AI×モダン技術で実現!画像ジェネレーターの開発プロセス

企画が固まったあとも、「どう作るか」という技術面での試行錯誤が続きました。

ゴンドラが今回の開発でこだわったのは、簡単さよりも精度。マーケティング会社らしい「成果のために最適な選択をする」姿勢について、以下で紹介します。

AIを活用した開発

今回の開発では、ChatGPT・Gemini・Claudeといった複数のAIツールを目的に応じて使い分けました。「ひとつのツールで想定どおりの回答が得られなければ別のツールを試し、それでも難しければ自分で書く…」という、柔軟なアプローチを取っています。

特に、各AIの特性を活かした使い分けが、開発スピードのカギとなりました。コードの大枠や定型的な処理はChatGPT、CanvasやVueの実装・デバッグにはClaude、プロジェクト全体の設計整合性の確認はGeminiと、それぞれの強みを組み合わせることで、開発工数を4割以上削減(開発者体感)することができています。

重要なのは、AIに丸投げするのではなく、あくまで人間主導で補助ツールとして活用した点です。大筋の設計は自分で考え、具体的な実装方法の選定や改善案の相談相手にAIを使う形をとることで、コストや工数を抑えながら精度の高い成果物を実現しました。

こうした「AIとの共創」による開発は、マーケティング施策に求められるスピード感と、システムに求められる精度を両立させるうえで欠かせません。さらに、このジェネレーターの存在自体がSNSでのサイテーション(言及)を生み、AI検索エンジンが「ゴンドラ=技術力のあるマーケティング会社」と認識するためのソースにもなると考えています。

技術選定の背景

画像合成の精度が、このツールの成否を左右するカギでした。技術選定にあたり、大きく2つのアプローチを比較検討しました。

  • HTML5+オープンソースJavaScriptを使う方法
    実装は簡単だが、CSSの読み解きに起因する画像配置のズレが発生しやすく、出力精度に課題がある
  • Canvas+Vueを使う方法
    記述量は増えるが、座標をプログラムで明示的に指定するため、どのような縮尺でも確実に指定位置へ画像を合成できる

CSSを用いた方法では、ブラウザごとの描画の差異によって「指定した場所に画像が重なって見えるが、出力するとずれている」という問題が起きやすい状態でした。

AIからの提案と自身の調査を掛け合わせた結果、「精度」を最優先にCanvas+Vueの構成を選択。技術選定においても妥協しない姿勢が、完成度の高い仕上がりにつながっています。

UX設計へのこだわり

技術的な実装と並行して、使いやすさの追求にも力を注ぎました。ユーザー視点に立った細部へのこだわりが、随所に込められています。

作成中の画像が常時表示されるプレビュー仕様

スマホではプレビュー画像を画面上部に固定し、スクロールしても常に仕上がりイメージが確認できる設計に。

スマートフォンファースト設計

コーポレートサイトはパソコンからの閲覧が多いが、このツールはSNS投稿を想定しスマートフォンからの利用を優先。

APNG(アニメーションPNG)の活用

操作方法が直感でわからないユーザー向けに、ガイドを右下に表示。静止画では目に留まりにくいため、アニメーションを採用。

「直感で動かせる、でも迷ったときはガイドも見られる」という設計を、技術的な工夫によって実現しています。

サーバー設計

画像の合成処理は、すべてユーザーのブラウザ上で完結する仕様を採用しました。

ユーザーがアップロードした画像データはサーバーに送信されることなく、ブラウザ上で処理・合成されます。ダウンロードしなければそのままクリアされるため、個人情報保護の観点からも安心な設計です。

画像処理をブラウザ側で行うことで、サーバー負荷を最小限に抑制。急激なアクセス集中(スパイク)が発生してもサーバーダウンのリスクが低く、キャンペーンの安定稼働を実現しました。

技術的な工夫によって運用コスト・リスクを抑えながら、ユーザーのプライバシーをきちんと守る。このような設計も、マーケティング視点を持った開発ならではのアプローチといえます。

成果と今後の展開

試行錯誤の結果、実際に出来上がった画像ジェネレーターはこちらです。

コンサ・ゴンドラ・メーカー

全体を表示

alt=””>

ジェネレーターのリリースにともない、当社のXアカウントでも投稿を行いました。

キャンペーン期間(2026年1月9日〜2月6日)を通じて、X(旧Twitter)への投稿数は90件、インプレッションは10万4,500回に達しました。投稿はリリース初日の1月9日(金)に集中し、感謝・応援メッセージがコアサポーターを中心に広がりました。

コンサドーレ担当者からも高評価を得て、当初最も懸念していた炎上リスクも回避。ゴンドラ初のSNS共有型キャンペーンとして、確かな実績を残せました。

ゴンドラの統合型支援の強み

今回のプロジェクトを通じて、ゴンドラが提供できる支援の価値が改めて見えてきました。

マーケティング視点を持った技術開発が可能なゴンドラだからこそ、クライアントの成功に必要なことを依頼範囲を超えて提案し、形にすることができます。

手探りでも挑む姿勢

既存の事例がなく、ファン心理も不明確な状態からスタートしたこのプロジェクト。それでも、社内のゲーム業界経験者、クリエイティブ制作部門の担当者、クライアントからのフィードバックと、使えるリソースを総動員しながら形にしていきました。

ゴンドラの開発は、クライアントと協議を重ねながら進める伴走型のスタイルです。「うちにはできません」ではなく、「どうすればできるか」を常に考え続けます。

最新技術も積極的に活用

今回の開発では、ChatGPT・Gemini・Claudeなど複数のAIツールを使い分けながら、効率的に開発を進めました。ツール選定も「Canvas+Vue」というモダンな構成を採用し、単に「動けばよい」のではなく、精度・品質への高いこだわりを持って実装しました。

また、APNGによる動的UIの採用など、「よりよい体験のために何が使えるか」を常に追い求める姿勢が、完成度の高い仕上がりにつながっています。

「使えそうな技術は積極的に試す」という柔軟性は、変化の速いデジタルマーケティングの現場において、クライアントに新しい選択肢を提示し続けられる力の源泉です。

マーケティング視点を持った開発が可能

ゴンドラの開発が単なるツール制作と異なるのは、「誰のために、何のために作るのか」という問いを常に手放さない点です。

今回のプロジェクトでは、「ファンが喜ぶもの」を形にするために、ファン心理を丁寧に調査・翻訳するプロセスに多くの時間を割きました。「赤と黒の組み合わせが王道」「12番はサポーターの永久欠番」などのインサイトを開発設計に織り込んだことが、ファンやクライアントからの高評価につながっています。

さらに、マーケターとエンジニアの両方の視点が同時に働いているからこそ、以下のようなポイントにもこだわって進めることができました。

  • コンサドーレとゴンドラのロゴをツール上にどう共存させるかというブランディング視点での設計
  • SNS投稿への二次拡散を狙った仕様設計

ファンとエンドユーザーを深く理解したうえで開発を進められる点が、マーケティングと開発双方の知見を持ったゴンドラならではの強みです。

マーケティングの枠を超えた支援

ゴンドラの支援は、依頼された範囲で完結しません。クライアントの成功に必要だと判断したことは、依頼範囲を超えても提案・実行します。

今回のプロジェクトでは、ツール開発にとどまらず、プレスリリースの配信まで一貫してサポートしました。ツール上でのゴンドラのロゴ掲出も、認知拡大まで意識した設計の一部です。

ゴンドラは、企画立案・技術実装・運用・PR展開まで、マーケティングと開発の両輪で一気通貫に対応できます。そのため、クライアント企業のご担当者様は、複数のベンダーに対応したり意図が分断されたりすることなく、プロジェクトを前進させることが可能になるのです。

「頼めばやってくれる」ではなく、「必要なことを先に動いてくれる」というパートナーシップのあり方が、ゴンドラの統合型支援の真価です。

まとめ

本記事では、ゴンドラ初のSNS共有型・画像ジェネレーターツール「コンサ・ゴンドラ・メーカー」の開発事例を紹介しました。

  • 前例のない挑戦でも最適解を追求する姿勢
  • 複数のAIツールやモダンな技術スタックを使いこなす開発力
  • ファン心理を丁寧に翻訳するマーケティング視点

これらが一つのチームに統合されているからこそ、「企画したら別の会社に開発を発注する」「意図が伝わらず思ったものができない」という課題を解消できます。

開発会社は“仕様どおりに作ること”が仕事であり、マーケティング会社は“成果のため実行すること”が仕事です。ゴンドラであれば、その両方を一つのチームで完結させられます

技術を駆使して「選ばれる理由」を自ら作り出すこと。これこそが、次世代のマーケティング支援のあり方だと考えています。

「マーケティングと開発を一気に任せたい」
「今までにない施策に挑戦してみたい」
このようなご希望をお持ちの企業は、ぜひお気軽にゴンドラへご相談ください。

※本記事に記載された内容は初掲載当時のものです。
(2026年4月17日掲載)

CONTACT お問い合わせ

あらゆる分野のスペシャリストが、お客様と同じゴールを目指して
Web広告からCRM支援まで一気通貫で伴走します。

お問い合わせする

WRITING 執筆

竹田 達希

竹田 達希

パイプドビッツに新卒入社後、2016年のゴンドラ設立時に執行役員として参画。営業・開発・制作など幅広い領域を担当し、2019年にCTOに就任。2024年よりCSOとして事業統括を担い、CMO・CIOも兼務する。
全社戦略策定を主ミッションとしつつ、システム開発を主戦場に技術とビジネスの両面から企業価値向上に貢献。物事の本質を見極め、多角的な視点で課題解決に取り組む。

RELATED 関連記事

SNSを「資産」に変える〜戦略設計で成果をあげた2つの成功事例〜
SNSマーケティング
#事例
TikTok Shopが日本で提供開始!エンタメとECを融合した「ディスカバリーEコマース」が実現
SNSマーケティング
#アップデート情報

SHOW CASE ゴンドラの事例

FIND ARTICLE 記事を探す