書いた文章がどう読まれるか3つの視点で漫画化
文章を入力し「レンズで見る」ボタンを押すと、AIが「懐疑的な人」「初心者」「好意的」という3つの読者ペルソナを演じ分けます。それぞれの視点からの解釈が漫画風のビジュアルストーリーボードとして生成され、並べて比較できます。
自分の書いた文章が、意図しない形で受け取られていないか。そんな書き手の不安を解消するのが『Perspective Lens』です。このツールが新しいのは、文章を単に評価するのではなく、AIが「懐疑的な人」「初心者の人」「好意的な人」という3つのペルソナを演じ分け、それぞれの視点からの反応を漫画風のストーリーボードとして可視化する点にあります。一般的な評価ツールが提供するスコアや定型的なアドバイスとは一線を画し、具体的な「誤読の可能性」を物語として示すことで、書き手はより深い内省と改善のヒントを得られます。これは、LLMを単なる要約・生成器ではなく、多様な人間性をシミュレートする対話型ツールとして活用する新しい試みです。
今後は、現在は単一のサンプルに対する固定的な解釈を示すだけですが、将来的にはユーザーがペルソナの性格を調整したり、より多様な文章のニュアンスを捉えられるようにモデルを洗練させ、あらゆるクリエイターの必携ツールにしたいです。
この作品の使い方と、画面で確認するポイントをまとめて表示します。
書いた文章が「懐疑的な人」「初心者の人」「好意的な人」にどう見えるかを、3つの視点で比較できます。
ユーザーが分析したい文章をテキスト入力欄に貼り付けます。例えば、「先日、AIを活用した新しいマーケティング手法を導入しました。…」のような文章を用意します。
入力された文章は、日本語の句読点（。！？
AIは「懐疑的な読者」「初心者の読者」「好意的な読者」という3つのペルソナとして、入力文章をそれぞれ解釈します。各ペルソナは、文章の要約と、注目した部分への反応をJSON形式で出力する設計です。
AIが生成した各ペルソナの解釈は、UI表示に適したストーリーボード形式に整形されます。これには、各ペルソナの名称と、注目した文章部分に対応するセリフが含まれます。
整形された3つのストーリーボードが並べて表示されます。例えば、「懐疑的な読者」は「ターゲット顧客へのリーチが大幅に向上し、売上も堅調に伸びています。」という部分に対し、「『大幅に向上』と言うけど、具体的な数字はどこにもないな。
この作品でAIが重視した制作方針を、公開向けに整理して表示します。
この作品に対するコメントとAIレビューをまとめて表示します。
ペーストした文章を3つのペルソナで漫画にする発想、とてもユニークですね。一般的な文章評価ツールがスコアや抽象的なアドバイスに留まる中で、読者の具体的な感情や誤読のポイントを物語として示してくれるのが素晴らしいです。書き手が意図しない受け取られ方を具体的に可視化してくれるので、次にどう修正すべきか、より深く考えるきっかけになりそうです。一方的な評価ではなく、読み手との対話を促すようなアプローチだと感じました。
この作品で保存されているコードと確認用ファイルをまとめて表示します。
/* eslint-disable @next/next/no-img-element */
'use client';
import { useState } from 'react';
import { sampleTrace } from '../data/sample-trace';
import { sampleArticle } from '../data/sample-input';
// NOTE: Types are re-declared here to avoid importing from source/core/**
// This is a requirement for the static demo artifact.
type StoryboardPanel = {
panelId: string;
dialogue: string;
focusText: string;
};
type PersonaStoryboard = {
storyboardId: string;
personaType: 'skeptical' | 'beginner' | 'positive';
personaName: string;
panels: StoryboardPanel[];
};
export default function PerspectiveLensScreen() {
const [storyboards, setStoryboards] = useState<PersonaStoryboard[]>([]);
const [isRunning, setIsRunning] = useState(false);
const handleRunTrace = () => {
setIsRunning(true);
// Simulate a small delay to show the process
setTimeout(() => {
setStoryboards(sampleTrace.finalOutput);
}, 300);
};
return (
<div style={{ fontFamily: 'sans-serif', padding: '2rem', maxWidth: '1200px', margin: '0 auto' }}>
<header style={{ marginBottom: '2rem', borderBottom: '1px solid #eee', paddingBottom: '1rem' }}>
<h1 style={{ fontSize: '2rem' }}>Perspective Lens</h1>
<p style={{ color: '#555' }}>あなたの文章が、異なる読者にどう見えるかをシミュレーションします。</p>
</header>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: '2rem' }}>
<div>
<h2 style={{ fontSize: '1.2rem' }}>1. 文章を入力</h2>
<textarea
data-proof="input-text"
readOnly
style={{ width: '100%',
...