Webサイト / アプリ（フロントエンド）
quickstart-frontend
ホステッドエクスペリエンス デモコンフィグレーターの使い方と設定方法です。
ホステッドエクスペリエンス デモコンフィグレーター
- お送りしたメールに記載のデモURLにPCブラウザやスマホでアクセスしてください。
- 設定変更はデモ設定ページ（/settings）から行います。
- デジタルヒューマンのフロントエンドを簡単に導入できるホステッドエクスペリエンスを使用します。今回はホステッドエクスペリエンス デモコンフィグレーターをご準備しました。
- ホステッドエクスペリエンスは、デスクトップやラップトップ、スマートフォンでも表示、対話可能です。
- デジタルサイネージ等は、Androidなどを搭載し、マイクとスピーカーの入出力が可能な端末であればほぼ利用できると思われます。必要スペック等はデジタルヒューマンを快適に利用するためのシステム要件をご確認ください。
- ホステッドエクスペリエンスページを参考にして、ご自身のドメインやWEBサイトに設置、機能を追加することが可能です。
話しかける方法と音声認識モードの違い
エンハンスド・スピーチ・レコグニッション モード
- デフォルトではスピーチレコグニションモードに設定されています。ウェイクワードやウェイクアクションなしに、マイクに向かって話しかけてください。
- 発話が音声認識されない場合は、こちらのページを参考に端末のマイク入力を確認してください。
PTT（プッシュトゥートーク）モード
- 展示会などで背景音が多い場合は、
enableVadをfalseにして擬似的なPTT（プッシュトゥートーク）モードをご利用ください。enableVadをfalseにすると、ユーザーはマイクボタンを押して話す必要があります。
- 録音中のアイコンになっているにもかかわらず、発話が音声認識されない場合は、こちらのページを参考に端末のマイク入力を確認してください。
デモページをカスタマイズするには？
- フロントエンドは、ホステッドエクスペリエンスを使って簡単にデプロイ、調整、変更、ができる仕様になっています。
- 今回は限られた時間内でより簡単に調整できるように、デモや開発期間中はホステッドエクスペリエンス デモコンフィグレーターをご提供しています。
- デモの表示設定変更はデモ設定ページ（/settings）から行います。
- キャラクターや背景画像の変更、音声合成の変更はDIPにて行えます。 dip.digitalhumans.ne.jp
- 必要な認証情報はお送りしたメールに記載しております。
- 初期パスワードは未設定なので、パスワードをお忘れですか？からパスワードを設定してください。
- 認証アプリによる2段階認証が必須です。
- Embedテンプレートを選択すると、「Embed設定」の背景URLにiframeで外部サイトのURLまたは画像URLを設定できます。背景を活用することで、実際のサイトに設置したようなデモを体験できます。 ⚠️ iframeはオリジン間リソース共有 (CORS) によって制限されるため、表示できないURLがあります。
- デジタルヒューマンの表示エリアの背景は差し替え可能です。DIPからご設定ください。
DIP、Difyの管理画面を提供していない場合
デモの場合、環境の制限で提供していない場合があります。 やりたいことがある、質問への回答が適切ではない、喋らせたいことがある場合はサポートセンターまでお問い合わせください。 量や技術的可否によりますが、可能な限り対応いたします。
ホステッドエクスペリエンス デモコンフィグレーターの使い方
デモの設定画面から、ホステッドエクスペリエンスのカスタマイズできる範囲で各環境設定を行えます。設定を反映すれば、リンクを共有した場合でも設定が反映されています。
ページ構成
ホステッドエクスペリエンス デモコンフィグレーターは以下の2つのページで構成されています。
- デモページ（LP）
デジタルヒューマンを公開・体験するページです。URLは
/{ワークスペース}/{デモ名}の形式です。
- デモ設定ページ（/settings）
デモページの各種設定を行えます。URLは
/{ワークスペース}/{デモ名}/settingsの形式です。
パラメータ設定
設定画面では、以下のパラメータを設定できます。
LPテンプレート
- デモページ（LP）のテンプレートとコンテンツ設定
名称 | 説明 |
背景URL | Embedテンプレート選択時に「Embed設定」セクションに表示されます。デジタルヒューマン表示エリアの背後に表示する画像URLまたは外部サイトURL（iframe）を設定できます。iframeで設定する場合は、対象ドメインがiframeでの埋め込みを許可している必要があります。 |
ペルソナ名 | デモページ（LP）に表示されるペルソナ名を変更します。 |
ドキュメントタイトル | デモページ（LP）のブラウザタブに表示されるタイトルを変更します。 |
デモHTML | デモページ（LP）上の説明文エリアに表示するHTMLを変更します。 |
- デモページ（LP）のデザインテンプレートを選択できます。
テンプレート名 | 説明 |
Mist（デフォルト） | グラジエントメッシュ＋ガラスカード |
Trust | 2カラム、企業向けクリーン |
Ma | 余白の美学、極限ミニマル |
Classic | 旧LP — 2カラム、企業感 |
Embed | 既存サイトに重ねて疑似体験 |
- テンプレート選択後、以下の項目をカスタマイズできます。
項目 | 説明 |
LPコンテンツ | 説明文エリアに表示するHTMLテキスト（デモHTML） |
デザイン | カラーテーマ（「デフォルトに戻す」で選択中テンプレートのデフォルト色に戻す |
プライバシーノーティス | 同意文の表示設定 |
フッター | フッターテキスト |
カスタムCSS | 独自スタイルの追加 |
UneeQ Options
設定パラメータの詳細はこちらからご参照ください。
DHX Options
設定パラメータの詳細はこちらをご参照ください。
画面下部ボタン
ボタン名 | 説明 |
リセット | 未保存の変更を破棄し、現在の保存済み設定に戻します。 |
ライブコンソールで確認 | オプション設定を仮保存し、ライブコンソールで動作確認します。テンプレートのデザイン変更は反映されません。データベースには保存されないた
め、安全にテストできます。 |
全設定を公開デモに反映 | 入力された設定内容を公開デモ環境（LP）に反映します。 |
動作確認・設定の反映
動作確認をする
設定内容を確認するには、ページ下部の「ライブコンソールで確認」ボタンから実際に起動して、動作をご確認ください。
コードスニペットを取得する
設定内容に基づき、独自環境にデジタルヒューマンを設置するためのコードスニペットが表示されます。
デモページに環境設定を反映する
「全設定を公開デモに反映」ボタンをクリックすると、設定内容が公開デモページに即時反映されます。
設定を初期化する
以前に設定した環境設定は、以下の方法で初期化できます。
- フォームを保存前の状態に戻す：設定ページ下部の「リセット」ボタンをクリックします。未保存の変更が破棄され、現在の保存済み設定に戻ります。
- 特定の項目をデフォルト値に戻す：各項目右の「デフォルト」ボタンをクリックします。該当項目のみデフォルト値にリセットされます。
デジタルヒューマン起動後のコントロール
ページ下部の「ライブコンソールで確認」ボタンを使用してデジタルヒューマンを起動すると、ライブコンソールが開き、動作を確認できます。
これはユーザへ見せる画面ではなく、一連の動作を確認するための画面です。このパネルから、デジタルヒューマンの各種メソッドを簡単に操作できます。
メソッドの一覧はこちらからご確認ください。
音声認識・音声合成の調整
特別な指定がない限りデモ環境は下記の構成で設定しています。設定変更はDIPから行います。
- 音声認識（STT）- Google Speech-to-Textをベースに拡張しています
- 音声合成（TTS）- Microsoft Azure Text to Speech
ja-JP-NanamiNeural(女性)
よくある質問
- SSMLを利用するには？（話速・ピッチ・読み方をカスタマイズできます。）
- デジタルヒューマンで利用できる言語（聞き取り・発話）
フリートライアル以上の方は、「会話AIの設定 」もご覧ください。
最終更新日 March 17, 2026