---
title: "Excalidrawのテキスト生成図（AI機能）を共有する方法"
description: "手書き風の図でアイデアを素早く伝えたい人へ。ExcalidrawのAI生成図をHTML化して認証付き一時URLで配れば、相手がすぐ開けてフィードバックを返しやすくなる具体的な手順を紹介します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/excalidraw-ai-share"
markdown: "https://giga-site.com/articles/excalidraw-ai-share/index.md"
category: "AI活用"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# Excalidrawのテキスト生成図（AI機能）を共有する方法

Excalidrawはテキストから手書き風の図解を起こせるAI機能を備えています。ラフな図でアイデアを伝えたいとき、その図をHTML化して認証付きの一時URLで配ると、相手にすぐ見てもらえて確認依頼もスムーズになり、公開範囲のコントロールもしやすくなります。外部サービスの仕様は変わるため、本文ではレビュー共有で変わりにくい判断軸を中心に整理します。

> Source HTML: https://giga-site.com/articles/excalidraw-ai-share
> Article index: https://giga-site.com/articles/index.md

## 手書き風の図解を共有する場面

Excalidrawの手書き風の図解は、堅すぎないラフな雰囲気でアイデアや構想を伝えるのに向いています。完成図ではなく「たたき台」を見せて反応をもらいたいときに重宝します。

ただしラフな図ほど、口頭の補足なしでは意図が伝わりにくいこともあります。図と一緒に短い説明を添えられる形で共有すると、確認依頼の精度が上がります。

## ExcalidrawからHTMLとして書き出す

Excalidrawで作った図はPNG画像やSVGとして書き出せます。Webで見てもらうなら、書き出した画像を表示するHTMLにまとめるのが手軽です。手書き風のニュアンスを保ちたいなら、解像度を意識して書き出しましょう。

複数の図やパターンを見せたいときは、画像をZIPにまとめてアップロードすると1つのページに並べられます。各図の前に「ここを確認してほしい」という一言を添えると、相手がコメントしやすくなります。

手書き風の図は線がやわらかく、細かい文字がにじみやすい傾向があります。読んでほしいラベルは図の外にテキストで補足したり、十分な大きさで書き出したりすると、意図が正しく伝わります。ラフさを残しつつ要点だけははっきり示す、というバランスを意識すると確認依頼の効果が高まります。

## AI生成HTMLを共有する前の安全チェック

Excalidrawのテキスト生成図（AI機能）を共有では、AIツールの画面上で完成して見えても、共有用HTMLとして安全とは限りません。外部script、form送信先、APIキーらしき文字列、画像パス、ダミーデータではない個人情報を分けて確認します。

ツールの書き出し形式や共有機能は時期・プラン・作り方で変わります。この記事では特定機能の有無を断定せず、静的HTMLやZIPとして取り出せた成果物を安全に見せる前提で進めます。安全チェックが終わったら、HTMLまたはZIPをアップロードし、必要に応じて認証と期限を付けたURLとして共有します。

- 外部送信: form action、fetch、script src、iframeの向き先を確認する
- 秘密情報: APIキー、トークン、社内URL、顧客名が残っていないか検索する
- 表示再現: 画像・CSS・フォントが公開URLでも読み込めるか見る
- 共有設定: 相手、期限、認証方式、差し替え時の連絡方法を決める

## 確認依頼用のURLを発行する手順

図が用意できたら、見せたい相手に合わせて認証付きのURLを発行します。気軽なたたき台ならURLのみでも構いませんが、社外秘の内容ならパスワードやメール認証を設定します。

1. Excalidrawから図をPNGなどの画像で書き出す
2. 画像と確認ポイントを1つのHTML(必要ならZIP)にまとめる
3. ギガサイト便のトップにドロップしてURLを発行する
4. 内容の機密度に応じて認証方式を選ぶ
5. 公開期限を設定し、確認依頼とともにURLを送る

## 反応を見ながら図を差し替える

もらった反応をもとにExcalidrawで図を描き直したら、同じURLのファイルを差し替えるだけで更新できます。たたき台は何度も描き直すものなので、リンクが変わらないのは大きな利点です。

アクセスログで誰がいつ見たか分かるので、反応が薄いときは見てもらえているか確認できます。QRコードを使えば、打ち合わせの場でその場でスマホから開いてもらうこともできます。

