本文へスキップ

AI・生成体験

生成の状態と根拠を伝える、AIプロダクトのUI。

生成の状態と根拠を伝える、AI プロダクトの UI のカテゴリ。生成中に外周を回る光の枠、「4秒 思考しました」から展開する思考ステップ、空のチャット画面に並べるプロンプト候補チップの3種がある。原則はドハティ閾値。生成は数秒かかることが普通なので、「受け付けた」「考えている」「答え始めた」の各段階を切れ目なく見せないと、利用者は止まったと判断して再送信する。ストリーミング表示や思考の開示は演出ではなく、この待ち時間を埋める仕組みとして引く。

関わる原則: ドハティの閾値3件

使い分け空の画面には ai-prompt-suggestions、生成中は ai-glow-border か feedback の ai-typing-indicator、根拠を見せるなら ai-thinking-steps。3つは同時に使える（開始前・生成中・生成後の順）。

まず見る3件

  • クリック

    思考ステップ開示

    Chain-of-Thought Disclosure

    「4秒 思考しました」の折りたたみをタップすると、AIの推論ステップが1つずつチェックされながら展開する。ChatGPT/Claude系の定番。

    • 初期状態は畳んでおく。推論の過程は答えの後に「なぜ」を確かめる人だけが読むので、縦の情報量を先に取らせない
    • ステップは 480ms 間隔で1つずつ出し、0.6 拍遅れてチェックが点く。同時に全部出すと「考えた順序」が伝わらない
    • 所要秒数をラベルに入れる（「4秒 思考しました」）。時間があると、開かなくても処理の重さが分かる
    • JS
    コードを見る →
  • クリック

    生成中オーラ枠

    AI Generating Glow Border

    AIが応答を生成している間、カードの外周を虹色グラデーションの光がゆっくり回る。完了すると光が静まり、回答が現れる。

    • 光は外周だけを回す。conic-gradient の角度を @property でアニメーションし、内側は白いカードで覆う二重構造にする
    • 1周 2.4 秒は「考えている」と伝わる遅さ。速いと処理中のスピナーに見え、AI の思考という文脈が消える
    • 完了は光を止めて本文に置き換えるだけ。派手な完了演出を足すと、毎回の応答で待たされる
    • JS
    コードを見る →
  • クリック

    プロンプト候補チップ

    Prompt Suggestion Chips

    空のチャット画面に候補チップを並べ、タップすると入力欄に流し込まれ、AIの返答が1文字ずつストリーミング表示される。空白画面の離脱対策。

    • 候補は3つまで。動詞で始まる短い文（「文章を要約」）にすると、押した結果が想像できる
    • 押したチップの文言はまず利用者の発言として吹き出しに出す。入力欄に入れるだけだと、送信したのか分からない
    • 返答は 24ms／文字で流す。一括表示より「いま生成している」感が出るが、reduced-motion では一括にする
    • JS
    コードを見る →

使い分け表

パーツ操作技術向く場面状態
生成中オーラ枠
AI Generating Glow Border
クリックJSAI が応答を生成している間のカード・スケルトン行と外周の光で「考えている」を示す画面default / disabled / loading / success
思考ステップ開示
Chain-of-Thought Disclosure
クリックJSAI チャットの「N秒 思考しました」開示・推論ステップを順に見せたい折りたたみdefault / active
プロンプト候補チップ
Prompt Suggestion Chips
クリックJS空のチャット画面で最初の一手を示す候補チップ・タップで入力に流し込みストリーミング返答を見せる導入default / hover / active / loading / empty

すべての見本（3件）

  • クリック

    生成中オーラ枠

    AI Generating Glow Border

    AIが応答を生成している間、カードの外周を虹色グラデーションの光がゆっくり回る。完了すると光が静まり、回答が現れる。

    • JS
    コードを見る →
  • クリック

    思考ステップ開示

    Chain-of-Thought Disclosure

    「4秒 思考しました」の折りたたみをタップすると、AIの推論ステップが1つずつチェックされながら展開する。ChatGPT/Claude系の定番。

    • JS
    コードを見る →
  • クリック

    プロンプト候補チップ

    Prompt Suggestion Chips

    空のチャット画面に候補チップを並べ、タップすると入力欄に流し込まれ、AIの返答が1文字ずつストリーミング表示される。空白画面の離脱対策。

    • JS
    コードを見る →