Narrative AIについて今の段階でまとめてみる
AIと対話するとき、必ずしも「チャット画面」である必要があるでしょうか。
同じAIでも、小説のような縦書きレイアウトや、AIの表情を顔文字で表現してみたり、あるいは吹き出しで実際に話してるみたいにしたり。
同じAIでも表現方法によって、受け取る印象は大きく変わってきます。
5月7日頃から取り組んでいる「NarrativeAI」というプロジェクトについて、いったん振り返りとして
開発の概要、なぜ始めたのか、活用のメリット、そして技術的なアルゴリズムなどを中心にお話ししますのでぜひ最後までお読みください。
NarrativeAIとは何か
「NarrativeAI」という名前は「Narrative(物語)× AI」から来ていて、物語性を持つAIという意味でつけました。
ChatGPTのようなテキストベースのAIが普及した今、「AIが対話できる」ことは当たり前になっています。しかし、その対話が必ずしも「DiscordやLINEのようなチャット画面」である必要があるでしょうか?
AIなのだから、人よりも早く多くの情報を出力出来て、会社を語るだけなのだから会社の事業に沿ったUIでもよくて、ハリーポッターのように日記帳のようなUIでも会話が成り立っていて。
そういった、現在主流のインターフェースを、もっとコンセプチュアルに捉えてみたらどうなるだろうという試みで。
「こんなインターフェースはどうだろう」「あるいは、こういうアプローチも面白いのでは」といったことを提案をベースに制作しています。
実際の作品
Anima
コンセプト:喜怒哀楽の可視化
NarrativeAIの原点となるプロトタイプで。会話の中で感情に応じて背景色が変化する仕組みを実装しました。ただし、次に紹介するSimulatedEmotionの開発に集中するため、途中で開発を終了しました。
SimulatedEmotion
コンセプト:表情による感情表現
AIに顔文字で表情をつけるという試み pic.twitter.com/94kIZeTU7O
— Sane (@yst7630) May 14, 2025
Animaでは背景色の変化が感情として直感的に理解しづらいと感じたので、このプロジェクトでは顔文字で表情を表現することに決め制作しました。
顔文字の種類としては、エクマンの6表情(喜・恐・怒・嫌・幸・驚)をベースにAIに適切な表情を選択させて表示する仕組みです。
Replica
コンセプト:実用性と対話
ポートフォリオで実際に使える実用的なAIを目指したプロジェクト。リニューアルを重ねて大きく進化しました。
デザイン面では、入力フィールドをより会話に近づけるために枠線を表示せず、ボタンを押したらフィールドにフォーカスする形にしました。実際に使用する際のことを考えて、枠線の内側だけ移植できるよう、周りのコンテンツをメニューなどに変更できるようなデザインを行いました。
イラストはIllustratorでSVGを使って描いたのですが、結局PNG書き出しで描画していたりしています。
REPLICA
— Sane (@yst7630) June 7, 2025
たくさんのフィードバックを受けて、入力フィールドをよりわかりやすく改善しました。
さらに、高校の友人が描いてくれたイラストのおかげで、表現の幅もぐっと広がっています。感謝。
Sane (@yst7630)・Front-End | Design
さしも草(@Sashimo_kusa)・Illustrationhttps://t.co/KWsJ9N3VA7 https://t.co/T8xy8Lt5na pic.twitter.com/LvcJ5rv8bv
リニューアル後は高校の友人にイラストを依頼し、表情のバリエーションを追加。「使い方がわからない」という声を受け、入力フィールド周りを大幅改善しました。
BUNGOU
コンセプト:日本語の特性を活かした縦書きAI
Narrative AI/BUNGOU
— Sane (@yst7630) July 3, 2025
小説をテーマに縦書きのAIインターフェースを制作しました。
Sane (@yst7630)・Front-End | Design pic.twitter.com/6VtdgMZcvw
何気に一番、気に入っている作品で、「横書きである必要はない」という発想のもと、縦書きインターフェースを制作しました。
縦書きからの連想ゲームで、実際の文庫本をいくつか読んで、「」で台詞を表現し、背景描写を織り交ぜる表現が印象的だったのでそれをベースにデザインしました。
小説らしいインターフェースと、応答によってかなり雰囲気のようなのが出ていて、使っていて楽しい作品だったりします。
AIを活用するメリット
NarrativeAIがどのようなプロジェクトかの説明を終えたところで、AIをデザインに扱うとどのようなメリットがあるか、についてお話ししたいと思います。
「注文のデザイン」という視点
AIを活用したデザインで私が一番注目したいのが、「注文のデザイン」という視点です。
今までのデザインを食べ物で例えるなら、カレーが欲しいA、海鮮丼が欲しいB、親子丼が欲しいCに対して、「米だけの提供」か「全部をごちゃ混ぜにした提供」しかできませんでした。
しかし、AIを用いた情報デザインでは、ユーザーのニーズに応じてカスタマイズされた体験を提供できる。つまり「注文に応じたデザイン」が可能になるのです。
ただここで重要なのが、AIが提供できるのは上の具材までで、米の部分はまた別に提供する必要があるということです。
AIの特性として、知りたい情報は質問しなければ得られません。そのため、AI単体でのデザインを行ってしまうと、どうしてもユーザーに大量の入力を強要することになり、トークン消費量も膨大になってしまいます。 「具材オンリー」を食べたいなんて人は稀だと思います、ですから「米」として大多数の人が知りたがる基本情報を前提にした状態で、AIはあくまでそのサポート役として扱う。そんな扱い方をすることでAIのポテンシャルを大いに発揮できるのではないかと思います。
待つ・待たせるというメリット
待たせるというのはそれだけで質問の重みを増すように思います。
質問の重みが増すというのは、その人にとって時間をかけて得た質問というのは記憶に残り、さらに質問を厳選しようという意識が働きます。
待たせるというのは質問してからの時間だけではありません、もちろん入力時間も質問を厳選する時間も、待たせるというのはそれだけで大きな意味を持つのです。
技術的なアルゴリズム
別の記事にまとめようと思ったのですが、案外シンプルなのでこちらに
ReplicaなどのAIではこのアルゴリズムを用いることによってトークン量の最適化などを行っています。
1. ナレッジの細分化
コンテンツをジャンル別に構造化します。
2. 2段階処理システム
- 1段階目:GPT-4.1 nanoで必要なナレッジジャンルを特定
- 2段階目:GPT-4oで特定されたナレッジと質問から回答生成
3. メリット
回答精度が向上し、同時にトークン使用量も最適化できます。
最後に
この制作を始めようと思った一番のきっかけは、GardenEightという企業さんがデザインにAIを活用する取り組みを見たことでした。 またデザイナーを目指す上で、自分が持っている技術を活かしたデザインを作り上げたいという想いもありました。
最後までこの記事を読んでいただきありがとうございました。 この記事でぜひAIのデザインに興味を持っていただけたら幸いです。