AIによるクリエイティブ生成を行う上での試行錯誤

AIによるクリエイティブ生成を行う上での試行錯誤
プレイド naoyashiga
https://x.com/naoyashiga
https://github.com/naoyashiga

2026年9月15日開催
「非公式 Vue Fes Japan 2026 タイムテーブル解説会」登壇資料
https://andpad.connpass.com/event/398631/

Transcript

1. AIによるクリエイティブ⽣成を ⾏う上での試⾏錯誤 株式会社プレイド naoyashiga © PLAID, Inc. 2026.09.15 ｜ 非公式 Vue Fes Japan 2026タイムテーブル解説会
2. ⾃⼰紹介 naoyashiga • 株式会社プレイド • エンジニア • YouTube「直也テック」 Github : @naoyashiga X : @naoyashiga YouTube: @naoya-tech-sub © PLAID, Inc. | Confidential 2
3. 株式会社プレイドについて OUR MISSION データによって⼈の価値を最⼤化する © PLAID, Inc. | Confidential 3
4. KARTEについて WebやAppの訪問者の⾏動を 顧客ごとにリアルタイムに解析 CX(顧客体験)プラットフォーム ⼀⼈ひとりに合わせた 顧客体験を提供 © PLAID, Inc. 4
5. Stats of KARTE 解析MAU ※1 年間解析流通⾦額 ※2 12 億⼈超 2.59 兆円 秒間トラッキング数 ※3 解析速度 134,000 over 0.x 秒/解析 データ規模も爆発的に増加 ※1 2026年6⽉ / ウェブサイトやネットサービス、スマートフォンアプリなどで、ある1ヶ⽉の 間に1回でも利⽤や活動のあった利⽤者の数の合計 ※2 EC領域における解析流通⾦額。2022年3⽉〜2023年2⽉までの単年の実績 ※3 閲覧、クリック、購⼊などKARTEで計測しているユーザーの全イベントが 対象。ローンチ〜2023年3⽉までにおける最⼤値 © PLAID, Inc. 5
6. 本⽇のアジェンダ 1. フレックスエディタ 2. クリエイティブの評価 © PLAID, Inc. 6
7. フレックスエディタとは ノーコードで 接客を カスタマイズ コードやデザインの知識なしでアク ションのフルカスタマイズが可能で す。 直感的な操作と豊富なエレメントで、 新しいエディタ体験を提供します。 © PLAID, Inc. 7
8. エディタの使⽤技術 エディタ エディタのReact製。 エディタでSvelteで作られたコンポー ネントをGUIで編集しプレビューしてい る。 ASTをGUIで操作。 © PLAID, Inc.
9. JSの実⾏ 配信サイト SvelteコンポーネントをビルドしてJS を配信先サイトで実⾏。 配信先サイトではKARTEのJSが実⾏さ れビルド済みjsが実⾏される。 © PLAID, Inc.
10. AIがやること コンポーネント AI⽣成 GUIポチポチではなくAIでコンポーネン トを⽣成したい。 AIで⽣成したコンポーネントをGUIで調 整したい。 © PLAID, Inc.
11. 何を⽣成するのか Svelte⽣成 Svelteのコンポーネントを⽣成する © PLAID, Inc.
12. ⽣成してみた結果 ⽣成結果1 典型レイアウト（バナー、カード、リ スト、ハーフモーダル）などを定義。 典型レイアウトをベースに⽣成したが 予想以上にレイアウトのバリエーショ ンが広がらず同じようなデザインしか ⽣成されなかった。 © PLAID, Inc.
13. バリエーションを増やす ⽣成結果2 HTML,CSS⽣成 ↓ コンポーネント⽣成 の順にすることで表現⼒が⾼まる HTML Svelte © PLAID, Inc.
14. バリエーションを増やす 様々な レイアウトを ⽣成 カード、スライダー、notification、リ ストレイアウトの実現。 複合レイアウトも可能。スライダーの 中で2カラムレイアウト。 画⾯の状態を複数持って、ボタン遷移 もできる。 © PLAID, Inc.
15. クリエイティブの評価 © PLAID, Inc. | Confidential
16. 良いデザインなのか これらは 質の⾼い デザインなのか ‧ブランドデザインにあったカラー、 タイポグラフィーなのか ‧変なところで改⾏されていないか ‧⾔い回しが配信先サイトのサービ スっぽくない ‧配信先のサイトでデザインが浮いて しまう ‧⾒切れが発⽣ ‧閉じるボタンが機能していない © PLAID, Inc.
17. セルフレビュー AI セルフレビュー させたけど... プロンプトでデザインガイドライン、 コンポーネントの定義を雑に⾏ってレ ビューさせてみた。 （参考：Google提唱のDESIGN.md） ↓ そんな良くならない。そもそも実装の バグが原因だったりしてそれらを修正 したら瑣末な指摘しかされない ↓ 評価定義を⾃分たちでちゃんと作る必 要がある © PLAID, Inc. レビュー前 レビュー後
18. クリエイティブ評価の⽅法 これらはまだ開発‧検証中です。 • • 決定的に評価：静的解析 • コンポーネントを正しく使えているか ⾮決定的に評価：AIによる動的解析 ◦ ビジュアルによってレンダリング結果を評価 ▪ 表⽰サイズ ◦ ⼀般的なデザイン原則 ◦ ブランドデザイン適⽤ ▪ ⾊、フォント、マージン、画像、イラスト...etc ▪ 配信先のコンテキストを踏まえたい • 完全にLLM判断が難しい。⼈間による確認操 作が必要か。 © PLAID, Inc. | Confidential
19. 悩ましいポイント ルールをたくさん設定することの弊害 • • AIモデルの進化が読めない ◦ 指⽰しない⽅がうまくいく？ ◦ 以前できなかったことができるようになっている メンテナンスが⼤変になる ◦ プロンプトの中⾝を追えなくなる。指⽰に⽭盾が出て くる 共感する⽅はぜひ懇親会で話しましょう © PLAID, Inc. | Confidential
20. エンジニア採⽤募集 プレイドでは⼀緒に働く仲間を 募集しております！ https://recruit.plaid.co.jp/ © PLAID, Inc. 20