本文へ移動

ホーム / デザイナー / 第5部 データと AI

第5部 データと AI・第12章

AI 機能の体験設計

★★☆ 重要7トピック・面接 4問

大規模言語モデル(LLM)などの AI を使った機能は、これまでの機能と性質が違います。この章では、デザイナーが知っておくべき AI の性質と、待ち時間・根拠・失敗・操作の任せ方のデザインを押さえます。

ひとことで

AI は間違える前提で、期待をそろえ、根拠を見せ、ユーザーが確認・修正・取り消しできる体験にする。

AI(大規模言語モデルなど)を使った機能は、同じ入力でも答えが変わり、もっともらしく間違えることがあります。そのため、間違える前提で体験を設計します。

頼む生成中少しずつ表示・止められる根拠つきで見せる出典・引用確認・編集人が決める反映取り消せる違えば止める・言い直す生成し直す送信・削除・購入などの大きな操作は、AI が下書きし、最後は人が押す待ち時間の設計:考え中の表示・止めるボタン・読んでいる途中に勝手にスクロールしない
AI は間違える前提:いつでも止める・直す・取り消すができる流れにする
考えることデザインの例
期待をそろえる何ができて何ができないかを最初に示す。「AI が生成しました。内容を確認してください」
根拠を見せる参照した資料へのリンク・引用を出し、ユーザーが確かめられるようにする
ユーザーが制御する送信・反映の前に確認と編集ができる。生成し直す・取り消すが簡単にできる
大きな操作は人が決めるメール送信・削除・購入などは、AI が下書きしてユーザーが最後に押す
失敗のとき答えられないときの表示。「うまくいかない」の報告(良い・悪いのボタンなど)
データの扱い入力した内容が何に使われるかを分かるように示す

AI を人のように見せすぎると、実際以上に信頼されてしまいます。名前や口調で親しみを出す場合も、間違えることがある点ははっきり伝えます。

面接ではこう答える

AI を使った機能は、同じ入力でも答えが変わり、もっともらしく間違えることがあります。そのため、間違える前提で体験を設計します。何ができて何ができないかを最初に示して期待をそろえ、参照した資料などの根拠を見せ、結果は反映の前に確認・編集でき、生成し直しや取り消しが簡単にできるようにします。送信や削除のような大きな操作は、AI が下書きをして、最後はユーザーが決める形にしています。

ひとことで

LLM は、次に来そうな言葉を確率で選んで文章を作る。同じ入力でも答えが変わり、もっともらしく間違え、読める量や時間・費用に限りがある。

デザイナーが AI の仕組みを細かく知る必要はありませんが、体験に影響する性質は知っておきます。

性質起きることデザインでの対応
答えが毎回変わる同じ質問でも違う答え生成し直すボタン。結果を保存できる
もっともらしく間違える事実と違うことを自信ありげに答える(ハルシネーション)根拠・出典を見せる。確認を促す
読める量に限りがある長い資料や長い会話の前のほうを扱えないことがある読める範囲を伝える。長い会話は区切る
知識に時期がある学んだ時点より新しいことを知らない調べて答える機能か、何時点の知識かを示す
時間と費用がかかる長い回答ほど待ち時間と費用が増えるストリーミング表示。回答の長さの目安
指示の書き方で結果が変わるユーザーの書き方で質が変わる入力の例・ボタンでの選択肢を用意する

AI の機能の多くは、エンジニアが AI に渡す指示(プロンプト)や、渡す資料の選び方で結果が大きく変わります。画面だけでなく、「AI に何を渡して、何を返してもらうか」の設計にもデザイナーの視点が役立ちます。

面接ではこう答える

大規模言語モデル、LLM は、たくさんの文章から学んで、次に来そうな言葉を確率で選びながら文章を作ります。そのため、同じ質問でも答えが毎回少し変わり、事実と違うことをもっともらしく答えることもあります。一度に読める量や、学んだ時点より新しいことを知らないといった限りもあり、長い回答ほど時間と費用がかかります。デザインでは、こうした性質を前提に、確かめられる根拠、やり直し、待ち時間の見せ方を考えます。

ひとことで

AI の回答を、全部できるのを待たずに、できた部分から少しずつ表示する見せ方。待ち時間が短く感じられる一方、途中の状態のデザインが増える。

回答が届くまでの時間の流れ送信最初の文字回答の終わり考え中の表示少しずつ表示・止めるボタン最初の文字が出るまでの時間を短く感じさせ、届いている間はいつでも止められるようにする
ストリーミング表示の時間の流れ

ストリーミングの表示:AI の回答は、全部できるまで数秒〜数十秒かかることがあります。そこで、できた部分から少しずつ文字を表示する(ストリーミング)のが一般的です。待ち時間が短く感じられる一方、デザインで決めることが増えます。

  • 最初の文字が出るまでの表示(考え中であることが分かる動き)
  • 途中で止めるボタン(回答の向きが違うとすぐ止められる)
  • 自動のスクロール:ユーザーが上にスクロールして読んでいるときは、勝手に下へ動かさない
  • 文字が増えるたびに周りのレイアウトが跳ねないようにする。表やコードなどが途中の形で表示されることも想定する
  • 調べもの・ツールの実行など時間がかかる処理は、いま何をしているかを段階で見せる
  • 途中で通信が切れたときの表示と、やり直し

