クリエイティブをAIペルソナがどう受け取るかシミュレーション
AudienceLensは、作成したクリエイティブ（画像やキャッチコピー）に対する、複数のAIペルソナの反応をシミュレーションします。ユーザーは任意のペルソナを選びボタンをクリックするだけで、シミュレートされたフィードバックを生成・比較できます。これにより、クリエイティブが多様なオーディエンスにどう伝わるかを確認可能です。
多くのAIツールが単一の「正解」を出力するのに対し、「AudienceLens」はあえて多様で時に相反する「解釈」をシミュレーションする点に新規性があります。これは、服のバーチャル試着という実証済み技術を「オーディエンスの視点の試写」へ転用したもので、クリエイターが抱える「品質」ではなく「伝わり方」の不安を直接解消します。複数のLLMペルソナを同時に動かし、フォーカスグループインタビューのような体験を提供することで、公開前の炎上リスク回避や魅力の再発見を助ける、新しい形の創造的パートナーです。
今後は、今はペルソナもフィードバックも固定ですが、次はユーザーがペルソナを自由に作成・編集できる機能や、多様なクリエイティブ形式（動画・音声）への対応を広げ、あらゆるクリエイターの「伝わるかな？」という不安に寄り添う定番ツールにしたいです。
この作品の使い方と、画面で確認するポイントをまとめて表示します。
AudienceLensは、作成したクリエイティブが多様なオーディエンスにどう伝わるかを確認し、改善に役立てるためのツールです。
評価対象となるクリエイティブの画像とキャッチコピーを用意します。キャッチコピーの例は「新しい働き方を、この一杯から。」です。
クリエイティブを評価する複数のAIペルソナが用意されます。各ペルソナには名前と詳細な特徴が設定されており、例えば「ポジティブな学生」や「懐疑的なビジネスマン」などが含まれます。
各AIペルソナは、与えられたクリエイティブ（キャッチコピーと画像概要）に対し、自身の視点から感じたこと、良い点、疑問点、改善案をコメントします。最終的に、コメントとともに「positive」「neutral」「negative」のいずれかで感情を判定する設計です。
各ペルソナからのフィードバックが、ペルソナ名、具体的なコメント、センチメントとして表示されます。例えば、「懐疑的なビジネスマン」からは「『新しい働き方』とは具体的に何でしょうか？Wi-Fiや電源の有無、会議スペースなど、具体的な情報が不足しています。
この作品でAIが重視した制作方針を、公開向けに整理して表示します。
この作品に対するコメントとAIレビューをまとめて表示します。
複数のAIペルソナが多様な受け取り方を示してくれるのは、クリエイティブの思わぬ側面が見えて、とても面白い試みだと感じました。ただ、意見が多岐にわたる分、最終的にどう判断して改善に繋げるか迷う場面も出てくるかもしれませんね。例えば、ある程度意見を集約して「この層にはこう伝わりやすい」といった傾向を提示してくれると、次の一手がより明確になりそうです。
この作品で保存されているコードと確認用ファイルをまとめて表示します。
'use client';
import React, { useState } from 'react';
import { sampleCreative } from '../data/sample-input';
import { traceData } from '../data/sample-trace';
type Feedback = { personaId: string; personaName: string; comment: string; sentiment: 'positive' | 'neutral' | 'negative' };
const PipelineStepDisplay = ({ name, active }: { name: string; active: boolean }) => (
<div style={{
padding: '8px 12px',
border: '1px solid #ccc',
borderRadius: '4px',
background: active ? '#e0f7fa' : '#f0f0f0',
color: active ? '#00796b' : '#333',
marginBottom: '8px'
}}>
{name}
</div>
);
export default function Home() {
const [revealedFeedbacks, setRevealedFeedbacks] = useState<Feedback[]>([]);
const [isRunning, setIsRunning] = useState(false);
const [currentStep, setCurrentStep] = useState(0);
const handleRunTrace = () => {
if (isRunning) return;
setIsRunning(true);
setCurrentStep(1); // Start with step 1
setTimeout(() => {
setCurrentStep(2); // Move to step 2
setRevealedFeedbacks(traceData.feedbacks);
setIsRunning(false);
}, 800);
};
const styles = {
container: { fontFamily: 'sans-serif', maxWidth: '1000px', margin: '0 auto', padding: '20px' },
header: { borderBottom: '1px solid #eee', paddingBottom: '10px', marginBottom: '20px' },
main: { display: 'grid', gridTemplateColumns: '1fr 2fr', gap: '40px' },
leftPanel: { display: 'flex', flexDirection: 'column' },
rightPanel: { borderLeft: '1px solid #eee', paddingLeft: '40px' },
creativeBox: { border: '1px solid #ddd', padding: '1
...