AIの「考え中」をどう動かす？AIcssのコードから増やす、UI表現の引き出し

AIに仕事を頼んだあと、画面に「・・・」だけが出ている。

裏では資料を探しているのか、文章を作っているのか、それとも確認を待っているのか。利用者には分からない。

そこで面白い手がかりになったのが、Kevin Kaldorさん（kvnkld）のAIcssだ。AIエージェント向けの14コンポーネントがMITライセンスで公開され、考え中、推論、生成、回答、承認といった状態ごとに、違う動きが使われている。

この記事では部品を順番に紹介しない。公開コードを観察しながら、AIがこんな状態の時は、こんな動きで表現できるという引き出しに変えてみる。

AIの状態は、同じローディングでは伝わらない

動きには意味がある。

• 光が表面を流れると「まだ形になる前」に見える
• 複数の点が周回すると「いくつかの経路を探索中」に見える
• 項目が順番に現れると「工程が前へ進んでいる」と分かる
• 文字が増えると「回答が今届いている」と分かる
• カードが現れて動きを止めると「あなたの判断待ち」に変わる

大事なのは、AIらしい装飾を足すことではない。利用者が今の状態を予測できるようにすることだ。

まず、7つの状態を同じ画面に置いて比べてみる。比較しやすいように一部は繰り返しているが、実際の画面では状態が変わった時だけ一度動かす。

以下の7例は、CSSで見た目と動きを作り、JavaScriptで「開始・完了・停止」という状態を切り替えている。ボタンを押すと、同じ場所で変化を試せる。

こんな時1：まだ答えの形がない → Shimmer

AIが依頼を読み、答えを組み立てている。まだ成果物は見せられない。

この時は、文字の表面を光が横切るShimmer（シマー）が合う。AIcssのThinking Stateも、文字へグラデーションを重ね、背景位置をゆっくり移動させている。

「依頼を読む」は答えを出す前の短い状態だ。Pulseで処理の継続を示し、Shimmerでまだ言葉が固まっていないことを見せる。読み終えたら両方を止め、完了表示へ切り替える。

