Smashing Magazine が 2026 年 5 月 1 日に Designing Stable Interfaces For Streaming Content を公開しました。LLM のトークンが少しずつ流れてくる **「ストリーミング応答」を表示する UI で、「文字が動く」「ボタンが消える」「レイアウトが跳ねる」**といった体験をどう設計レベルで防ぐかが体系化されています。
弊社では、受託で AI チャット / 検索 / カスタマーサポートアシスタントを組む案件が急増しており、「機能は動くが UI が落ち着かない」という体験課題を頻繁に目にします。本記事では、ストリーミング UI を 「壊れない」設計に落とすためのパターン、契約条項、運用 KPI を整理します。
何が “Stable Interface” なのか — 4 つの構造原則
Smashing の記事から、Stable Interface（安定インタフェース）の定義を受託で扱える形に整理しました。
| 原則 | 内容 | 受託案件での意味 |
|---|---|---|
| 空間予約 | 表示前に高さ / 幅を確保 | レイアウトシフトを起こさない |
| 段階的開示 | 文字 / 画像 / アクションの順で出す | 視線の動きを安定させる |
| アクション保留 | 完了までボタンを物理的に固定 | 誤クリック / 二重送信を防ぐ |
| 失敗の可視化 | 中断 / 切断を即時に伝える | ”考え中” の永続化を防ぐ |
特に 「アクション保留」は 「LLM が回答を吐ききる前にユーザーがコピーボタンを押し、空のテキストがクリップボードに入る」事故を構造的に防ぐ最重要原則で、これを抜くと UI が 「動くがゴミがコピペされる」評価を受けます。
これは OpenAI WebSocket Execution Mode で組むリアルタイムエージェント で扱った “中間状態の通知” と同じ思想で、「速くなった分、UI 設計でユーザーをサポートする責務が増える」構造です。
受託で組む Stable Interface 4 階層
弊社では、受託案件でストリーミング UI を実装するときに以下の 4 階層で設計します。
[Tier 1: 空間予約]
├ 想定行数で min-height を確保
├ コードブロックは max-height + scroll
└ 画像 / 表は aspect-ratio を先に設定
[Tier 2: 段階的開示]
├ ストリーム開始 → "考え中" スケルトン
├ 第 1 文完了 → 本文を表示
├ 完了 → アクション群を表示
└ アクション群はフェードイン（瞬間移動禁止）
[Tier 3: アクション保留]
├ コピー / 共有 / 再生成は完了まで disabled
├ disabled 中は理由をツールチップで提示
└ 完了時に enabled へ視覚的に切替
[Tier 4: 失敗可視化]
├ 切断 / タイムアウトを 5 秒以内に通知
├ 部分的な応答でも「ここまで取得済み」と提示
└ 再試行ボタンを必ず提供特に Tier 1 の空間予約は CSS の min-height / aspect-ratio だけで 80% の体験改善が出る最もコスパの良い対策で、実装着手時に Layout 設計と一緒に決めるのが事故が少ない順序です。
これは Core Web Vitals 完全ガイド で扱った CLS（Cumulative Layout Shift）対策の延長線にあり、「ストリーミング UI は CLS を最も悪化させる新型レイアウト」として向き合う必要があります。
受託契約に書く「ストリーミング UI 品質条項」
ストリーミング UI を含む受託案件で契約に明記すべき条項です。
| 条項 | 内容 | 顧客が確認すべきこと |
|---|---|---|
| CLS 上限 | ストリーミング中の CLS スコア | 0.1 以下が一般目安 |
| 応答開始 SLA | First Token までの時間 | 業務上の許容ライン |
| アクション保留範囲 | 完了まで操作不可にする要素 | UX 設計の合意 |
| 失敗通知 SLA | 切断検知から通知まで | エンドユーザー体験 |
| 再試行ポリシー | 自動 / 手動 / 回数 | API 課金との整合 |
| 計測ツール | RUM / Lighthouse / 自社計測 | ダッシュボードの提供 |
特に **「CLS 上限」は最初に明文化しないと、「機能は動くが Lighthouse スコアが赤」と納品後に揉めます。「ストリーミング中の CLS は 0.1 以下」**といった具体数値で合意します。
これは ガス代を下げる Web 受託のパフォーマンス契約 と同じ思想で、「動く」と「ユーザー体験として許容できる」の境界を契約レベルで握ります。
価格モデル — Stable Interface 受託パッケージ
ストリーミング UI を含む AI Web アプリの受託は、以下のレンジで提供しています。
| プラン | 初期 / 月額 | 対象 | 内容 |
|---|---|---|---|
| SI Lite | 80 万円 / 12 万円〜 | 既存 AI チャットの改善 | Tier 1-2 + 月次 CLS レポート |
| SI Standard | 280 万円 / 30 万円〜 | 新規 AI Web アプリ構築 | Lite + Tier 3 + アクション設計 |
| SI Enterprise | 700 万円〜 / 75 万円〜 | 業務アシスタント基幹 | Standard + Tier 4 + RUM 監視 |
特に SI Standard は 「自社で AI チャットを内製で立ち上げたが、UI のクオリティが PoC 止まり」という中堅企業の典型課題に刺さるレンジです。
ハマりやすい 5 つの落とし穴
最後に、ストリーミング UI を受託で組むときに踏みやすい落とし穴を共有します。
落とし穴 1: 文字が出るたびに高さが伸びる
min-height を設定しないと、1 行ずつ表示エリアが伸びて画面がガクガク動きます。最低 5 行分の min-heightを予約します。
落とし穴 2: コピー / 共有ボタンを最初から表示
完了前にユーザーがクリックすると 空文字 / 途中文字がコピーされます。完了まで disabled + aria-disabled を必ず付与します。
落とし穴 3: 再生成ボタンを常時表示
再生成ボタンは 完了後にだけ意味を持つため、ストリーミング中に表示すると誤操作で API 課金が二重発生します。完了後にフェードインで出します。
落とし穴 4: 切断時に “考え中” のまま固まる
WebSocket / SSE が切れたとき スピナーが永久に回るだけだと、ユーザーは 「壊れた」と判断して離脱します。5 秒以内に「接続が切れました」+ 再試行ボタンを出します。
落とし穴 5: 多言語の文字幅変化を無視
英語 → 日本語に切り替えると 同じトークン数でも幅が大きく変わります。min-width も予約して右側のサイドバーが押し出されないようにします。
まとめ — 「速くなった」分の UX 責務を取りに行く
LLM の応答速度は WebSocket / Edge / モデル小型化で 着実に速くなっています。一方で、速くなった分だけ UI がガクガクする / ボタンが消える / 切断が見えない といった体験課題が目立ちます。受託 Web の仕事は、「動く」から 「速くなっても落ち着いて使える」へと進化する必要があります。
弊社では、AI 応答 UI を Stable Interface 思想で設計する受託パッケージを、SI Lite / Standard / Enterprise の 3 段階で提供しています。「AI チャットを内製したが UI が落ち着かない」「ストリーミング応答で Lighthouse スコアが落ちた」というご相談は お問い合わせフォーム からお気軽にどうぞ。
