AI機能の画面の作り方

AI機能の評判は、出力の質だけで決まりません。同じモデル、同じ指示文、同じ出力でも、画面の作り方によって「使える」とも「使えない」とも言われます。差が出るのは、待たされ方、直しやすさ、そして何ができる機能なのかが伝わっているかどうかです。

本記事では、既存のAI APIを組み込んだ機能について、画面側で決まる部分を整理します。裏側の作りはAI処理を待たせない作り方とAIの出力をそのまま表示しないで扱っています。

待ち時間は「長さ」より「分からなさ」が問題

AI処理には数秒から数十秒かかります。しかし利用者が不満を感じる主因は、時間そのものではなく、何が起きているか分からないことです。

画面が固まって見える状態では、利用者はまず「押せていなかったのか」を疑い、もう一度押します。これは二重実行につながり、費用にも跳ね返ります。したがって、押した直後に状態が変わることが第一です。

見せ方の選択肢を、処理時間の目安とあわせて整理します。

真ん中の段で有効なのが、段階を言葉で出すことです。「資料を検索しています」「回答を作成しています」といった表示は、実際の処理と対応していれば、進捗バーより実態に合います。AIの処理は進み具合を数値で測れないため、パーセント表示は多くの場合その場しのぎの演出になり、実態とずれたときにかえって不信を招きます。

あわせて、中止できるようにします。 想定と違う出力が出始めたとき、最後まで待たされるのは負担です。中止ボタンがあれば、利用者はすぐ入力を直してやり直せます。中止時にAPIの呼び出し自体も止めれば、費用の節約にもなります。

出力は「完成品」ではなく「下書き」として置く

AIの出力を、動かせない結果として画面に表示すると、少しでも違ったときに利用者は捨てるしかありません。その場で直せる状態で置くと、同じ出力の価値が大きく変わります。

具体的には次のようになります。

• 生成された文章を、そのまま編集できる入力欄に入れる
• 一部分を選んで「もっと短く」「もっと丁寧に」と指定できるようにする
• 候補を複数出し、選ばせる
• 前の結果に戻れるようにする

三つ目の複数候補は、一つだけ出して「違う」と言われるより、利用者の納得が得られやすい形です。ただし候補の数だけ利用料はかかるので、二つか三つに留めるのが現実的です。

四つ目も見落とされがちです。やり直したら前より悪くなった、というのはよく起きます。戻れないと、利用者はやり直しを怖がって使わなくなります。

やり直しの導線は、出力のすぐそばに置きます。画面の隅にある設定を開かないとやり直せない作りだと、使われません。

「何ができるか」を入力の前に伝える

AI機能が使われない理由で最も多いのは、出力が悪いからではなく、何を入力すればよいか分からないことです。空の入力欄に「ご自由にご入力ください」とだけ書かれた画面の前で、多くの人は手が止まります。

対策は具体的です。

• 例示を置く：「例：先月の売上が落ちた原因を教えて」など、実際に成立する入力を数個並べます。押すとその内容が入る形にすると、最初の一回が生まれます。
• 選択肢から始める：自由入力の前に、よくある用途をボタンで示します。「議事録を要約する」「返信の下書きを作る」といった単位です。
• できないことを書く：「最新の相場情報には対応していません」「契約内容の判断はできません」と先に書いておくと、期待の外れ方が小さくなります。

三つ目は特に重要です。できないことを隠すと、利用者はそれを試し、失敗し、機能全体を信用しなくなります。先に書いてあれば、利用者は使える範囲で使い、その範囲では満足します。期待値を上げることではなく、期待値を合わせることが設計の目的です。

この点で、チャット形式は不利に働くことがあります。何でも受け付ける見た目は、何でもできるという期待を生みます。用途が絞れるなら、絞られた画面のほうが利用者にとって親切です。モバイルファーストUXの設計原則で述べた「操作を減らす」考え方は、AI機能でもそのまま当てはまります。

AI生成であることの伝え方

出力の扱い方を利用者に判断してもらうため、AIが生成した内容であることは伝える必要があります。ただし伝え方には幅があります。

出力を確認してほしい場面、たとえば顧客への返信の下書きや、社内文書の草案では、「AIが作成しました。内容をご確認ください」と明示します。ここを曖昧にすると、確認されないまま外に出ます。

一方で、機能全体をAIの名前で売り出すのは慎重に判断すべきです。AIであることを前面に出すと期待が過剰に上がり、一度の誤りで失望が生まれます。「AI検索」より「関連する社内文書を探す」のように、何ができるかで説明するほうが、期待と実態が合います。

誤りの報告導線も画面側の仕事です。出力のそばに小さく「誤りを報告する」を置き、押されたら該当の入出力を記録する。この導線がないと、利用者は黙って使うのをやめ、こちらは理由を知らないまま終わります。

失敗したときの画面を先に作る

設計の順序として提案したいのが、成功した画面より先に、失敗した画面を作ることです。

失敗の画面で必要なのは次の三つです。

1. 何が起きたかを利用者の言葉で伝える（「混み合っています」「入力が長すぎます」）
2. 次に何をすればよいかを示す（「少し待ってもう一度」「短くして再実行」）
3. 別の手段への導線を置く（担当者に問い合わせる、従来の機能を使う）

技術的なエラー表示をそのまま出すのは避けます。利用者にとっては何も分からず、問い合わせだけが増えます。失敗の分類と対処についてはAIが答えられないときの設計で整理しました。

先に失敗の画面を作ると、その機能が失敗しやすい条件が設計時に見えてきます。結果として、そもそも失敗しにくい入力の作りに直せることがあります。

使われ方を見て直す

AI機能は、リリース時点の設計が正しいかどうかを事前に確かめにくい領域です。利用者が何を入力するかは、出してみないと分かりません。

したがって、MVPとして小さく出し、次を観察する前提で作ります。

• 入力欄まで来て、送信せずに離脱した割合
• 出力を採用した（コピーした・保存した・送信した）割合
• やり直しが何回行われたか
• どの種類の入力で失敗が多いか

これらはUXリサーチの一般的な観察項目と変わりませんが、AI機能では「入力できずに離脱」が特に多く出ます。この割合が高いときは、モデルや指示文ではなく、例示や選択肢といった画面側に手を入れるべき合図です。

弊社は既存のAI APIを組み込む開発を行っており、この画面側の設計を後回しにしないことを重視しています。出力の質を上げる作業には終わりがありませんが、画面側の改善は短い期間で効果が出て、費用もかかりません。

AI活用開発やUXデザインで、AI機能の画面設計から相談されたい場合はお問い合わせからご連絡ください。オンラインで、そもそもAIで解くべき課題かどうかから一緒に整理します。