なぜデザイナーと開発者はAIファーストの時代のためにWebインターフェイスを再考する必要があるのか

私は、近代的なウェブフレームワーク、SEO、AIツールの交差点で暮らしてきた実践的な開発者であり、建築家です。毎日、私たちがインターフェイスを設計する方法は、ユーザーの行動、検索、およびAIが私たちの足の下で変化している間、同じであり続けることができるというふりをすることは難しくなります。 これは、AIチャットと伝統的なウェブサイトの交差点で何が起こっているのか、そしてこれが今後5～10年間、デザイナー、開発者、製品を構築する企業にとって何を意味するのかについてです。 How we learned to use the web WEB WEB WEB WEB WEB WEB WEB WEB WEB 過去20年間、ウェブは驚くほど予測可能でした。ページがあります。そのページには、ヘッダー、フットボード、ナビゲーション、隣接するページへのリンクのいくつか、時には検索ボックスがあります。どこかで、より深いライブフィルター、カテゴリ、タグ、無限のページ化があります。心のモデルはシンプルです:ウェブは図書館であり、各サイトは独自のカタログと棚を持つ小さなプライベートコレクションです。 私たちは、正しい「棚」に到達するためには、まず、図書館員がどう考えているかを理解する必要があります。ウェブ上で、その図書館員は情報アーキテクチャです。あなたは「authに関する何か」を探すだけではありません。あなたは、この製品で、ドキュメントは「ドキュメント→API→認証」で生きていることを学び、ガイドは別の場所に住んでいます。いくつかのクリックと数分のスロールの後、あなたは製品に「馴染み」を感じ始めます。 検索エンジン like 彼らはすべてのライブラリの上にグローバルなカタログとなったが、すべての検索の結果は依然として同じだった:ページのリスト。私たちはグーグリングに慣れ、5〜10のタブを開き、手動でさまざまなサイトに散らばった断片から答えをまとめました。 Googleの How AI chatbots broke the old mental model AIチャットボットが古い精神モデルを破った方法 そこで、AIチャットアプリケーションへの大規模なアクセスが到着しました。最初は、おもちゃのように見えました:冗談を言いながら、時には自信を持って間違ったことを幻想することができます。 人々は自分の考えを「2〜3つのキーワード」に圧縮するのをやめた。「靴を買う nyc」の代わりに、彼らは書き始めた:「私は日常の散歩のために快適な靴を必要とし、走るためにではなく、100ドル以下の予算で、NYCのピックアップまたは高速配送で大丈夫です」伝統的な検索エンジンでは、この種のクエリは奇妙な感じです。チャットでは、それは自然な感じです。そして「古いウェブ」の危険な部分は、この時点で、ユーザーはもはや答えがどこから来ているかを気にしません。 以前、ユーザーは「検索エンジンが理解し、半関連リンクを提供するように、これをどのように表現するか」と考える必要がありました。今、質問は、「私は人間にそう説明する方法をどのように説明しますか?」それが「機械に適応する」と「人のように話す」の違いです。 AIがそんなにスマートなのなら、なぜまだWebサイトが必要なのか。 ♪ この考え方を極端に推し進めれば、AIがほとんどの質問に答えることができれば、なぜウェブサイトが必要なのか? もしかしたら、すべてが一つの普遍的なチャットウィンドウに移り、ページ、ナビゲーションバー、着陸レイアウトが初期のウェブデザインの博物館のアーティファクトになるかもしれません。 技術的には、答えはほぼ「はい」かもしれません。チャットインターフェイス内でほぼすべてが起こる世界を想像することは可能です:製品を見つけることからチェックアウトまで、契約を締結し、サブスクリプションを管理する。 しかし、人間の経験とビジネスのレベルで、画像は非常に異なるように見えます。ウェブサイトは機能だけではありません。それはまた、光と音と風景で舞台です。それは、ブランドが独自の言語で話すことができる場所です - 色、構成、アニメーション、視覚的な比を通して。チャットは会議室です。それは明確化、交渉、迅速な質問をするのに最適です。雰囲気とアイデンティティを構築することは恐ろしいです。チャットでは、すべてのブランドはほぼ同じように見えます:テキストバブル、おそらくアバター、少し異なる音色。 企業にとって、これは単なる美学的な悲劇ではありません。信頼、差別化、長期的な関係のリスクです。ビジュアル言語は、真の製品、真のチーム、そしてインタフェースの裏に真のストーリーがあることを示す方法です。 したがって、いや、純粋なチャットは、ウェブサイトを「殺す」ことはありません。これまでページを移動する必要があった大きなタスクを吸収するかもしれないが、それはすべてを置き換えることはありません、なぜなら、人々はまだ製品を「見る」のが好きで、単にそれに「話す」のではなく。 なぜ旧ページベースのWebはAIの世界で破綻するのか 言い換えれば、古い「すべてはページ」のアプローチは、2025年に現実との接触を生き残ることもできなくなります。成熟したSaaS製品を考えてみてください:開発の年数、セクションの数十、ドキュメントページの数百、ブログ記事、ターンページ、オンボードガイド。 しかし、ユーザーの視点から、複雑さが蓄積されます。彼らはどのページが答えを持っているかを知りません。彼らは、10の類似記事のうち、どの記事が最も最新であるかを知りません。彼らは、あなたのブログ、ドキュメント、Changelogに散らばるパーツをどのように接続するかを知りません。彼らは、コンテンツの手動の「統合テスト」を行い、画面をクリックし、精神的に部分的な回答を役に立つものに合併することを強制されます。 AIは、この文脈では、合成器として機能します。それはいくつかのページから意味を引き出し、それらを新鮮で一貫した答えに変えることができます。クラシックなWeb UXは、デザインによってこれを行うことができません。それは「このページを表示する」ではなく「この答えを組み合わせる」の周りに構築されました。しかし、AIチャットにも弱点があります:それはめったに完全な道を示します。 あなたが劇場の比を拡張する場合、伝統的なウェブサイトは、あなたが演奏全体を見るステージです。AIチャットは、自分の言葉で物語を再現する批評家です。時には、それはあなたが望むものだし、時にはそうではない。 新しいインターフェイス:パラレル・エクスペリエンス・ストリーム 新しいインターフェイスは、「角にチャットウィジェットがあるウェブサイト」でもなく、「時々ブラウザのタブでウェブビューを開くチャット」でもありません。 1つのストリームは会話性です。これはあなたが話すことができるAIであり、タスクを理解するだけでなく、URLを提供します。それはパスを提案し、明確な質問を提出し、あなたがダークエンドに突入する前にあなたを警告することができます。もう1つのストリームは視覚的で構造的です:ページ、ダッシュボード、テーブル、マップ、フォーム - 焦点、階層、アクセシビリティ、ブランド表現を必要とするすべてのもの。 重要な転換点は、これらのストリームはもはや「1つずつ」を実行しなくなる — まずチャット、次にUI、次にチャットに戻ります。 彼らは同時に実行することができます。 ユーザーはAIと話し、同時にインターフェイスの進化を見ています。 インターフェイスは何かを示唆し、ユーザーはチャットで彼らが本当に何を意味しているかを明確にします。 対話と視覚層は注意を求めて競い合うのをやめ、同じチームでプレーし始めます。 技術的には、これは私たちをスロットベースのレイアウトや並行ルートに向かわせます:インターフェイスは独立した地域に分割され、それぞれ独自のライフサイクルで、すべてが共有シナリオによって調整 なぜスロットと並列ルートは意味があったのか ある時点で、これは抽象的なデザインの議論ではなくなり、私自身のプロジェクトの一つで具体的な建築問題となりました。 要件はこんな感じでした: 左側に製品認識のAIチャットを維持し、ベクター検索を介して内部ドキュメントや外部の知識にアクセスできます。 右側のページを表示する - 静的マーケティングコンテンツから複雑な認証されたUIまで。 右側のエラーがチャットを殺したり、会話をリセットしたりしないようにしてください。 SEOを保存する:公共のコンテンツは、JS依存のシェルではなく、静的なHTMLとして提供されるべきです。 テストと維持に苦痛なイフレームや脆弱なマイクロフレンドの混乱を避けましょう。 この方程式では、スロットベースのレイアウト(画面上の独立した「ウィンドウ」またはスロット)と並列ルーティング(独立して更新できるルート)が自然な答えとなりました。「ページ」で考える代わりに、「フロー」で考える方がより有用になりました:左スロットは会話のフロー(チャット、auth、アシスタント)、右の静止スロットはJS障害者でさえ機能する公開コンテンツで、右のダイナミックスロットはパーソナライズされ、認証された機能性です。 そこから、新しいアーキテクチャが現れ、AIチャットと古典的なサイトがスクリーンのコントロールのために戦うのをやめました。彼らは、ナビゲーション、レイアウト、ブランドの共有キャンパスによってつながった独自の「キャンパスビル」を得ました。 実際の製品の変化 高レベルのアイデアは素敵ですが、インターフェイスは現実のシナリオで生きたり死んだりします。 ドキュメントと学習製品 伝統的なドキュメンタリーはセクションの森です。ユーザーは答えが「どこか」であることを知っていますが、正確にはどこかではありません。彼らはコンテンツのテーブルをスケッチし、タイトルによって推測しようとし、複数のタブを開いて、ページの正しい組み合わせが最終的にクリックされることを願っています。 新しいインターフェイスでは、ユーザーは「既存のセッションを破ることなく、複数のレンタントアプリで auth トークンを回転させるにはどうすればよいですか?」 AI 層はドキュメントの形を知っています。 電子商取引 ほとんどのオンラインストアは、フィルターに大きく依存します。 ブランド、サイズ、価格、色、材料によってフィルター - 時には密集したサイドバーで一度にすべてをフィルターします。 ほとんどのユーザーはこれらのすべてを満たすことを楽しんでいます。 パラレルストリームの設定では、ユーザーが最初に話します:「私は巨大なロゴなしの黒いスナックを探しています、シティウォーキング用、サイズ10、$100未満です」チャットは、これは特定のカテゴリーにマップし、キャップの下にフィルターを適用し、おそらくブランドの好みを明確にし、そしてビデオスロットを大きな、明確な製品カードで満たします。 B2BおよびAdminパネル ♪ 複雑なB2Bシステムは急激な学習曲線で知られています. 彼らは何十ものスクリーンを持っています. それぞれ何十ものフィールドを持っています. オンボードはしばしば「これらの10のビデオを見てドキュメントを読んで、あなたはそれに慣れるでしょう. それぞれの新しいクライアントは、あなたの内部モデルが彼らの現実世界のタスクにどのようにマッピングするかを理解するための認知税を支払います。 新しいインターフェイスでは、最初のステップが異なる場合があります。ユーザーは、「過去3カ月間に顧客の数が増加したが、平均契約価値は依然として高い顧客を見せてください」と言います。会話層はこれをあなたのデータについてのクエリに変え、視覚側の正しいレポートを開き、基準をどのように解釈したかを明確な言語で説明します。 これがデザイナーにとって何を意味するのか。 デザイナーにとって、この新しいインターフェイスは挑戦と贈り物の両方です。課題は、静的スクリーンマップがもう十分ではありません。今、質問は:会話はどう見えるか? 特定のチャットメッセージを画面の変更にどのように視覚的に接続しますか? この特定のビューが特定の質問の「答え」であることをどのように示しますか? ギフトは、あなたがついにインターフェイスが静的フレームの単なるセットであるふりをするのをやめることができます。あなたは演奏のように体験を指揮することができます: リーダーの声(AI)、舞台(スクリーンとスロット)、そして光と音(アニメーション、ハイライト、文脈マーカー)があります。あなたはプロセスの構造とアクセシビリティを破壊することなく、対話を視覚化する方法を発明することができます。 また、ブランド化の課題もあります:あなたの製品が他の誰もが使用する同じ一般的なチャットバブルに溶け込むのを許さないでください。あなたの製品には、あなたのAIが話す方法を含む個性がまだ必要です。音声のトーン、マイクロコピー、チャットの周りの視覚的なフレームリング、インターフェイスが不確実性やエラーにどのように反応するか - これらはすべてUXの一部になります。 これは開発者にとって何を意味するのか。 開発者にとって、新しいインターフェイスは、「ルートやコンポーネントを構築する」だけの仕事ではないことを意味します。 あなたはフローやスロットの面で考えなければなりません。 インターフェイスのどの部分がナビゲーション独立でなければなりませんか? 他のスロットが崩壊したときにどのスロットが生き残らなければなりませんか? 何が静的で、何がダイナミックで、何がAIによって需要に応じて生成され得るか? また、スロット間のコミュニケーションを設計することも意味します。チャットがページを開くことを許可されるのはいつですか?ページがチャットに質問を引き起こすのはいつですか?サークル依存症やレース条件をどのように回避するかで、体験をシームレスに保つことができますか?チャットウィジェットを各ページに落とすことはもう十分ではありません。あなたは、ユーザーが内部の技術的なシームに気付かずに、対話と視覚的な文脈の間をどのように移動するか、体験自体を構築する必要があります。 テクノロジー側では、これはスロットと並列ルートをうまく処理するツールに向かって、そして「すべてを一度に崩壊させる巨大なSPA」から遠ざかることを意味します。実践では、それはしばしばNext.js App Routerのようなフレームワークに屈することを意味し、独立したレイアウト、並列セグメント、遮断ルート、混合静的/ダイナミックレンダリングを定義することができます。 これがビジネスにとって何を意味するのか ビジネスにとって、新しいインターフェイスは「サイト上のファンティーチャットバブル」ではありません。AIがユーザーとどのように話しているかをコントロールする方法です。すべてを外部システムに残すと、顧客との会話は他人のシェルで起こります:ユーザーは第三者のAIアプリにタップし、そのアプリはあなたのコンテンツのどの小さな部分を表示するかまたはパラフラッシュするかを決定します。 AIを独自のアーキテクチャに組み込むと、いくつかの利点が得られます。あなたは、独自のレイアウトで豊富な静的コンテンツを提供することによってSEOトラフィックを維持します。あなたは、パスがあなたの特定のプロセスを理解するアシスタントによってガイドされているため、変換を増やします、一般的なベストプラクティスではなく。そしてあなたは、AIに新しい概念と言語を教えることによって、新しいユーザーの旅をより速く構築することができます。 新しいインターフェイスには、アーキテクチャ、データの品質、会話デザインへの投資が必要ですが、その見返りとして、あなたの製品は「他人の検索結果のもう一つのリンク」でなくなり、AIとユーザーがあなたの製品の言語で話す環境になります。 リスクと幻想 新しいインターフェイスには独自のがある。最初の幻想は、チャットがすべてを解決するだろうと信じているということです。それはそうではありません。一部のユーザーは単にタップを嫌います。いくつかのシナリオでは、オープンな会話よりも予測可能で高度に構造化されたフォームが必要です。 第2のリスクは、透明性について忘れることである。AIが理由を説明せずにインターフェイスを変更し始めた場合、ユーザーはコントロールを失っているように感じる。良い新しいインターフェイスは、意図と結果の間のリンクを明らかにすべきです。 第三の幻想は経済的である:AI統合を「魔法のコスト節約」と扱う。AIを取り巻くアーキテクチャを再構築することは、短縮ではなく、投資です。悪く行ったことで、複雑で脆弱なコード、混乱するUI、および単一の外部プロバイダーへの依存を残すことができます。慎重に行うことで、ユーザーの摩擦を減らし、新しいビジネスモデルを可能にすることができます。 スロットと並列ルートの時が来たのか? この新しいインターフェイスの時が「正式に」到着したかどうかについて、純粋な「はい」または「ノー」の答えはありませんが、AIが存在しないかのように真剣な製品を設計することはすでに不可能だと感じています。あなたは5〜10年の製品ロードマップを責任を持って計画し、ユーザーが対話だけでなく、ナビゲーションを期待することを学ばなかったかのように行動することはできません。 個人的には、この瞬間は静的サイトからSPAへの移行に似ています。当時、それは「もう一つの技術的トリック」のように見えました。それはパラダイムの転換であることが判明しました。 スロットベースのアーキテクチャ、並行ルート、コンテンツの隣に住むAI層ではなく、上部に薄いウィジェットとして座っている - すべては今でもニッチのように感じます。 しかし、このようにしていくつかの実際のプロジェクトを構築すると、戻るのは困難になります。 今、最も簡単な実用的なステップは、「ページ対チャット」の観点で考えるのをやめ、「同じ画面で共存する必要があるストリーム」の観点で考え始めることです。