## ラフな図でも公開範囲は意識する

ラフな図でも、未発表の企画や社外秘の構想を含むことがあります。一時公開ページにはnoindexが付くため検索には出ませんが、noindexはアクセス制御ではありません。

社外に出したくない内容なら認証を併用し、確認が終わる頃に公開期限が切れるよう設定しておきましょう。気軽に共有できる手書き風の図だからこそ、扱いには少しだけ気を配ると安心です。たたき台はつい無防備に共有しがちですが、内容の機密度を一度確認してから渡す習慣を付けると、思わぬ漏えいを避けられます。

## よくある質問

### 手書き風の雰囲気を保ったまま共有できますか。

PNGなどの画像で書き出してHTMLに表示すれば、手書き風のニュアンスをそのまま見てもらえます。解像度を意識すると見栄えが保てます。

### 複数の案をまとめて見せたいです。

図の画像をZIPにまとめてアップロードすれば、1つのページに複数案を並べて比較してもらえます。

### 描き直すたびにリンクは変わりますか。

同じURLのままファイルを差し替えられるので変わりません。たたき台の描き直しでも相手は同じリンクを使えます。

### 打ち合わせの場で見せるには。

発行したURLのQRコードを表示すれば、参加者がその場でスマホから開けます。手元で図を確認しながら話せます。

### AIツールで作ったHTMLはそのまま共有しても安全ですか？

そのまま共有せず、外部送信先、フォーム、APIキー、社内URL、画像パスを確認してからURL化します。ツールの共有機能や書き出し仕様は変わるため、最新画面も確認してください。

## 関連記事

- [Whimsical AIで作った図解を共有する方法](https://giga-site.com/articles/whimsical-ai-diagram-share/index.md)
- [AI生成HTMLのアクセシビリティを確認してから共有する方法](https://giga-site.com/articles/check-ai-html-accessibility/index.md)
- [AIで作ったHTMLを「生成→共有→レビュー→差し替え」まで一気通貫で回すワークフロー](https://giga-site.com/articles/ai-html-review-workflow-end-to-end/index.md)
- [AI生成HTMLを関係者に見せる前の最終チェックリスト10項目](https://giga-site.com/articles/ai-html-stakeholder-checklist-before-share/index.md)
- [AIに作らせた2案のHTMLを別々のURLで配って意見を分けて集める方法](https://giga-site.com/articles/ai-html-ab-feedback-two-urls/index.md)
- [Lovableで作ったアプリをURLで共有する方法](https://giga-site.com/articles/share-lovable-app/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Excalidrawのテキスト生成図（AI機能）を共有する方法",
  "description": "手書き風の図でアイデアを素早く伝えたい人へ。ExcalidrawのAI生成図をHTML化して認証付き一時URLで配れば、相手がすぐ開けてフィードバックを返しやすくなる具体的な手順を紹介します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/excalidraw-ai-share",
  "url": "https://giga-site.com/articles/excalidraw-ai-share",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "AI活用",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "手書き風の雰囲気を保ったまま共有できますか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "PNGなどの画像で書き出してHTMLに表示すれば、手書き風のニュアンスをそのまま見てもらえます。解像度を意識すると見栄えが保てます。"
      }
    },
    {
      "@type": "Question",
      "name": "複数の案をまとめて見せたいです。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "図の画像をZIPにまとめてアップロードすれば、1つのページに複数案を並べて比較してもらえます。"
      }
    },
    {
      "@type": "Question",
      "name": "描き直すたびにリンクは変わりますか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "同じURLのままファイルを差し替えられるので変わりません。たたき台の描き直しでも相手は同じリンクを使えます。"
      }
    },
    {
      "@type": "Question",
      "name": "打ち合わせの場で見せるには。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "発行したURLのQRコードを表示すれば、参加者がその場でスマホから開けます。手元で図を確認しながら話せます。"
      }
    },
    {
      "@type": "Question",
      "name": "AIツールで作ったHTMLはそのまま共有しても安全ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "そのまま共有せず、外部送信先、フォーム、APIキー、社内URL、画像パスを確認してからURL化します。ツールの共有機能や書き出し仕様は変わるため、最新画面も確認してください。"
      }
    }
  ]
}
```