部品 · AI Counselor
わんちゃんの相談室
相談開始と会話の画面構成
- 利用範囲
- サイト共通 / 相談開始 / 会話
- 更新日
- 2026-07-10
プレビュー
状態と使い方
相談開始画面
AI相談サポート
わんちゃんの相談室
食事、健康、しつけについてAIへ相談できます。
食事・栄養の相談
健康・日々のケア
しつけ・行動の疑問
相談するわんちゃんを選択
AIの回答は参考情報です。緊急時は必ず動物病院へ連絡してください。
会話画面
AI相談サポート
🤖 AIによる回答
食欲や散歩量など、気になる変化を教えてください。
※AIの回答は参考情報です。健康状態に不安がある場合は獣医師へご相談ください。
最近、食欲が落ちている気がします。
メッセージを入力
画面右下の便利機能から、相談開始と会話へ同じ流れで移動します。
主な部品
この仕様に含まれるUI
7 件
AiDataTransmissionConsentDialog
AI相談
ChatInterface
AI相談
ChatStartClient
AI相談
ChatWidget
AI相談
MessageBubble
AI相談
PetSelector
AI相談
ProductRecommendation
AI相談
解剖
起点
画面右下の便利機能からAI相談へ移動する。
開始画面
100dvhの全画面で、3つの相談領域、PetSelector、amberの開始CTAを表示する。
会話画面
100dvhの全画面で、履歴、提案、入力、送信、エラーを表示する。
安全境界
AI送信前同意、医療免責、緊急時案内、利用上限のお知らせを保持する。
状態
FAB閉・開
便利機能の主ボタンと相談メニューを切り替える。
開始・読込中
ペット選択は任意。開始中はspinnerとdisabledを合成する。
空会話
welcome、3つのsuggestion、安全案内を表示する。
会話・異常
送信直後の表示、入力中表示、エラー、利用上限のお知らせを同じ面で返す。
仕様値
- 画面
- 開始・会話ともh-[100dvh]
- 可読幅
- 開始 max 672px / 会話 max 768px
- 開始CTA
- amber-600、h 56px、rounded-2xl
- 会話色
- bg-primary / bg-card
- 入力
- 48px以上、最大150px、safe-area対応
- FAB
- 右下固定、amber main action
運用ルール
全画面で流れを揃える
相談開始から会話までを全画面でつなぎ、便利機能から同じ流れへ案内する。
免責を消さない
AIの回答は参考情報であり、緊急時は動物病院へ相談する案内を必ず残す。
会話ログを読みやすく保つ
吹き出し色、入力欄、送信ボタンの位置を固定し、状態でレイアウトを揺らさない。