AI・生成体験
思考ステップ開示
「4秒 思考しました」の折りたたみをタップすると、AIの推論ステップが1つずつチェックされながら展開する。ChatGPT/Claude系の定番。
プレビュー
クリック
操作クリック／タップで動きます。
実装メモ
「Thought for N seconds」を開くと推論ステップが順に現れ、少し遅れてチェックが点く演出です。ChatGPTやClaudeなどのAIチャットで定番化した「思考の可視化」パターンで、初期状態を折りたたみにして縦の情報量を抑えます。ステップの内容・所要時間はダミーで、実運用ではモデルの中間出力やツール実行ログを流し込みます。prefers-reduced-motion では間隔を詰めて即時に近く表示します。
コード（コピーして使えます）
<div class="ts-wrap">
<button class="ts-summary" id="ts-summary" aria-expanded="false">
<span class="ts-spark">✦</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"></span>質問の意図を整理</li>
<li class="ts-step"><span class="ts-dot"></span>関連する情報を収集</li>
<li class="ts-step"><span class="ts-dot"></span>候補となる回答を比較</li>
<li class="ts-step"><span class="ts-dot"></span>根拠を確認して結論</li>
</ul>
<button class="ts-replay" id="ts-replay" hidden>もう一度</button>
</div>