1.0UX TIMEShttps://uxdaystokyo.com/articles菊池 聡https://uxdaystokyo.com/articles/author/satoshi-kikuchi/rich600338<blockquote class="wp-embedded-content" data-secret="x6yY0zJpFC"><a href="https://uxdaystokyo.com/articles/design-ui-patterns-for-ai-engineers/">AIプロダクトのUI設計思想ー基本からRAGのデザイン利用まで</a></blockquote><iframe sandbox="allow-scripts" security="restricted" src="https://uxdaystokyo.com/articles/design-ui-patterns-for-ai-engineers/embed/#?secret=x6yY0zJpFC" width="600" height="338" title="“AIプロダクトのUI設計思想ー基本からRAGのデザイン利用まで” — UX TIMES" data-secret="x6yY0zJpFC" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe><script> /*! This file is auto-generated */ !function(d,l){"use strict";l.querySelector&&d.addEventListener&&"undefined"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!/[^a-zA-Z0-9]/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret="'+t.secret+'"]'),o=l.querySelectorAll('blockquote[data-secret="'+t.secret+'"]'),c=new RegExp("^https?:$","i"),i=0;i<o.length;i++)o[i].style.display="none";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute("style"),"height"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):"link"===t.message&&(r=new URL(s.getAttribute("src")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener("message",d.wp.receiveEmbedMessage,!1),l.addEventListener("DOMContentLoaded",function(){for(var e,t,s=l.querySelectorAll("iframe.wp-embedded-content"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute("data-secret"))||(t=Math.random().toString(36).substring(2,12),e.src+="#?secret="+t,e.setAttribute("data-secret",t)),e.contentWindow.postMessage({message:"ready",secret:t},"*")},!1)))}(window,document); //# sourceURL=https://uxdaystokyo.com/articles/wp-includes/js/wp-embed.min.js </script> https://uxdaystokyo.com/articles/wp-content/uploads/2025/11/ai-product-ui-design-philosophy.jpg19201080デザイナーがAIに関するリテラシーを高めるのに役立つ、指針・パターン・ペルソナをまとめたリファレンス記事です。「Designing for AI Engineers」著者：モデラーデザイン：イブ・ワインバーグ（Eve Weinberg）2025年2月9日 私は（AIアプリケーションの構築、最適化、デプロイを迅速に行うための高性能推論エンジンを提供している）Modular AIのデザイン責任者として、今年はAIプロダクトのUIやワークフローをゼロから多数立ち上げています。長年開発者向けのデザインをしてきましたが、個人的にはAI特有のトピックを素早く学び、ペルソナを作り上げる必要があったため、自分なりに確立したいくつかのベストプラクティスと主要な参照資料を共有したいと思います。 UIデザインの基本原則 情報を凝縮して提示することは歓迎されます。データサイエンスやフィンテックといったB2B業界と同様に、これらのペルソナは情報量が多いことを受け入れます — ただし明確な階層構造で設計されていることが前提です。 ですから、余白を減らしましょう！ 解析済みのメタデータが最もわかりやすいです。メタデータを抽出して検索・フィルタ・ソート可能にすることが重要です。テーブル、サイドドロワー、タグ付けシステム — これらが整備すべき主要なデザインシステム要素です。 ヤコブの法則を忘れないでください — ユーザーは自分のサイトよりも他のサイトで過ごす時間の方が長いのです。 Hugging FaceやOpenAIのようなAI分野の強力なリーダーが存在します。もし彼らがパターンを確立していて、逸脱する強い理由がなければ、それに従いましょう。 わかっています、これは第一原理主義に反するかもしれませんが、第一原理を貫くべき時と場面があることも事実です。その線引きは、あなたのチームやロードマップで判断してください。 開発者向けUI設計の優れた参考は GitHub のデザインシステムです。以下は、開発者ペルソナに特化した彼らの原則です。 速く動作するようになって初めて「完全に出荷された」と言える。 何かを追加すれば、他のすべての純度が薄まる。 純粋性よりも実用性を優先する。 単純であることより、親しみやすいことのほうが良い。 中途半端は何もしないのと同じくらい悪い。 フロー（作業の流れ）を促進する。 機能よりもフォーカス（集中）を優先する。 これらの原則を踏まえた上で、私たちのチームが今年リリースした主要なインターフェースをいくつか紹介します。私たちのチームは4人（デザイナー2名、開発者2名）であり、スピード重視のスタートアップである点に留意してください。 私たちのデザインはすべてまずMVPとして公開し、その後ライブで反復し、既存システムを活用して0から1に到達し、できるだけ早く外部の実証を得る形で構築しています。デザインはチームスポーツです。 これから取り上げる画面は次のとおりです。 チームが今年設計した主要なインターフェースの概要 1：LLMとのチャット（簡易マーケティングページ版） Modular AIのチャット画面（初期状態） 一般のエンドユーザーとして、私たちは今やチャットインターフェースに非常に馴染んでいます。開発者がLLM（大規模言語モデル）とチャットする体験は、ChatGPT、Duck Assist、PerplexityのようなAIプラットフォームでのエンドユーザー体験とほとんど同じです。重要なのは、できるだけクリーンにし、速く簡潔な回答を提供することです。 主な違いは、AI開発者がモデルを速度、上に構築しやすさ、互換性、デプロイのしやすさといった観点でも評価する点です。 従来の検索エンジンのようにシンプルに保ちながらも、ドキュメントへのリンク、モデルの速度を示すベンチマークデータ、トークン当たりのコストなど、内部で何が起きているかを示す控えめな第2層を提供してください。以下は、Modularでそれに対して私たちが行った解決方法です。 私たちが使用したUIフレームワーク：Gradio、Mantine、Tailwind CSS 画面1 — シンプルな導入画面 Modular AIのチャット画面（初期状態） シンプルな導入画面で、どのモデルか、ハードウェア、処理トラフィックを示します。もちろん、すべてライト／ダークモード対応です。 以下はチャットを開発者コンソールに埋め込んだダークモード版です。 画面2— ベンチマーク、チュートリアルリンク、コード、デプロイ手順 Modular Developer Console内に埋め込まれたLLMチャットUI ベンチマーク、チュートリアルリンク、コード、デプロイ手順などを表示します。 チャット応答結果と開発者向けリンクを備えたUI 画面3 — 埋め込みバージョン Modular Docs内でRAGモデルMAXと対話するチャット画面 このバージョンでは、RAG（Retrieval-Augmented Generation）を用いて、MAXを私たちのドキュメントに特化して学習させました。 参考例：ChatGPT、Perplexity、Groq、HuggingFace chat など。 2：モデルリポジトリ AI開発者が行うべき最も重要なことの一つは、生成AI（GenAI）モデルを評価することです。これはモデルリポジトリ — 「モデルガーデン」「モデルライブラリ」「モデルハブ」とも呼ばれる場所 — を検索することから始まります。 マーケティングやSEOの観点から、ここは通常ログアウト状態でも利用できるようにし、プラットフォームが対応する全モデルを示して、より真剣にモデルを試したいユーザーにログインを促すことが主な目的です。 私たちのモデルリポジトリは builds.modular.com で公開されています。ここで最も重要な機能は、基本的に検索とフィルタです。 数百〜数千に及ぶ可能性のある大量のモデル群から、ユーザーが欲しいものを確実に見つけられるようにする必要があります。 Modular AIのモデルリポジトリ（Model Repo）初期画面 モデル詳細ページ（モデル詳細ページ） このページでは、各モデルにどれだけのバリアントがあるか、ローカルで素早く実行する方法、必要ならクラウド上のGPUにデプロイする方法をユーザーに伝えます。 Modular AIのモデル詳細UI。ローカル実行とクラウドGPUデプロイを支援 モデルのパラメータサイズ、量子化（クオンタイズ）、ハードウェア互換性など、興味深い技術的詳細もあります。しかし最終的には、ゲシュタルト的なクラスタリングと適切な階層を作ることが重要です。 Modular AIで試作されたモデルリスト画面のUIバリエーション ここでの主要参照は、Hugging Face（この分野のリーダーであるため）、Kaggle（活発なコミュニティがあるため）、Together AI（エンタープライズ向けであるため）、Replicate（1日あたり8万アクセスは多い、という理由）です。 Hugging Face（ハギングフェイス）：この分野のリーダーとして明確な標準を確立している。 Kaggle（カグル）：活発なコミュニティがあり、参加型の体験設計が優れている。 Together.ai（トゥギャザー・エーアイ）：エンタープライズ志向で堅牢な情報設計が特徴。 Replicate（リプリケート）：1日あたり8万件以上のアクセスを誇る人気プラットフォーム。 すべての成功したUIと同様に、ここでもユーザーのマインドセットを忘れないでください。AI開発者は、モデルがどのタスクを完遂できるか、モデルのサイズ、性能、そして誰が作ったかといった観点でモデルを考えています。 3：Playground（プレイグラウンド） プレイグラウンドとは、本番システムや運用環境に影響を与えるリスクなしに、実験・テスト・学習を行うために設計された環境を指します。 AI開発者向けには、特にモデルの試用、プロンプトのテスト、パラメータの微調整などを、大がかりなインフラを必要とせずに行える環境を意味します。私たちのものはちょうど稼働を始めたばかりなので、主要な機能について述べ、いくつか参考例を示します。 主な機能： ログインと請求（支払い）接続。 小さな注意点ですが、AIコンピューティングを実行するため、ユーザーは通常クレジットカードを接続する必要があります。 モデルのパラメータを調整するスライダーや、モデル自体を切り替える機能。 従量課金（Pay-as-you-go）方式の料金設定。 これは、コンソール体験全体へと自然につながります。 4：開発者コンソール レイアウトと情報アーキテクチャの観点では、これは他のデスクトップコンソールと同様です。私たちは Tailwind、Mantine、Chart.js を使用して作成しています。 ここでの楽しいUI機能はデータモニタリングのダッシュボードです。エンタープライズ向けダッシュボードを設計したことがあるなら、あとは本当に同じです — ロールベースのアクセス制御、請求、組織階層（メンバーが他のメンバーを招待できる）、通知、設定などです。 5：ドキュメント さて、基本中の基本 — ドキュメントについて詳しく見ていきましょう！みんなが大好きな（？）ドキュメント設計です。こちらが私たちのものです。 実はこれは、私がドキュメントサイトのデザインを一から全面的に担当した初めての経験でした。 私たちは Docusaurus を使用し、Algolia の検索を組み合わせています。Algoliaはデフォルトでも素晴らしいUIを備えています。 情報アーキテクチャに関してはいくつかのアプローチを議論し、次の2つの大きなコンセプトに絞りました。 ユーザーのJTBD（Jobs To Be Done）に従う — ユーザーがどの順序でこれらのタスクを達成するかを基準にする。私たちの場合は次の順です：ローカルでテスト → サーブ（提供） → クラウドへデプロイ → 監視 → スケール。 製品のアーキテクチャに従う—私たちの場合は、低レベルのGPUプログラミングからクラウドでの自動スケーリングまでカバーするプラットフォームがあるため、この分類法も魅力的です。 どちらを選ぶにせよ、これを再確認するランディングページを用意することが重要です。最も閲覧されるのは「クイックスタート」ページです（驚くべきことではありません）。私たちはこのページを、より早い競争（※素早い導入）と高い完了率を得るために継続的に最適化しています。 いくつかの参考： Algoliaの検索は素晴らしいです。私たちの場合、以下のように表示されます。 6：Recipes（レシピ） & コード "Recipes"（もしくは"Cookbooks"）というのは、手順を順を追って示すためのやや遊び心のある、しかし標準化された呼び方です。最もインタラクティブな形ではノートブックで、各セクションが実行可能なコードになっています。 もっとも単純な形では、コピー＆ペーストできるコードスニペット付きの一連の手順です。前述の通り私たちは非常に反復的に構築するため、MVPは実際にはGitHubのコード例をレンダリングし、右側にメタデータを表示するだけのものです。 このオーディエンス（AI開発者）には、デザインはシンプルでクリーンであればあるほど良いと感じます。コンテンツ自体が非常に密であるため、デザインが目立ちすぎないほうが良いのです。 これらの記事向けのデザインシステムの大部分はコードのレンダリング方法に関するものであり、ライト/ダークモードを整然と処理するシステムが重要になります。 私たちはこのために Mantine を使い、カスタムカラーを設定しています。また、CLIのカラースキームに関する確立されたベストプラクティス（例：記事のリンク）に頼ることができます。 そして、CLIではASCIIアートや明確な進捗バーなどで遊び心を持たせることも忘れないでください！ CLIのUXに関しては、エンジニアのチームメイトにNNGの基本10原則を教えようとしており、最もよく使う原則は「システム状態の可視化」です。 次は何を作るか？ 私は今後さらに多くのワークフローを構築して共有することにとてもワクワクしています。次はエージェント駆動のワークフローとクラウド監視ダッシュボードに注力したいと思っています。 ツール n8n からの 2 つの「ローコード」エージェント ワークフロー イメージ。 AIエンジニアのペルソナ 参考までに、私がModular向けに作成したペルソナの一般化バージョンを示します。現時点での我々のターゲットは「ソリューションビルダー」です。 これからも開発の進化を続けていきます。次の展開をぜひ楽しみにしていてください。読んでいただき、ありがとうございました。— Eve（イブ） AIとUXをもっと深く理解するワークショップに参加しませんか？ UX DAYS TOKYO が主催する 「Smashing Magazine × AI ワークショップ」 では、AI時代のデザイン思考とユーザー理解を、一歩進めるための実践的な知見を得ることができます。 この記事で紹介された考え方を取り入れることで、AIを扱うデザイナーやリサーチャーとして重要な “人の特性” に対する洞察力を深められます。 自分自身やチームメンバーの思考スタイル・行動スタイルを把握して、対話や協働を最適化 ユーザータイプを見極め、AIプロダクトのリサーチや設計に活かす 直感型、分析型、構造型…異なる特性の混在が生む強みを活かして、創造性と効率を両立する さらに、モデラーデザイン責任者の イブ・ワインバーグ氏が語ったAIエンジニア向けUIパターン などの実践例を学ぶことで、AI製品をデザインする際の具体的なUI原則やユーザー視点を体得できます。 このワークショップは、AIとUXを融合させたいデザイナー、プロダクトマネージャー、リサーチャー、さらにはAIを使ったプロダクトを構想し始めた方にとって、非常に価値のある時間になるはずです。 今こそ、自分の思考特性を武器に、AI時代のUXをデザインする力を身につけましょう。 日程: 2025年12月1日（月）〜 5日（金）時間: 各日 18:00–20:30（日本時間）形式: オンライン（通訳付き）総時間: 12.5時間（2.5h × 5日） 詳細・お申し込み：https://uxdaystokyo.com/smashing-magazine/ai-workshop/