.thinking {
  color: transparent;
  background: linear-gradient(90deg, #999 35%, #ddd 50%, #999 65%);
  background-size: 280% 100%;
  background-clip: text;
  animation: shimmer 2.25s ease infinite;
}

ただし、Shimmerが伝えられるのは「処理が続いている」までだ。進捗率や完了時刻まで分かるようには見せない。

こんな時2：複数の手がかりを探索中 → Orbit

検索、比較、候補の検討。AIが一方向ではなく、複数の経路を回っている時がある。

中心の周りを点が巡るOrbit（オービット）なら、その並列感を表現できる。単純な回転ローダーより、「中心にある問いを、複数の視点が調べている」という関係が生まれる。

次の見本では、公式資料、事例、コードという3方向を同時に探す。発見後はOrbitを止め、結果を同じ場所にRevealする。探索中と発見後の違いが一目で分かる。

ここで気をつけたいのは、点の数を実際のエージェント数に見せないことだ。3つの点が3つの処理を意味しないなら、進捗表示ではなく雰囲気を伝える補助表現として使う。

こんな時3：考えた道筋を順に見せる → Reveal + Stagger

推論の全文を一度に開くと、画面が急に重くなる。

要素を少しずつ現すReveal（リビール）と、複数項目を時間差で出すStagger（スタガー）を組み合わせると、「読み取る → 照合する → まとめる」という順序が見える。

AIcssのThinking + ReasoningやTask Listにも、内容を開閉するCollapseと、項目を順に見せる考え方がある。長い内容はdetailsで畳み、見たい人だけ開ける形が自然だ。

ここでは利用者がボタンを押した時だけ推論を開く。3項目をStaggerで順にRevealし、閉じる時はまとめて消す。勝手に何度も再生しない。

動かすのは最初の登場だけでいい。読み始めた文章を何度も消して出し直すと、理解を邪魔する。

こんな時4：結果の形は決まったが、中身がない → Skeleton

画像、表、カードを生成している時は、完成後の大きさだけ先に分かることがある。

その輪郭を薄い面で確保するのがSkeleton（スケルトン）だ。上をShimmerが一度ずつ通ると、空白ではなく生成中だと分かる。レイアウトが先に固定されるため、完成時の画面のずれも減らせる。

生成前後でカードの大きさは変えない。Skeletonと完成カードを同じ場所に重ね、Crossfadeで渡す。これが「待っていたものが、そのまま完成した」と感じるContinuity transitionになる。

丸いローダーとの違いは、待っているものの形が見えることだ。画像なら画像の比率、表なら行、文章なら数本の線を置く。実物と違う骨格を出すと、かえって期待を裏切る。

こんな時5：回答が今、届いている → Typewriter

最初の文字が届いたら、待機は終わっている。

文字を順に増やすTypewriter（タイプライター）と末尾のCaretは、「回答を受信中」という状態を伝える。AIcssのStreaming Textでは、文字が少しずつ増え、処理中はカーソルを点灯し、止まった時に点滅へ切り替える。

CSSだけで幅を伸ばすと、実際には届いていない文字まで演出で見せてしまう。次の例はJavaScriptが文字列を一文字ずつ追加する。最後まで届いた時だけdoneへ変え、Caretを点滅させる。

ここは速度が重要だ。一文字ずつ演出のために遅らせると、AIではなくUIが利用者を待たせる。届いた文字はすぐ表示し、完了したらカーソルを消して普通の文章へ戻す。

こんな時6：工程が一つ終わった → Number ticker + Continuity

「1 / 3」が「2 / 3」へ変わる時、数字だけを瞬間的に置き換えるより、短いNumber tickerで変化を知らせると気づきやすい。

同時に、未完了の丸をチェックへ変え、進捗リングを伸ばす。前の状態と次の状態を見た目でつなぐContinuity transitionになる。

ボタンを押すたび、JavaScriptが本当に1工程ずつ進める。数字はTabular numbersで幅を固定し、更新時だけNumber tickerを一度動かす。完了項目は止まり、次の項目だけが現在地になる。

ここでは祝うような大きな演出はいらない。小さく一度だけ動き、その後は止まる。完了した項目まで動き続けないことが、進行中との違いになる。

こんな時7：AIでは決められない → 動きを止めてApprovalへ

公開、送信、削除、購入。最後の判断を人へ返す場面では、動きの役割も変わる。

AIcssのApproval Cardは、カードを少し下からRevealし、質問と選択肢へ注意を移す。ボタンを押した瞬間は、少し縮むPress feedbackで入力を受け取ったことを返す。

承認待ちでは動くローダーを置かない。選択後はJavaScriptがapprovedかstoppedへ状態を変え、結果をその場へ残す。見本なので実際の保存は行わない。

重要なのは、その後だ。承認待ちになったら、ShimmerやOrbitを止める。AIがまだ勝手に処理しているように見せず、「次に動かすのはあなた」と静止で伝える。

自動承認までの時間がある場合だけ、段階的に変わるStepped animationで残り時間を見せる。時間制限がないのにカウントダウン風の動きを置いてはいけない。

動きを選ぶ時の3つのルール

1. 状態が変わった時だけ動かす

動きは飾りではなく、変化の通知だ。「開始した」「一つ終わった」「人の判断へ渡った」の境目に置く。

2. 表示と実際の処理を一致させる

検索していないのに「検索中」、保存していないのに「保存完了」と出さない。表現が豊かになるほど、嘘も強く見える。

3. 動きを減らしても意味が残るようにする

prefers-reduced-motionではアニメーションを止める。その状態でも、文言、色、形、順序だけで「考え中」「完了」「確認待ち」が区別できるようにする。

AIcssから借りたいのは、部品より状態の描き分け方

AIcssを見ると、AIのUIは「ローディングを一つ選ぶ」話ではないと分かる。

まだ形がないならShimmer。探索ならOrbit。順序ならRevealとStagger。生成物の場所が決まったらSkeleton。回答が届けばTypewriter。工程が終わればNumber ticker。人の判断を待つなら動きを止めてApprovalへ渡す。

この対応表があるだけで、AIへUIを作らせる時の指示も具体的になる。

たとえば「いい感じに動かして」ではなく、「探索中なので3つの候補が中心の問いを回るOrbitにする。結果が決まったら一度だけCrossfadeして止める」と頼める。

表現の引き出しが増えるとは、派手なエフェクトを増やすことではない。いま何が起きているかに、ふさわしい動きを選べることだ。

参照元

• AIcss公式サイト
• AIcss公式GitHub
• Thinking State
• Thinking + Reasoning
• Orbs
• Streaming Text
• Task List
• Approval Card

※記事内の見本は、AIcssでMIT公開されている実装を観察し、動きの考え方をWordPress用の独自HTML/CSSで再構成したものです。