---
title: "Codestral（Mistral）で生成したHTMLを共有する方法"
description: "CodestralのAPIやエディタ拡張で生成したHTMLを、コードではなく動く画面として関係者に見せたい開発者向け。取り出しから一時URL公開までの流れと共有時の考え方を解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/share-mistral-codestral-html"
markdown: "https://giga-site.com/articles/share-mistral-codestral-html/index.md"
category: "AI活用"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# Codestral（Mistral）で生成したHTMLを共有する方法

CodestralはMistralが提供するコード特化のモデルで、APIやエディタ拡張からHTMLやスニペットを生成できます。ただし生成結果はコードとして返ってくるだけで、そのままでは他の人に動くものを見せられません。この記事ではCodestralの出力を一時URLに変える流れを整理します。外部サービスの仕様は変わるため、本文ではレビュー共有で変わりにくい判断軸を中心に整理します。

> Source HTML: https://giga-site.com/articles/share-mistral-codestral-html
> Article index: https://giga-site.com/articles/index.md

## Codestralの出力はコードのまま返ってくる

CodestralはMistralのコード生成モデルで、API経由やエディタの補完機能を通じてHTMLやCSS、JavaScriptを出力します。複数言語に対応し、コードの穴埋めや一括生成が得意なため、UIの雛形作りにも使えます。

ただし返ってくるのはテキストとしてのコードで、描画された画面ではありません。チームや社外の協力者に「このマークアップで問題ないか」を確認してもらうには、ブラウザで開ける形にして渡すほうが伝わります。

## API出力をHTMLファイルに整える

Codestralから受け取ったコードを、index.htmlとして保存します。API応答にはコードブロックの記号や説明が混ざることがあるので、純粋なHTML部分だけを取り出してください。

CSSやJavaScriptが別ファイルに分かれる構成なら、それぞれを保存して相対パスで読み込ませ、まとめてZIPに固めます。index.htmlを起点にしておけば、配布先でもそのまま表示されます。

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

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

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

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

## 社外レビュー用の一時URLを発行する手順

整えたファイルは、ドロップするだけで共有URLが発行されるサービスに渡せば、サーバーを用意せず社外にも見せられます。ここではギガサイト便を例に最短の流れを示します。

1. Codestralの出力からHTMLを取り出してindex.htmlに保存する
2. 別ファイルのCSS・JSがあれば相対パスでまとめてZIPにする
3. ギガサイト便のトップページにHTMLかZIPをドロップする
4. 発行された 〇〇.giga-site.com 形式のURLを確認する
5. 認証方式と公開期限を選んで社外の相手にURLを送る

## 社外に渡すときこそ認証を併用する

社外のレビュアーに見せる場合、誰でもURLを開ける状態だと意図しない相手に渡る恐れがあります。一時公開ページには検索結果に出ないようnoindexが付きますが、noindexはアクセス制御ではないため、メール認証やパスワードを併用して相手を限定してください。

特定のメールアドレスにワンタイムコードを送るメール認証を使えば、招待した相手だけが閲覧できます。公開期限を短めに設定しておけば、レビュー後に自動で閉じられます。

## 再生成しても同じURLを使い続ける

Codestralは条件を変えて何度も生成し直す使い方が向いています。共有後に出力を更新するたびにURLを送り直すのは煩雑なので、同じURLのままファイルを差し替えられる仕組みを使うと連絡の手間が減ります。

カスタムスラッグを設定しておけば、案件名がわかるURLにできて管理もしやすくなります。アクセスログで社外のレビュアーが確認済みかどうかも把握できます。

## よくある質問

### Codestralの出力を社外に直接見せられますか

コードはそのままでは描画されないため、index.htmlとして保存してから共有URLを発行するサービスに渡してください。閲覧者のブラウザで実際の画面を確認してもらえます。

### 招待した社外の人だけに限定したいです

メール認証（ワンタイムコード）を選べば、指定したメールアドレスの相手だけが閲覧できます。noindexはアクセス制御ではないので、限定公開には認証を併用してください。

### URLを案件ごとにわかりやすくできますか

カスタムスラッグでURL末尾を変更できるため、案件名を含めた識別しやすいURLにできます。

### 公開を終わらせ忘れが心配です

公開期限を設定すれば、期限が切れた時点で自動的に閲覧できなくなります。無料プランの公開期限は最長7日です。

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

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

## 関連記事

- [bolt.diyで作ったHTMLを共有URLにする方法](https://giga-site.com/articles/share-bolt-diy-html/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": "Codestral（Mistral）で生成したHTMLを共有する方法",
  "description": "CodestralのAPIやエディタ拡張で生成したHTMLを、コードではなく動く画面として関係者に見せたい開発者向け。取り出しから一時URL公開までの流れと共有時の考え方を解説します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/share-mistral-codestral-html",
  "url": "https://giga-site.com/articles/share-mistral-codestral-html",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "AI活用",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Codestralの出力を社外に直接見せられますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "コードはそのままでは描画されないため、index.htmlとして保存してから共有URLを発行するサービスに渡してください。閲覧者のブラウザで実際の画面を確認してもらえます。"
      }
    },
    {
      "@type": "Question",
      "name": "招待した社外の人だけに限定したいです",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "メール認証（ワンタイムコード）を選べば、指定したメールアドレスの相手だけが閲覧できます。noindexはアクセス制御ではないので、限定公開には認証を併用してください。"
      }
    },
    {
      "@type": "Question",
      "name": "URLを案件ごとにわかりやすくできますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "カスタムスラッグでURL末尾を変更できるため、案件名を含めた識別しやすいURLにできます。"
      }
    },
    {
      "@type": "Question",
      "name": "公開を終わらせ忘れが心配です",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "公開期限を設定すれば、期限が切れた時点で自動的に閲覧できなくなります。無料プランの公開期限は最長7日です。"
      }
    },
    {
      "@type": "Question",
      "name": "AIツールで作ったHTMLはそのまま共有しても安全ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "そのまま共有せず、外部送信先、フォーム、APIキー、社内URL、画像パスを確認してからURL化します。ツールの共有機能や書き出し仕様は変わるため、最新画面も確認してください。"
      }
    }
  ]
}
```