プロンプト候補チップ
空のチャット画面に候補チップを並べ、タップすると入力欄に流し込まれ、AIの返答が1文字ずつストリーミング表示される。空白画面の離脱対策。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- 空のチャット画面で最初の一手を示す候補チップ
- タップで入力に流し込みストリーミング返答を見せる導入
- 空白画面の離脱を減らしたいオンボーディング
- 避ける場面
- 会話が始まった後（チップは初回だけ）
- 候補が6つを超える（画面を埋める）
- 構成要素
- 空状態（アイコン・問いかけ）
- スレッド（吹き出し）
- 候補チップ
- 入力欄
- 送信アイコン
- 持っている状態
- 通常
- ホバー
- 押下中
- 読み込み中
- 空
- キーボード
チップは button なので Tab で到達し Enter／Space で送信。返答が終わるとチップが戻り再実行できる。入力欄は readonly、送信ボタンは disabled
- 支援技術
チップは button。入力欄は visually-hidden の label[for] で名前を持つ。スレッドは aria-live=polite で発言と返答を読み上げ、送信は button＋aria-label（見本では disabled）。返答のストリームは reduced-motion で一括表示
- 動き
返答を 24ms／文字で流し込み、カーソル点滅 0.9s steps。reduced-motion で一括表示
原則ヒックの法則
デザインの要点
- 候補は3つまで。動詞で始まる短い文（「文章を要約」）にすると、押した結果が想像できる
- 押したチップの文言はまず利用者の発言として吹き出しに出す。入力欄に入れるだけだと、送信したのか分からない
- 返答は 24ms／文字で流す。一括表示より「いま生成している」感が出るが、reduced-motion では一括にする
- 会話が始まったらチップは消す。候補は最初の一手のためのもので、会話中は入力の邪魔になる
実装メモ
空のチャット画面（エンプティステート）で、ユーザーが最初の一手に迷わないよう候補チップを提示するパターンです。Notion AI・Linear などのオンボーディングで定番。チップを押すと入力に反映され、AIの返答を1文字ずつ流し込むストリーミング風表示を setTimeout で擬似再現しています。実運用ではストリーミングAPIのトークン受信ごとに追記します。prefers-reduced-motion では一括表示に切り替わります。
コード（コピーして使えます）
<div class="ps-chat">
<div class="ps-thread" id="ps-thread" aria-live="polite">
<div class="ps-empty" id="ps-empty">
<div class="ps-empty-icon" aria-hidden="true">✦</div>
<p class="ps-empty-text">何から始めますか？</p>
</div>
</div>
<div class="ps-chips" id="ps-chips">
<button class="ps-chip" type="button" data-a="要点を3つにまとめるので、文章を貼り付けてください。箇条書きで整理します。">📝 文章を要約</button>
<button class="ps-chip" type="button" data-a="原文を貼り付けてください。自然な英語に翻訳し、必要ならトーンも調整します。">🌐 英語に翻訳</button>
<button class="ps-chip" type="button" data-a="テーマを教えてください。切り口を変えたアイデアを10個、すぐに出します。">💡 アイデア出し</button>
</div>
<div class="ps-inputbar">
<label class="ps-sr" for="ps-input">メッセージ</label>
<input class="ps-input" id="ps-input" type="text" placeholder="メッセージを入力" readonly>
<button class="ps-send" type="button" aria-label="送信" disabled>↑</button>
</div>
</div>