> 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":"詳しく教えてください" }
		]
	}
}
```

## 表示イメージ

![](https://1399167784-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FG1LVgVsXsT2u7A43C1Rg%2Fuploads%2Fgit-blob-585831337ed18630c30c93ee16d5400e2a85633f%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2026-01-09_15.37.04.png?alt=media)

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

### フルビュー

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

![](https://1399167784-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FG1LVgVsXsT2u7A43C1Rg%2Fuploads%2Fgit-blob-1dc42a0b9901242b4001fea2b5cf2861add4883f%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2026-01-09_15.39.26.png?alt=media)

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

![](https://1399167784-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FG1LVgVsXsT2u7A43C1Rg%2Fuploads%2Fgit-blob-a87144b689d53d5c8b43ff3460b16598a05f17f3%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2026-01-09_15.40.32.png?alt=media)

### オーバーレイ

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

![](https://1399167784-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FG1LVgVsXsT2u7A43C1Rg%2Fuploads%2Fgit-blob-d7a9dda3a7636566852e560e30f53e41662a51fc%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2026-01-09_15.43.43.png?alt=media)

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

![](https://1399167784-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FG1LVgVsXsT2u7A43C1Rg%2Fuploads%2Fgit-blob-dfd6b14daa2ff83f2bffb6150a5bd1c570641af3%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2026-01-09_15.42.06.png?alt=media)

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

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

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

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

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

ダーク背景向け

![](https://1399167784-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FG1LVgVsXsT2u7A43C1Rg%2Fuploads%2Fgit-blob-18d28277dd85f0cb850a2cddd1795ac61c7c6f2b%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2026-01-09_16.03.31.png?alt=media)

```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;
  }
```

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

![](https://1399167784-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FG1LVgVsXsT2u7A43C1Rg%2Fuploads%2Fgit-blob-af8860a0846d4d86875a1cd38735ef519026152b%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2026-01-09_16.04.27.png?alt=media)

```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個前後が最も使いやすいです。