面接ではこう答える

AI の回答は、全部できるまで数秒から数十秒かかることがあるので、できた部分から少しずつ表示するストリーミングが一般的です。待ち時間が短く感じられる一方、デザインで決めることが増えます。最初の文字が出るまでの考え中の表示、途中で止めるボタン、ユーザーが上を読んでいるときに勝手にスクロールしないこと、表やコードが途中の形で表示されること、途中で通信が切れたときのやり直しなどです。

ひとことで

AI の回答に、もとにした資料へのリンクや引用を付けて、ユーザーが確かめられるようにする。資料を探してから答える仕組みを RAG と呼ぶ。

資料を探してから答え、出典を見せる質問ユーザー資料を探す関係する部分資料をもとに回答AI出典つきで表示確かめられる
根拠を探してから答える仕組み(RAG)と、出典の表示

AI の回答が正しいかを、ユーザーが確かめられるようにするのが根拠の表示です。社内の資料などから関係する部分を探してから答える仕組み(RAG:検索拡張生成)では、使った資料を出典として見せられます。

見せ方例
回答の中に番号「返品は30日以内です[1]」のように、文と出典を対応させる
出典の一覧回答の下に、資料の名前とリンク。押すと該当の場所を開く
引用もとの文章をそのまま見せて、言い換えによるずれを防ぐ
見つからなかったとき「関係する資料が見つかりませんでした」と伝え、問い合わせなど別の手段を出す
資料の新しさ資料の更新日を見せる

出典を付けても、ユーザーが毎回確かめるとは限りません。金額・期限・規約のように間違えると困る内容は、出典を目立たせる、もとの文章を引用する、などの工夫を足します。

面接ではこう答える

AI はもっともらしく間違えることがあるので、回答に根拠を付けて、ユーザーが確かめられるようにします。社内の資料やヘルプの記事から関係する部分を探し、それをもとに答えさせる仕組みは RAG と呼ばれ、この場合は使った資料を出典として表示できます。デザインでは、回答のどの部分がどの資料に基づくかを番号やリンクで示し、資料が見つからなかったときは無理に答えず、そのことを伝える表示を用意します。

AI の機能には、これまでの機能にはない失敗のしかたがあります。それぞれの表示を決めておきます。

失敗表示の例
答えられない・資料がない分からないことを伝え、別の手段(検索・問い合わせ)を出す
断る(安全上の理由など)断った理由を短く、責めない言い方で。できることを案内
時間がかかりすぎる途中で止められる。タイムアウトしたらやり直し
利用の上限に達したいつまた使えるか・上限の増やし方
結果が期待と違う生成し直す・指示を足す・良い/悪いの評価

「良い・悪い」の評価のボタンは、エンジニアが AI の質を改善するための大事なデータになります。悪いを押したときに理由を選べる(不正確・役に立たない・不適切など)と、改善に使いやすくなります。評価の内容がどう使われるかも、分かるように示します。

ひとことで

AI がメール送信や予約などの操作まで行う機能では、何をするかを先に見せ、影響の大きい操作の前に人が確かめ、結果を取り消せるようにする。

影響の大きい操作の前に、人が確かめる依頼ユーザー計画を見せる何をするか確認大きな操作の前実行AI結果の報告取り消せる
AI に操作を任せるときの確認の流れ
操作の影響例確認のしかた
小さい・元に戻せる下書きを作る・検索する・並べ替える確認なしで実行し、結果を見せる
中くらい予定の仮押さえ・設定の変更実行前に内容を見せる。後から取り消せる
大きい・元に戻せないメールの送信・削除・支払い・外部への公開必ず人が内容を確かめて押す

AI が操作を任されている間は、いま何をしているかを段階で見せ、途中で止められるようにします。実行した後は、何をしたかを一覧で残し、取り消せるものは取り消しのボタンを出します。AI に渡す権限(どのデータを読み、何を変えてよいか)も、ユーザーが分かる形で示します。

確認が多すぎると、ユーザーは中身を読まずに「はい」を押すようになります。影響の小さい操作は任せ、大きい操作にだけ確認を集中させるのがこつです。

面接ではこう答える

AI が文章を作るだけでなく、メールを送る、予定を入れる、データを変えるといった操作まで行う機能が増えています。こうした機能では、AI が何をしようとしているかを先に見せ、送信や削除、支払いのように影響の大きい操作の前には、人が内容を確かめて最後に決める形にします。実行した後も、何をしたかの記録と、取り消しの手段を用意します。どの操作を確認なしで任せてよいかを、影響の大きさでエンジニアと決めています。

AI は、デザインの作業そのものにも使われるようになっています。便利な一方で、気をつけることもあります。

使い道例気をつけること
リサーチのまとめインタビューの記録の要約・分類要約で抜けた声がないか、元の記録も確かめる
文言の案ボタン・エラーの文言の候補用語の統一・トーン。最後は人が決める
ダミーのデータ長い名前・いろいろな件数の例実データの分布の代わりにはならない
画面の案・プロトタイプラフな画面や動く試作をすばやく作るデザインシステムの部品・アクセシビリティに合っているか
画像の生成イメージ画像・イラスト権利・会社の利用のルールを確かめる

