> 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/dev/hosted-experience/hosted-experience-view-types.md).

# ビューの種類

## 概要

ビューとは、一般的にはフロントエンドやユーザーインターフェースと呼ばれる、ユーザーがデジタルヒューマンと対話する画面です。ビューには複数のタイプがあります。

デジタルヒューマンのフロントエンドを設置する際に、コードスニペットをWEBサイトのヘッダー部分にペーストするだけで利用できる[ホステッドエクスペリエンス](https://gitlab.digitalhumans.jp/docs/docs-digitalhumansjp/-/blob/main/development/%E3%83%9B%E3%82%B9%E3%83%86%E3%83%83%E3%83%89%E3%82%A8%E3%82%AF%E3%82%B9%E3%83%9A%E3%83%AA%E3%82%A8%E3%83%B3%E3%82%B9%201925aad38a9c80109dcedfe40968bd13.md)を提供します。

また、ビューはレイアウトモードとも解釈でき、大きく分けると3種類+1種類（フルスクリーンとオーバーレイの混合）あります。同じペルソナを使って、用途や表示方法に応じて使い分けることができます。

* オーバーレイ
* フルスクリーン
* コンテインドオートレイアウト

ここでは、それぞれのビューの違いをご紹介します。

### ビューの種類と機能

![](/files/HMmu9DCD1Yoja8uaW0ph)

## **オーバーレイ**

オーバーレイビューは、デジタルヒューマンをチャットボットのウィンドウのように重ねて表示させることができます。

ウェブサイトでページに寄り添う様な動作を行います。

![](/files/a9O2yLsJNb53VIt5EWll)

## **フルスクリーン**

フルスクリーンビューは、ページ全体または既存のページの一部に組み込んで利用することができます。デザインに自由度があり、最も豊かなユーザー体験を提供することができますので、高いエンゲージメントのデジタルヒューマンインタラクションを提供し、体験をサポートするコンテンツを十分に表示するスペースを確保します。

![](/files/Yo9YSgT1ElNCq6Txffb1)

![](/files/lZKKcDPg1iVra7vCpFqy)

### コンテインドオートレイアウト

また、既存のウェブサイトに`div`などで区切った任意の位置にデジタルヒューマンを表示することも可能です。

デジタルヒューマンコンテナが画面外に25％スクロールされた場合、レイアウトモードは自動的にオーバーレイに変更されます。ユーザーがコンテナを再度表示領域にスクロールした場合、レイアウトモードは「contained」に戻ります。

{% embed url="<https://youtube.com/shorts/nt2ZdyV6TLM>" %}
