思考ステップ開示
「4秒 思考しました」の折りたたみをタップすると、AIの推論ステップが1つずつチェックされながら展開する。ChatGPT/Claude系の定番。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- AI チャットの「N秒 思考しました」開示
- 推論ステップを順に見せたい折りたたみ
- 初期は畳んで縦の情報量を抑えたい応答
- 避ける場面
- ステップが1つしかない応答
- 常に開いておきたいログ（通常のリスト）
- 構成要素
- 開閉ボタン（ラベル・矢印）
- ステップリスト
- ドット（チェック）
- もう一度ボタン
- 持っている状態
- 通常
- 押下中
- キーボード
Tab で開閉ボタンへ、Enter／Space で展開・折りたたみ。「もう一度」も Tab で到達し Enter で再生
- 支援技術
開閉は button＋aria-expanded＋aria-controls（disclosure）、矢印は aria-hidden。全ステップ表示後に隠し aria-live=polite で件数を通知。reduced-motion では間隔を 120ms に詰める
- 動き
各ステップ 480ms 間隔で 300ms ease のフェード＋4px 上昇、0.6拍後にチェック 250ms。reduced-motion で 120ms 間隔
デザインの要点
- 初期状態は畳んでおく。推論の過程は答えの後に「なぜ」を確かめる人だけが読むので、縦の情報量を先に取らせない
- ステップは 480ms 間隔で1つずつ出し、0.6 拍遅れてチェックが点く。同時に全部出すと「考えた順序」が伝わらない
- 所要秒数をラベルに入れる（「4秒 思考しました」）。時間があると、開かなくても処理の重さが分かる
実装メモ
「Thought for N seconds」を開くと推論ステップが順に現れ、少し遅れてチェックが点く演出です。ChatGPTやClaudeなどのAIチャットで定番化した「思考の可視化」パターンで、初期状態を折りたたみにして縦の情報量を抑えます。ステップの内容・所要時間はダミーで、実運用ではモデルの中間出力やツール実行ログを流し込みます。prefers-reduced-motion では間隔を詰めて即時に近く表示します。
コード（コピーして使えます）
<div class="ts-wrap">
<button class="ts-summary" id="ts-summary" type="button" aria-expanded="false" aria-controls="ts-list">
<span class="ts-spark" aria-hidden="true">✦</span>
<span class="ts-label" id="ts-label">4秒 思考しました</span>
<span class="ts-caret" aria-hidden="true">▸</span>
</button>
<ul class="ts-list" id="ts-list" hidden>
<li class="ts-step"><span class="ts-dot" aria-hidden="true"></span>質問の意図を整理</li>
<li class="ts-step"><span class="ts-dot" aria-hidden="true"></span>関連する情報を収集</li>
<li class="ts-step"><span class="ts-dot" aria-hidden="true"></span>候補となる回答を比較</li>
<li class="ts-step"><span class="ts-dot" aria-hidden="true"></span>根拠を確認して結論</li>
</ul>
<button class="ts-replay" id="ts-replay" type="button" hidden>もう一度</button>
<p class="ts-sr" id="ts-status" aria-live="polite"></p>
</div>