会社の情報や、ユーザーの個人の情報を AI のサービスに入れてよいかは、会社のルールで決まっていることが多いです。使う前に確かめます。

この章のまとめ

🖨 まとめシート(印刷・PDF)
  • AI は同じ入力でも答えが変わり、もっともらしく間違える。確認・修正・取り消しができる体験にする
  • 回答はストリーミングで少しずつ届く前提で、止める・スクロール・途中の形をデザインする
  • 大きな操作は AI に任せきりにせず、人が最後に確かめて決める
  • AI 機能の体験設計の基本:AI は間違える前提で、期待をそろえ、根拠を見せ、ユーザーが確認・修正・取り消しできる体験にする。
  • LLM の性質(デザイナーが知っておくこと):LLM は、次に来そうな言葉を確率で選んで文章を作る。同じ入力でも答えが変わり、もっともらしく間違え、読める量や時間・費用に限りがある。
  • 回答のストリーミング表示:AI の回答を、全部できるのを待たずに、できた部分から少しずつ表示する見せ方。待ち時間が短く感じられる一方、途中の状態のデザインが増える。
  • 根拠の見せ方(引用・出典):AI の回答に、もとにした資料へのリンクや引用を付けて、ユーザーが確かめられるようにする。資料を探してから答える仕組みを RAG と呼ぶ。
  • AI に操作を任せるときの確認:AI がメール送信や予約などの操作まで行う機能では、何をするかを先に見せ、影響の大きい操作の前に人が確かめ、結果を取り消せるようにする。

この章のクイズ

面接ではこう聞かれる

まず答えを見ずに声に出して答え、そのあと開いて比べる。

Q1AI の機能のデザインで気をつけることは?

模範回答

まず、AI は間違えることがある前提で設計します。何ができて何ができないかを最初に示し、参照した資料などの根拠を見せて、ユーザーが確かめられるようにします。

次に、ユーザーが制御できることです。結果は反映の前に確認・編集でき、生成し直しや取り消しが簡単にできるようにします。送信や削除のような大きな操作は、AI が下書きをして最後はユーザーが決める形にします。最後に待ち時間です。回答はストリーミングで少しずつ表示し、途中で止めるボタンを置き、読んでいる途中で勝手にスクロールしない、時間のかかる処理は今何をしているかを見せる、といった点を決めます。

深掘りされたら

  • AI の回答が間違っていたとき、ユーザーはどうやって気づけますか?
  • AI 機能の良し悪しは、何で測りますか?

見られているポイント誤り前提・ユーザーの制御・待ち時間

Q2AI の回答をストリーミングで表示するとき、デザインで決めることは何ですか?

模範回答

大きく5つあります。最初の文字が出るまでの考え中の表示、途中で止めるボタン、自動のスクロールの扱い、途中の形の扱い、途中で切れたときの表示です。

特に自動のスクロールは、ユーザーが上にスクロールして読んでいるときは勝手に下へ動かさない、と決めておかないと読みにくくなります。また、表やコードが途中の形で表示されたり、文字が増えるたびに周りが跳ねたりしないよう、レイアウトを考えます。調べものなど時間がかかる処理は、いま何をしているかを段階で見せるようにしています。

深掘りされたら

  • 止めるボタンを押した後は、どう表示しますか?

見られているポイント途中の状態を具体的に挙げられるか

Q3AI が間違えることへの対策を、デザインでどう入れますか?

模範回答

確かめられる、直せる、任せすぎない、の3つで考えています。確かめられるように、回答に出典の番号やリンクを付け、資料が見つからないときは無理に答えずそのことを伝えます。直せるように、生成し直し、編集、取り消しを簡単にします。

任せすぎないように、送信や削除、支払いのような影響の大きい操作は、AI が下書きをして、最後は人が内容を確かめて押す形にします。また、AI を人のように見せすぎると実際以上に信頼されるので、間違えることがある点ははっきり伝えます。良い・悪いの評価も集めて、エンジニアが改善に使えるようにします。

深掘りされたら

  • 出典があってもユーザーが確かめないときは、どうしますか?

見られているポイント根拠・修正・人の確認を組み合わせているか

Q4AI に操作まで任せる機能では、どこで確認を入れますか?

模範回答

操作の影響の大きさで分けます。下書きを作る、検索する、のように小さく元に戻せる操作は確認なしで実行して結果を見せ、予定の仮押さえや設定の変更のような中くらいの操作は実行前に内容を見せて後から取り消せるようにします。メールの送信、削除、支払い、外部への公開のように元に戻せない操作は、必ず人が内容を確かめて押す形にします。

確認が多すぎると中身を読まずに押すようになるので、大きい操作に確認を集中させるのがこつです。実行した後は、何をしたかの記録と取り消しの手段も用意します。

深掘りされたら

  • どの操作が「大きい」かは、誰が決めますか?

見られているポイント影響の大きさで確認を設計できるか