生成AIのレスポンシブUXという考え方

レスポンシブデザインは、画面の幅に合わせて見た目を変えます。スマートフォンなら一列に並べ、広い画面なら複数の列を使います。

生成AIを使えば、画面サイズだけでなく、利用者の目的に合わせて内容そのものを変えられるのではないか。そう考えて、簡単なデモを作りました。

私はこの考え方を レスポンシブUX と呼んでいます。

HTMLも生成AIの出力にできる
#

生成AIは、質問に文章で答えるだけではありません。決められた形式のデータや、HTMLとCSSも生成できます。

サイトが利用者の状況を受け取り、その場で必要な画面を組み立てることも技術的には考えられます。

従来のサイトでも、条件分岐や推薦機能を作れば表示を変えられます。生成AIが加わると、あらかじめ用意した数種類の画面から選ぶだけでなく、説明の順番や選択肢をその場で組み立てられます。

画面をすべて生成するなら、事業者は何も作らなくてよいのでしょうか。実際には逆で、生成してよい範囲を先に決める仕事が増えます。

商品情報、価格、利用条件のように変えてはいけない事実があります。一方で、説明の詳しさや並べる順番は、利用者に合わせて変えられます。

事業者が用意するのは、固定された一枚のページだけではありません。

生成AIは、この材料と制約のなかで画面を組み立てます。

同じ宿泊施設のページでも、利用者が知りたいことは違います。小さな子どもと泊まる人は設備を確認し、仕事で訪れる人は通信環境や机を見ます。

固定されたページでは、すべての情報を同じ順番で並べることになります。レスポンシブUXでは、訪問経路や選択内容から目的を推定し、必要な情報を先に出します。

ただし、推定が外れることもあります。 AIが「この人には不要」と判断した情報が、実際には必要かもしれません。

そのため、最適化された画面だけを見せて終わるわけにはいきません。全情報へ戻る導線や、目的を選び直す手段を残します。

利用するたびに画面が大きく変わると、前回あったボタンを探せなくなります。人によって表示が違えば、問い合わせ対応や操作案内も難しくなります。

生成する範囲は、画面全体でなくてもよいです。ナビゲーションや購入操作は固定し、説明や候補だけを変える方法もあります。

私は、次のように分けるのが現実的だと考えています。

画面を生成できることと、生成したほうがよいことは別です。変化させる価値がある場所だけに使います。

生成AIの画面というと、入力欄と会話履歴を思い浮かべがちです。しかし、利用者が毎回文章で希望を説明する必要はありません。

ボタンを選ぶ、ページを見る、条件を変更する。そうした操作も、目的を知るための入力になります。

生成AIは裏側で情報を整理し、利用者には通常のWebサイトとして見せられます。会話UIを増やすことより、すでにある操作から意図を読み、次の画面を調整するほうが自然な場面もあります。

レスポンシブUXは、利用者ごとに別の世界を見せる考え方ではありません。同じ事実へ、目的に合う入口を作る考え方です。

生成できる範囲が広がるほど、固定して守る部分も明確にする必要があります。私は、画面を自由に変える技術より、利用者が迷ったときに戻れる場所を残す設計のほうを先に考えたいです。

この境界の設計は、生成AIでUIを出し分けるとき、人に残す選択肢でさらに具体化しています。