【AIによる条件提案型アプリ】条件入力UIの設計をどう考えるか

はじめに

「条件を入力すると、AIが最適なものを提案してくれる」—最近このタイプのtoCアプリのUIUXデザインを担当したので、考えたことをclaude codeと会話しながら、内容をまとめてもらった。

「条件入力のUIをどう設計するか」って意外と難しい。チャットにすべきか、ボタンで選ばせるか、フリーテキストか。
何となくチャットUIを選ぶと、かえってユーザーにとって使いにくいプロダクトになってしまうことがある。

この記事では、ユースケースごとに最適な入力UIがどう変わるかを整理してみた。

前提：このUIが解く問題

まず、どんなユーザーを想定しているかを明確にしておきたい。

このパターンが一般的な検索よりもユーザーの目的が達成できるのは、ユーザーが自分の求めるものをある程度わかっている状態のとき。InstagramやCookpadみたいな「何を求めているかわからないから探索する」体験とは、ちょっと違う。

ユーザーは目的を持っている。ただ、条件が複数あって、従来のフィルターで一つ一つ絞り込むのが面倒というのが課題。AIによる提案の強みは、この複数条件をまとめて自然に処理できることにある。

原則1：入力UIはフリクションの低い順にデフォルトすべき

まず大前提として、UIを選ぶときの優先順位がある。

ゼロ入力（AIがコンテキストから自動推測）
        ↓
ワンタップ（ボタン・チップ選択）
        ↓
複数選択（フィルター・スライダー）
        ↓
フリーテキスト入力
        ↓
チャット対話

ボタンを1回押す方が、文章を書くよりはるかに速い。チャットUIは一見スマートに見えるけど、多くのケースでオーバースペックだ。

チャットUIが本当に必要なのは、事前に選択肢を列挙できない条件空間のときだけだ。

原則2：選択肢とフリー入力はANDの関係で組み合わせる

ボタン選択とフリーテキスト入力は、どちらか一方を選ぶものじゃなくて、セットで使うものだ。

• 選択肢 → よくある条件をカバーして、タップだけで完結させる

• フリー入力 → 選択肢にないケースを補完する

この2つはOR（どちらか）じゃなく、AND（両方同時に使える）の関係で設計する。

[カジュアル] [1万円以内] [都内] [2名]  ← タップ選択
＋「テラス席があるところ」            ← フリー入力で追加

こうすることで、ほとんどのユーザーはタップだけで完結しつつ、特殊な条件があるユーザーもちゃんとカバーできる。

原則3：ドメインの広さがUIを決める

選択肢＋フリー入力でも解決できないケースがある。それがドメインが広すぎる場合だ。

Google Mapsの「Ask Maps」を考えてみよう。Mapsはレストラン、カフェ、観光スポット、公共施設など、あらゆる場所を扱う。ユーザーが入力する条件も：

みたいに、リアルタイムの状況・定性的な制約・複数の目的がごちゃっと絡み合う。これを事前にボタンで列挙するのは無理だ。

ドメインの広さ条件の組み合わせ最適UI広い（Maps、EC全般）爆発的チャット（ユーザー起点型）狭い（特定カテゴリ）有限・列挙可能選択肢＋フリー入力

原則4：選択肢はユーザーの思考順序に合わせて設計する

ドメインが狭くて選択肢で設計できるとき、選択肢の粒度と順序が大事になってくる。ここで大事なのはユーザーが自然に考える順番に沿わせること。

レシピ提案アプリを例にすると：

①まず何を作りたいか
（主食のカテゴリ）
        ↓
②シーン・気分・制約を重ねる
（和食の気分 / 冷蔵庫の食材を使いたい / 時短で作りたい）
        ↓
③AIが提案

ユーザーはデータベースのスキーマで考えない。「今日の夕飯どうしよう」という自然な思考の流れで考える。UIはその流れを邪魔しないように設計するのが大事だ。

原則5：入口の数は「思考フローの明確さ」で決める

ユーザーのメンタルモデルを考えると、入口（最初に選ぶ軸）が人によって違うケースがある。

レシピを例にすると：

• 食材から入る人「鶏肉が余っている」

• 気分から入る人「さっぱりしたものが食べたい」

• シーンから入る人「子供と一緒に作りたい」

入口を一つに強制すると、自分の思考フローと合わなくて離脱につながる。

AIの回答精度が上がるという点は特に見落とされがちだけど重要だ。入力が構造化されているほど、AIは曖昧さのない状態で条件を受け取れる。UI設計はユーザー体験だけじゃなく、AIへのインプット品質も決めるという二重の役割を持っている。

さらに複数入口の場合、フリー入力の優先度が上がる

「明確なフローがない」ケースでは、選択肢よりもフリー入力の方が重要度が高くなる。選択肢はあくまで「多くの人が使いそうな条件」を列挙したものに過ぎない。一方でAIの本当の強みは、事前に定義できない複雑な条件のもとでも最適な提案ができることだ。

チャットUIの2つのパターン

チャットUIが有効なケースでも、2つのパターンを区別しておくといい。

パターン1：ユーザー起点型（Ask Maps式）

ユーザーが自由に複雑な条件を投げかける形式。ドメインが広くて、条件の組み合わせを事前に列挙できないときに有効。

パターン2：AI質問型

AIが順番に質問して、ユーザーが答えていく形式。このパターンが活きるのは、明確な思考フローがあって、かつ知識の非対称性があるときだ。

知識の非対称性とは： ヤマダホールディングスと avatarin が共同開発した「くらしまるごとAIエージェント」がわかりやすい例だ。電子レンジを探すユーザーは「毎日の温め直しに使いたい」「4人家族」「予算3万円」という目的・状況・制約を知っている。でもAIは「その条件に最適な容量・スペック・メーカーの特性」という専門知識を持っている。

ユーザーが知っていること   ｜  AIが知っていること
─────────────────────────────────────────
目的・使い方・家族構成    ｜  必要なスペック・容量の目安
予算・好み              ｜  メーカー比較・機能の違い

この非対称性があるとき、AIが質問を主導することでユーザーは専門知識なしに最適解へたどり着ける。

注意点： 入口が複数必要なケースにAI質問型を使うのは逆効果。AIが決めた順序を強制することになって、ユーザーの思考フローとズレが生まれる。

まとめ：ユースケース別のデザイン方針

ドメインが広い
└── チャット（ユーザー起点型）

ドメインが狭い
├── 明確な思考フローがある
│   ├── 知識の非対称性がある → AI質問型チャット
│   └── 知識の非対称性がない → 思考順序に沿った選択肢で絞り込み＋フリー入力
└── 明確な思考フローがない
    └── フリー入力＋複数入口の選択肢

条件入力UIの設計は地味に見えて、AIプロダクトの価値を大きく左右する部分だ。チャットUIは「AIっぽさ」を演出できるけど、多くの場合はボタン一つの方が速くて、正確で、ユーザーに優しい。インターフェースはユーザーの目的を達成するための手段であって、それ自体が目的になってはいけない。

架空のUI画面を作ってみた

上記デザイン方針を元に、以下UIをclaudeに作ってもらった。

ケース1：AIによるギフト提案

UI：思考順序に沿った選択肢で絞り込み＋フリー入力
当てはまるデザイン方針👇

ドメインが狭い
├── 明確な思考フローがある
│   └── 知識の非対称性がない 

→ 思考順序に沿った選択肢で絞り込み＋フリー入力

ケース2：AIによる国内旅先の提案

UI：フリー入力＋複数入口の選択肢
当てはまるデザイン原則👇

ドメインが狭い
└── 明確な思考フローがない

→ フリー入力＋複数入口の選択肢