> For the complete documentation index, see [llms.txt](https://docs.digitalhumans.jp/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.digitalhumans.jp/ops/experience/suggested-responses.md).

# サジェステッドレスポンス:表示する

## サジェステッドレスポンス:表示する

## 概要

サジェステッドレスポンスは、会話AI（Chatbot / SpeakAPI）から `instructions` を通じて、フロントエンドに\*\*ユーザーが選択できる返信候補（ボタン）\*\*を提示する機能です。

ユーザーは表示されたボタンをクリックすることで、指定された発話（メッセージ）を即座に送信できます。

#### **主な用途**

* Yes/No の選択肢を提示して会話をスムーズに進める
* ユーザーが次に聞きたいことを誘導する
* よくある質問や深掘り質問を即座に送信させる

## 仕様

### サジェステッドレスポンスの構造

`suggestedResponses` は `instructions` 内に **配列**として指定します。

配列の各要素は **サジェステッドレスポンスオブジェクト** です。

#### サジェステッドレスポンスオブジェクト

| フィールド       | 型      | 必須 | 説明               |
| ----------- | ------ | -- | ---------------- |
| `label`     | string | ✅  | ボタンに表示されるテキスト    |
| `utterance` | string | ✅  | クリック時に送信されるメッセージ |

## 設定方法（Chatbot / SpeakAPI）

会話AI 側から返すレスポンスの `instructions` に `suggestedResponses` を追加します。

#### 設定例

```json
{
	"instructions": {
		"suggestedResponses": [
		      {"label":"はい","utterance":"はい" },
		      {"label":"いいえ","utterance":"いいえ" },
		      {"label":"詳しく教えて","utterance":"詳しく教えてください" }
		]
	}
}
```

## 表示イメージ

![](/files/ezuOkyWRA6DgXuQKUPdz)

サジェステッドレスポンスは、表示モード（フルビュー / オーバーレイ）と、画面サイズ（一般 / スマホ）によって表示位置や見え方が変わります。

### フルビュー

**一般サイズ**：入力欄（マイク・テキスト入力）の右側に表示

![](/files/p8JIxWjonfq10305WA21)

**スマホサイズ**：画面中央上部に表示

![](/files/o0RMd5kCjQfaiFXdyEQl)

### オーバーレイ

**一般サイズ**：オーバーレイの左側に表示

![](/files/cgvtu5NMy7nDDZbwJMVG)

**スマホサイズ**：画面中央上部に表示

![](/files/PwTViquGtxoZ7i54E0aG)

### CSS カスタマイズ（見た目の調整）

サジェステッドレスポンスの見た目は、フロントエンド側のCSSで調整できます。

以下のクラス名がボタン表示部分に付与されます。

* `dhx-suggested-responses-container` : サジェステッドレスポンスを表示するコンテナ
* `dhx-suggested-response-button` : サジェステッドレスポンスのボタン本体

#### 背景・服装に合わせたボタンカスタマイズ例

ダーク背景向け

![](/files/D7TQu6Ck8ciQjzbkuwri)

```css
  .dhx-suggested-response-button {
    background: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  .dhx-suggested-response-button:hover {
    background: rgba(0, 0, 0, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
  }
```

ユニバーサル、アクセント

![](/files/VXPrV68Sjqixxv5zUwTW)

```css
  .dhx-suggested-response-button {
    background: rgba(94, 106, 210, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 16px rgba(94, 106, 210, 0.15) !important;
  }

  .dhx-suggested-response-button:hover {
    background: rgba(94, 106, 210, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
  }
```

## 動作

1. 会話AI がレスポンス内で `instructions.suggestedResponses` を返します。
2. フロントエンドが `suggestedResponses` を解析し、ボタンUIとして表示します。
3. ユーザーがボタンをクリックすると、対応する `utterance` がユーザー発話として送信されます。

## 推奨（ベストプラクティス）

* **推奨表示数：3個程度**
  * 表示数に制限はありませんが、多すぎると UI が崩れたり、選択肢が多いとユーザーが迷いやすくなるため、3個前後が最も使いやすいです。