結論
結論ファーストで述べますと、タイトルとは真逆でより「デザイナー」の方々のありがたみをひしひしと感じる取り組みを経験しました。
AIを良いハブとして活用し非デザイナーとデザイナー担当者の協業をより効率的にできる仕組みをWebアプリ生成でどんどん活かして行くべきだと感じており、バイブコーディングが流行り物やできたらすごいモノではなく、できるのならやらないと時間・労力がもったいないものと改めて感じております。
はじめに
はじめにの前に結論から述べてしまいましたが、makeshop事業部apps推進チームの荒井と申します。
当社GMOメイクショップのテックブログであり、基本的にはエンジニアの方々の技術知見を公開しているブログですが、 今回は非エンジニアの私が、GMOグループにいる全てのパートナーに求められる「バイブコーディング」「AIオーケストレーション」の取り組みを行いましたので、その内容についてご紹介したいと思います。
その前に私の担当領域である makeshop apps ストアとは、ECサイトを自由に拡張できるアプリプラットフォームであり、 ショップのみなさまが、それぞれのサービスが持つECサイトを進化させ新たな可能性を拡げるソリューションと出会っていただく場となっています。
そのストアにて、AIを活用したコンテンツ制作を非エンジニアでも効率的かつある程度のクオリティのアウトプットができる仕組み作りの実験を行った記録をお伝えします。
バイブコーディングで作成したアプリ「通称：Vibe Draw」
まず、バナー制作を効率化する「Vibe Draw」という名前をつけたWebアプリをバイブコーディングでデザイナーの方に作っていただきました。 このアプリの特徴は、デザイナーが設計したイラストの型に対して、非デザイナーが自然言語でリクエストするだけで適切なイラスト素材を生成できる点にあります。
【実際の成果物】
このアプリを簡単に説明しますと、
例えば「デザイナーとマーケターの協業」と入力し、色味を指定した上で画像を生成とクリックすると以下のような画像が自動生成されます。
【運用の仕組み】
デザインチームにて、Figma上にバナーのベーステンプレートを作成いただきました。 色彩、フォント、レイアウト等の明確なルールを設定し、まずはデザイナーの方にサンプルを作っていただきます。 その後、非デザイナー（私）は、「デザイナーとマーケターの協業」といった自然言語での指示だけで、バナー用のイラストを生成することができ、このテンプレートに沿ってバナークリエイティブの完成形を作るのみです 。 これにより、コンテンツ制作側は特別なデザインスキルや専門知識がなくても、一定品質以上のクリエイティブを短時間で作成できる環境が整いました。
作成したきっかけ
この取り組みの背景には、BtoBアプリストア運営において日常的に直面していた、以下のような課題がありました。
【品質とスピードのジレンマ】
マーケティング施策やコンテンツ制作において、バナーやクリエイティブ素材は欠かせません。しかし、非デザイナーが作成すると、どうしてもブランドの世界観にブレが生じてしまいます。一方で、全てをデザイナーに依頼すると、他の重要業務との優先度調整が発生し、スピード感が失われがちでした。（特にそこまで重要でない作業をわざわざ依頼するのって気が引けますよね…）
【リソース配分の課題】
デザインマネージャーをはじめとするデザインチームには、より戦略的で創造性を要求される業務が山積みです。 単発のバナー制作といった比較的定型的な作業に時間を割くのは、組織全体のリソース効率を考えると最適とは言えないと正直感じてしまいます。
【品質管理の難しさ】
「今回は急ぎなので自分で作らせてください」という場面が重なると、気づけばブランドイメージがバラバラになってしまうリスクもありました。 これらの課題を解決するため、makeshopのクリエイティブを統括するデザインマネージャーと共同で、「デザイナーの専門性を活かしつつ、非デザイナーでも一定品質の制作物を効率的に作れる仕組み」の実験に取り組みました。
このWebアプリ＆仕組み化実験の成果
バナー画像のBefore／After です。
挿絵はAIで作成、あとは雰囲気に合わせて作っていたBeforeも悪くはないと仰っていただきましたが、ブランドの統一感を出せると良いよねということでAfterのご提案をいただきました。とにかくAIでやってみよう！という心意気は良かったのかもしれませんが、あるべき方向を示してもらって取り組めるのはコンテンツディレクション側としても非常に安心します。
コンテンツ制作楽しい
Vibe Drawの開発・運用を通じて、コンテンツ制作プロセス全体の効率化を実現でき「あれ、自分コンテンツ制作できているじゃん…」と突然の自己効力感が生まれました。以下は具体的な活用事例です。
【インタビューコンテンツ制作をバイブコーディングでデザイナーとアウトプット 】
BtoBアプリストアのコンテンツマーケティングの一環として、開発パートナーインタビューページの制作にもバイブコーディングを活用しました。
- フォーム設計: AIを活用してインタビューの質問項目を作成。GAS（Google Apps Script）用のスクリプトも同時に生成してもらい、わずか10分で質問フォームが完成
- コンテンツ制作: インタビューイーからフォームで回答いただいた内容を、Claude を通じて自然な会話調のストーリーに変換（しかも先方も2日で返してくれたのでスピード感◎）
- デザイン・レイアウト: 参考サイトの画像をアップロードし、その見た目をトレース。文章の流し込みや必要な画像URLの指定も全て自然言語で実現
ノーコーディングでWebページのラフ案ができ、そこから自然言語の指示で体裁等を調整します。 その結果、以下のようなインタビューページを生成することができました。
▼ このページは公開しているので、ぜひご覧ください。
【制作時間の大幅短縮】
従来であれば、デザイナーとの調整、インタビュー企画の作成、インタビュー実施のスケジューリングから、アウトプットをする際にも複数回の修正等で2週間以上、もしくは1コンテンツの企画からアップまで1ヶ月とか掛かりそうな作業が、トータル10時間そこそこ程度、かつ、ほぼ1人の作業に短縮されたと思います。しかも、この間に他の業務も並行して進めていたため、実質的な工数削減効果は更に大きなものでした。
【デザイナーの10分レビュー】
バイブコーディングで生成されたコードは、時折HTMLコードがうまく本番に反映されず、惜しいデザインが生成されることもありました。
そのような場合には、SlackでHTMLファイルを共有し、デザイナーに時間があるときに10分程度確認をいただきました。
具体的な指示をいただき、すぐに修正完了。まるでペアバイブコーディング？のような感覚で、短時間で的確なサポートを受けることができました。 この軽やかな協業スタイルも、AIツールを活用した新しい効率化業務ではと感じます。
この取り組みの所感
アウトプットしたいことや、システムに必要な要素さえイメージできれば、非エンジニア・非デザイナーの私でも簡単にバナークリエイティブやWebページ、あるいは業務用のWebアプリを作れるようにAIのお陰でなっています。 これらの取り組みを経て、いままでの「作業」となる時間と労力の大幅な短縮と専門者しかできなかったことが、そうでない人もできることを実感しました。
以前はHTML、CSS、cakePHP、SQLなどを必要にかられて独学で少しかじっては業務で使ってきましたが、素人レベル程度の習得であり、常に『ちょっと分かるだけ』の域を出ませんでした。
しかし、過去の学習で培った知識が土台に一応あるおかげで、コードは書けなくてもシステムの仕組みは想像できる自分にとって、Gemini Canvasのようなツールと、相手の時間を奪いすぎない程度の協力依頼をするだけで、アウトプットの幅が大きく広がります。 今後もこのようなAIを活用した取り組みを、社内外に発信できるよう私自身も興味を持って進めて参ります。
