
生成AIサービスのUXデザインにおけるベストプラクティス | 豊富な実例付き
国内でも生成AIを使ったプロダクトづくりに取り組む企業は増えていますが、ユーザー体験の正解はまだほとんど体系化されていません。
そのため、サービスの実例を掲載しながら「生成AIサービスにおけるUXデザインのベストプラクティス」についてまとめました。
何でもかんでもチャットUIにしない
Webサイトノーコード制作サービス「Wix」のAI機能は、テキストや画像など編集したい箇所をクリックした際にAI機能のボタンが出現する。
このように、制作系のサービスにおいて生成AI機能を提供する際には、むやみにチャットUIにせず、対象箇所に紐づいてAIをアシスタント的に呼び出せるようにするのがポイントだ。
Wixの生成AI機能のUXには以下のようなポイントも押さえられており、非常に参考になる。
ユーザーにプロンプトエンジニアリング力を求めない。UIのインプットフィールド側で必要な情報を過不足なく吸い上げられるようにする。
(特にToB的なサービスにおいては) 単一の選択肢を提示するのではなく、複数の選択肢を提示してユーザーに最終選ばせる。
あくまで生成AI機能はタスク遂行のための機能の一部として提示する (生成AI機能1本足では話題は生むが実用制に欠ける)
Webサイトノーコード制作サービスWixのAI機能は、生成AI機能のUXデザインにおける重要なポイントがいくつも詰まってる。
— KAJI | 梶谷健人 (@kajikent) July 23, 2023
① むやみにチャットUIにせず、対象箇所に紐づいてAIをアシスタント的に呼び出せるようにする
②… pic.twitter.com/9Wur30xwU1
UIすら自動生成して提示する
AIライティングツールのJasperに搭載されている「Dynamic Template機能」は生成AIサービスのこれからのUXを考える上で非常に参考になる。
「Dynamic Template機能」を使うと、契約書やProduct Roadmapの作成などAIにやって欲しいことを入力すると、自動で入力欄自体が生成されて、そこに情報を埋めてくとかなり精度の高い文書が生成される。
GPTに聞けば、プロジェクトロードマップや契約書などを生成してもらうためにどのような項目が必要なのか教えてくれるので、その項目の中から特に重要性の高い項目を入力欄としてUIに反映してユーザーに提示することでこのインターフェスは実現できる。
AIライティングツールのJasperに新しく搭載されたDynamic Template機能めっちゃ良い。
— KAJI | 梶谷健人 (@kajikent) April 14, 2023
契約書やProduct Roadmapの作成などAIにやって欲しいことを入力すると、自動で入力欄が生成されて、そこに情報を埋めてくとかなり精度の高い文書が生成される。
執筆/文書作成系は本当にゲーム変わったなー。 pic.twitter.com/qIoI5QPBSj
Discordで高速にインターフェイスを用意する
動きの早い生成AI領域において、生成AI機能を有したサービスを高速で公開したい場合は、インターフェイスをDiscord (Slack的なチャットサービス)にしてしまい、インターフェイス開発の工数を大きく削減するのも手だ。
実際に画像生成AIとして世界で広く使われている「Midjourney」のインターフェイスはDiscordだ。
Discord上のメッセージボックスに打ち込んだ文章が画像生成のためのプロンプトとなり、生成された画像に紐づくボタンや、特定の絵文字をリアクションとして押すことで様々な機能を最小の実装で実現している。
実際に私がいま顧問している先で新規につくっているサービスもDiscordをUIとして利用してスピーディーに開発を進めています。

データセキュリティはしつこいくらいユーザーに保障する
現時点で企業が生成AIサービスを導入する際に最も気にするポイントが「自社データが外部に漏れてしまわないか」だ。
ここから先は
AIやXRなどの先端テック、プロダクト戦略などについてのトレンド解説や考察をTwitterで日々発信しています。 👉 https://twitter.com/kajikent