> For the complete documentation index, see [llms.txt](https://docs.maiagent.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.maiagent.ai/maiagent-user-guide/ja/build/choose-channel/web-chat/markdown-rendering.md).

# Markdown レンダリング

Web Chat のメッセージ内容レンダリング：Markdown の見出し、リスト、表、コードブロック、リンクがチャットウィンドウでどのように表示されるか、最適化項目、管理者設定について説明します。

このページでは、Web Chat のチャットウィンドウにおけるメッセージ内容レンダリングの最適化機能を紹介します。Agent の回答がより明確で読みやすく表示されるようになります。

## メッセージ内容レンダリングとは？ <a href="#what-is-message-rendering" id="what-is-message-rendering"></a>

メッセージ内容レンダリングとは、Web Chat が Agent のテキスト回答を、ユーザーが目にする視覚的な表示に変換する仕組みのことです。Agent の回答には次のような内容が含まれる場合があります。

* **プレーンテキスト**：通常の文章
* **Markdown 形式**：見出し、リスト、太字、斜体などの書式
* **コードブロック**：コード例やコマンド
* **表**：構造化されたデータの表示
* **リンク**：外部リンクや参考資料

適切にレンダリングされることで、これらの内容が読みやすく、理解しやすくなります。

## 最適化項目 <a href="#optimization-items" id="optimization-items"></a>

### 1. Markdown レンダリングエンジンの全面アップグレード <a href="#upgrade-markdown-rendering-engine" id="upgrade-markdown-rendering-engine"></a>

Web Chat は、より豊富な書式に対応し、より正確に表示できる拡張版の Markdown レンダリングエンジンを採用しました。

#### 対応している Markdown 形式 <a href="#supported-markdown-formats" id="supported-markdown-formats"></a>

| 形式          | 構文例                                        | レンダリングの説明                                                                     |
| ----------- | ------------------------------------------ | ----------------------------------------------------------------------------- |
| **見出し**     | `# 見出し1`、`## 見出し2`                         | 明確な見出し階層で、内容を区切りやすくします                                                        |
| **太字**      | `**太字テキスト**`                               | 重要な内容を強調します                                                                   |
| **斜体**      | `*斜体テキスト*`                                 | 補足的な強調や補足説明に使います                                                              |
| **リスト**     | `- 項目1`、`1. 項目1`                           | 番号付き・番号なしのリスト                                                                 |
| **コード**     | `` `コード` ``                                | インラインコードやコマンド                                                                 |
| **コードブロック** | ` ```コード``` `                              | 複数行のコード。シンタックスハイライトに対応                                                        |
| **表**       | `\| 列1 \| 列2 \|`                           | 構造化されたデータの表示                                                                  |
| **リンク**     | `[リンクテキスト](URL)`                           | クリックできるハイパーリンク                                                                |
| **引用**      | `> 引用内容`                                   | 引用や特記事項                                                                       |
| **画像**      | `![説明](画像URL)`、`![説明](画像URL){width=200px}` | 画像を表示します。URL の直後に `{…}` を続けると表示サイズを指定できます。[画像の表示サイズを調整する](#image-size)をご覧ください |

#### リンクとファイルリンクの動作 <a href="#link-behavior" id="link-behavior"></a>

* 回答内のリンクは、すべて**新しいタブ**で開きます。現在の会話から離れることはありません（ページ内アンカー `#…` のみ例外です）。
* リンク先が PDF などのファイルの場合、開き方はブラウザーによって決まります。Chrome、Edge、Safari では、内蔵ビューアーで新しいタブに PDF が開きます。`https://example.com/manual.pdf#page=12` のようにページ番号付きの URL であれば、そのページに直接移動します。ブラウザーが PDF をダウンロードする設定の場合はダウンロードされます。Web Chat が URL を書き換えたり、ダウンロードを強制したりすることはありません。
* Agent に添付ファイルではなく「テキストリンク＋ページ番号」で回答させたい場合は、ドキュメントの URL（ページ番号を含む）をナレッジベースのドキュメントの `url` メタデータまたは FAQ の回答に記載し、ロール指示で Markdown リンクの形式で回答するよう指示します。詳しくは[カスタム URL マッピング](/maiagent-user-guide/ja/build/knowledge-base/tags-and-metadata.md#custom-url-mapping)をご覧ください。引用元ドキュメントのダウンロードは別の仕組みで、[機能設定](/maiagent-user-guide/ja/build/conversation-settings/platform-settings/function-settings.md#ai-interaction)の「引用ドキュメントのダウンロードを許可」で制御します。

#### 画像の表示サイズを調整する <a href="#image-size" id="image-size"></a>

Agent の回答に含まれる Markdown 画像は、デフォルトでは元のサイズで表示され、最大でメッセージ欄の幅までになります。画像 URL の閉じ括弧の直後に `{width=…}` または `{height=…}` を続けて記述すると、その画像の表示サイズを指定できます。Web Chat と管理画面の会話画面（例：<mark style="color:blue;">Agent マーケット</mark>から<mark style="color:blue;">会話を開始</mark>した場合）のどちらでも利用できます。

たとえば、EC サイトのカスタマーサービス責任者は、Agent が商品画像を返信すると 1 枚の画像でチャットウィンドウがいっぱいになり、お客様が文章を読むために何度もスクロールしなければならないことに気づきました。そこで Agent のロール指示に、商品画像を必ず `![商品画像](画像URL){width=200px}` の形式で出力するよう記載しました（記載場所は [Agent にロール指示を追加する](/maiagent-user-guide/ja/build/agent/add-system-prompt.md)をご覧ください）。その後、公式サイトの Web Chat でお客様が見る商品画像の幅は 200px に固定され、同僚が管理画面で同じ Agent と会話した場合も同じサイズで表示されるようになりました。

```markdown
![サンプル画像](https://example.com/a.png){width=200px}
![サンプル画像](https://example.com/a.png){width=50%}
![サンプル画像](https://example.com/a.png){width=300px height=200px}
```

| ルール            | 説明                                                              |
| -------------- | --------------------------------------------------------------- |
| 使用できる設定        | `width`（幅）と `height`（高さ）のみ。すべて小文字で、それぞれ 1 回まで、順序は自由です           |
| 単位             | `px` または `%`。値は 0 より大きく、小数も指定できます（例：`33.5%`）。`%` は 100 を超えられません |
| パーセントの基準       | `%` はメッセージ欄の幅を基準に計算されます                                         |
| 幅と高さを同時に指定する場合 | 2 つの設定は空白で区切ります（`{width=300px height=200px}`）。カンマは使えません         |
| どちらか一方のみ指定する場合 | もう一方は元の画像の縦横比に合わせて自動調整されます                                      |
| 位置             | `{` は URL の `)` の直後に置く必要があり、間に空白を入れることはできません                    |
| メッセージ欄の幅を超える場合 | メッセージ欄の幅に収まるように自動で縮小されます。画像が歪むことはありません                          |

<figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-e18a774c18e95e36101cf37ba44999d4bcaca551%2Fmarkdown-image-size-web-chat.png?alt=media" alt="Web Chat で Agent が同じ画像を 2 枚返信している。1 枚目は元のサイズで表示され、2 枚目は幅 200px を指定しているため小さく表示されている"><figcaption><p>Web Chat：同じ画像で、サイズ未指定（上）と <code>{width=200px}</code>（下）</p></figcaption></figure>

<figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-ce27aa9a902bab5a4940ac86f0a2f1b8646949b4%2Fmarkdown-image-size-admin-chat.png?alt=media" alt="管理画面の会話画面で Agent が同じ画像を 2 枚返信している。1 枚目は元のサイズで表示され、2 枚目は幅 200px を指定しているため小さく表示されている"><figcaption><p>管理画面の会話画面：同じ回答で、2 枚目の画像の幅は 200px</p></figcaption></figure>

{% hint style="warning" %}
`{…}` 内に上の表のルールに合わない箇所が 1 つでもあると（例：`{width=150%}`、`{size=200px}`、`)` と `{` の間に空白がある、右中括弧が足りないなど）、サイズ指定全体が適用されません。画像はデフォルトのサイズで表示され、`{…}` の文字列はそのままメッセージ内に表示されます。コードやコードブロック内に書かれた `{width=…}` も、そのまま表示されます。
{% endhint %}

{% hint style="info" %}
サイズ指定は、Web Chat と管理画面の会話画面でのみ有効です。LINE、Messenger、Instagram、WhatsApp などのメッセージングチャネルでは適用されず、画像の後ろの `{width=…}` がテキストとしてメッセージに残ります。同じ Agent がこれらのチャネルにも対応している場合は、ロール指示でサイズ指定の構文を求めないことをおすすめします。
{% endhint %}

### 2. ダークモードの表示最適化 <a href="#dark-mode-visual-optimization" id="dark-mode-visual-optimization"></a>

エンドユーザーのデバイスがダークテーマを使用している場合、Web Chat はメッセージ内容の表示を自動的に調整し、暗い背景でも見やすく読みやすい状態を保ちます。

#### ダークモードの調整項目 <a href="#dark-mode-adjustment-items" id="dark-mode-adjustment-items"></a>

1. **文字と背景のコントラスト**：文字色を自動調整し、暗い背景でもはっきり表示されるようにします
2. **メッセージのフィードバックボタン**：ボタンの色と枠線を調整し、ダークモードでも見やすさを保ちます
3. **表の表示**：表の枠線と背景色を調整し、読みやすさを高めます
4. **引用ブロックの背景**：引用ブロックの背景色を調整し、本文と区別しやすくします

### 3. ストリーミングレンダリングのパフォーマンス向上 <a href="#streaming-rendering-performance" id="streaming-rendering-performance"></a>

Web Chat は Agent の回答をリアルタイムのストリーミングで表示するため、ユーザーは回答がすべて生成されるのを待つ必要がありません。今回のアップデートでは、ストリーミングレンダリングのパフォーマンスを最適化しました。

* **レンダリング速度の向上**：Markdown 形式のレンダリングが高速になり、遅延を感じにくくなります
* **滑らかさの改善**：文字が 1 文字ずつ表示される際の動きがより滑らかになり、目立つ引っかかりがなくなります
* **書式の正確性**：ストリーミング中でも Markdown 形式が正しくレンダリングされます

{% hint style="success" %}
ユーザーは、Agent が回答している途中でも、すでに生成された内容をリアルタイムで確認できます。回答がすべて完成するのを待つ必要はありません。
{% endhint %}

## 活用シナリオ <a href="#use-cases" id="use-cases"></a>

### 💻 技術ドキュメントアシスタント <a href="#technical-documentation-assistant" id="technical-documentation-assistant"></a>

**利用シーン**： 開発者がコード例について質問すると、Agent はコードブロックを含む回答を返します。

**最適化の効果**：

* コードブロックがシンタックスハイライトに対応し、読みやすくなります
* ダークモードでもコードがはっきり表示されます
* 開発者はコードをそのままコピーして利用できます

**回答例**：

````
Python で CSV ファイルを読み込む例です。

```python
import pandas as pd

df = pd.read_csv('data.csv')
print(df.head())
````

このコードは CSV ファイルを読み込み、先頭 5 件のデータを表示します。

```

### 📊 データ分析アシスタント <a href="#data-analysis-assistant" id="data-analysis-assistant"></a>

**利用シーン**：
ユーザーが売上データの分析結果について質問すると、Agent は表形式で結果を提示します。

**最適化の効果**：
* 表の書式が明確で、列がきれいにそろいます
* ダークモードでも表の枠線と背景色が適切に表示されます
* 大量のデータでも読みやすさを保てます

**回答例**：
```

今四半期の売上上位 3 製品です。

| 製品名  | 販売数   | 売上額      |
| ---- | ----- | -------- |
| 製品 A | 1,250 | ¥125,000 |
| 製品 B | 980   | ¥98,000  |
| 製品 C | 856   | ¥85,600  |

売上データは今月 20 日時点のものです。

```

### 📚 学習支援アシスタント <a href="#tutorial-assistant" id="tutorial-assistant"></a>

**利用シーン**：
学習者が学習の手順について質問すると、Agent は番号付きリストで説明します。

**最適化の効果**：
* リスト項目の番号がはっきり表示されます
* 見出しの階層が明確で、手順の順序を理解しやすくなります
* 重要な内容は太字で強調されます

**回答例**：
```

## Python 学習のおすすめステップ

1. **基本構文**
   * 変数とデータ型
   * 条件分岐とループ
2. **応用概念**
   * 関数とモジュール
   * オブジェクト指向プログラミング
3. **実践演習**
   * 小規模なプロジェクトを完成させる
   * オープンソースに貢献する

各ステップに 2〜3 週間かけて学習することをおすすめします。

```

## 管理者設定 <a href="#admin-settings" id="admin-settings"></a>

### Markdown レンダリング設定 <a href="#markdown-rendering-settings" id="markdown-rendering-settings"></a>

Web Chat の Markdown レンダリング機能は、デフォルトで有効になっています。Markdown 形式が不要な場合は、設定で変更できます。

1. 「公開」→「Web Chat 設定」を開きます
2. 「メッセージレンダリング」設定セクションを探します
3. レンダリングモードを選択します：
   * **完全な Markdown**：すべての Markdown 形式に対応します（デフォルト）
   * **基本書式**：太字、斜体、リンクのみに対応します
   * **プレーンテキスト**：書式をいっさいレンダリングしません

### ダークモード設定 <a href="#dark-mode-settings" id="dark-mode-settings"></a>

ダークモードは、ユーザーのデバイス設定に基づいて自動的に有効になります。Web Chat を常にライトテーマまたはダークテーマに固定したい場合は、次の手順で設定します。

1. 「公開」→「Web Chat 設定」を開きます
2. 「外観」設定セクションを探します
3. テーマモードを選択します：
   * **自動**：ユーザーのデバイス設定に従います（デフォルト）
   * **ライト**：常にライトテーマを使用します
   * **ダーク**：常にダークテーマを使用します

<div data-gb-custom-block data-tag="hint" data-style='info'>

Web Chat の外観設定の詳細については、[チャットプラットフォーム連携：ウェブサイト](website.md)をご覧ください。

</div>

## パフォーマンスへの影響 <a href="#performance-impact" id="performance-impact"></a>

### レンダリングパフォーマンス <a href="#rendering-performance" id="rendering-performance"></a>

最適化された Markdown レンダリングエンジンによるパフォーマンスへの影響は次のとおりです。

* **読み込み時間**：初回読み込みが約 0.1〜0.2 秒増加します（ほとんど体感できません）
* **メモリ使用量**：約 1〜2 MB 増加します（最新のブラウザーへの影響はごくわずかです）
* **レンダリング速度**：旧バージョンと比べて約 30% 向上します

### 互換性 <a href="#compatibility" id="compatibility"></a>

最適化されたレンダリングエンジンは、次のブラウザーに対応しています。

* Chrome / Edge（バージョン 90 以上）
* Firefox（バージョン 88 以上）
* Safari（バージョン 14 以上）
* モバイルブラウザー（iOS Safari、Android Chrome）

<div data-gb-custom-block data-tag="hint" data-style='warning'>

古いバージョンのブラウザーでは、一部の Markdown 形式が正しく表示されない場合があります。ユーザーにブラウザーの更新を案内することをおすすめします。

</div>

## メッセージングチャネル：自動的にプレーンテキストへ変換 <a href="#messaging-channels-plain-text" id="messaging-channels-plain-text"></a>

このページで説明している Markdown レンダリングは、リッチテキストを表示できる Web Chat にのみ適用されます。LINE、Messenger、Instagram、WhatsApp は Markdown をレンダリングしないため、Agent の回答はこれら 4 つのチャネルに送信される前に自動で変換され、ユーザーにはすっきりしたテキストが届きます。

| Markdown | 変換後 |
| --- | --- |
| `# 見出し`、`**太字**`、`*斜体*`、`~~取り消し線~~` | 記号を取り除き、テキストのみを残します（WhatsApp の太字は、WhatsApp 独自の `*太字*` スタイルになります） |
| `[テキスト](URL)` | 「テキスト URL」 |
| 表 | 各行が「- 列名: 値 / 列名: 値」という 1 行になります |
| コードブロック | 内容のみを残します |
| 箇条書き、改行 | そのまま保持されます |
| 画像 `![説明](URL)` | 別途画像として送信される画像はテキストから取り除かれます。別送されない画像は「説明 URL」と表示されます |

変換されるのは Agent が送信するメッセージのみです。担当者が管理画面で入力したテキスト、LINE の Flex カード、クイックリプライボタンはそのまま送信されます。管理画面の会話ページとレポートには、モデルの元の回答が保存されたままになります。Viber チャネルでは、従来どおりのスタイル変換が維持されます。

たとえば、ドラッグストアチェーンの Agent が公式サイトの Web Chat と LINE の両方に対応していて、店舗の営業時間を表にまとめて回答するとします。サイトの訪問者には表が表示され、LINE のユーザーには「- 店舗: 新宿店 / 営業時間: 09:00–22:00」のように 1 店舗 1 行の箇条書きで届きます。`|` や `**` の記号がたくさん表示されることはないので、LINE 用に別のロール指示を用意する必要はありません。

## よくある質問 <a href="#faq" id="faq"></a>

### Q1：Agent の回答に書式が適用されないのはなぜですか？ <a href="#faq-ai-agent-response-no-format" id="faq-ai-agent-response-no-format"></a>

考えられる原因：
* Agent が Markdown 構文を使用していない
* Markdown レンダリング機能が無効になっている
* ブラウザーのバージョンが古い

### Q2：ダークモードで一部の内容が見づらい場合はどうすればよいですか？ <a href="#faq-dark-mode-content-visibility" id="faq-dark-mode-content-visibility"></a>

次の手順をお試しください。
1. ブラウザーのキャッシュをクリアする
2. ページを再読み込みする
3. 最新バージョンのブラウザーを使用していることを確認する

### Q3：コードブロックのシンタックスハイライトの色はカスタマイズできますか？ <a href="#faq-customize-code-block-syntax-highlight" id="faq-customize-code-block-syntax-highlight"></a>

現在、シンタックスハイライトの色は固定されています。今後のバージョンでカスタマイズに対応する可能性があります。

### Q4：表の内容が長い場合はどのように表示されますか？ <a href="#faq-long-table-display" id="faq-long-table-display"></a>

表は横スクロールに自動で対応しているため、内容が最後まで表示され、他の内容のレイアウトに影響しません。

### Q5：レンダリングの最適化はモバイルデバイスでの表示に影響しますか？ <a href="#faq-mobile-device-rendering" id="faq-mobile-device-rendering"></a>

いいえ。レンダリングの最適化はモバイルデバイスにも対応しているため、小さな画面でもはっきり表示されます。

```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.maiagent.ai/maiagent-user-guide/ja/build/choose-channel/web-chat/markdown-rendering.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
