AI時代になって、MarkdownやMDファイルで資料を作る機会はかなり増えました。仕様メモ、議事録、調査メモ、記事構成、プロンプト、要件整理。AIに頼むと、まずMarkdownで整った文章が返ってくる場面は多いと思います。
ただ、Markdownは「作る側」には便利でも、「見る側」にとっては必ずしも読みやすい形式ではありません。内容は良いのに、記号や階層が目に入りすぎて、社内共有した時にぱっと伝わりづらい。ここが、i-Styleの中でも気になっていたポイントでした。
一方で、AnthropicのClaude Code周辺でも、AIが生成する長い資料やレビュー結果をHTMLで見せる流れが話題になっています。Thariq氏の「The Unreasonable Effectiveness of HTML」でも、Markdownの壁のような文章より、HTMLでカード、表、図、色分け、ナビゲーションを持たせた方が、人が判断しやすいという考え方が示されています。
i-Styleでも、AIで作った「人が見る資料」は、かなりHTMLで共有する運用に寄ってきています。そこで社内用に作ったのが、AIでHTMLとして整えた資料をアップすると、すぐ共有リンクを発行できるツール「HTML maker」です。現時点では外部提供ではなく、i-Style社内のAI活用・資料確認のために使っています。Mac mini側のプロジェクトフォルダにあるREADME、実装、設計メモも確認し、期限付き共有、パスコード、埋め込み、安全な閲覧配信まで考えた社内ツールとして整理しました。
この記事を読むとわかること
- check_circleAI時代にMarkdown/MD資料が増えると、なぜ人には伝わりにくくなるのか
- check_circleAIにHTML資料を生成してもらい、リンク化すると何が便利になるのか
- check_circleHTMLファイルをアップすると即リンクを生成できるHTML makerの考え方
- check_circle社内AI活用を、チャット利用から仕組み化へ進める考え方
向き：AIで社内資料や提案メモを作っているが、Markdownのままだと人に伝わりにくく、HTMLで見せたいと感じている方
向かない：HTML makerを外部サービスとしてすぐ利用したい方。この記事は、現時点では社内限定ツールの活用事例です。
AIで資料を作るほど、「読む側」の体験が大事になる
AIに「この内容をまとめて」「仕様を整理して」「提案のたたき台を作って」と頼むと、Markdown形式で整った資料がすぐ出てきます。作る側から見ると、これはとても効率的です。
ただ、社内で共有する段階になると、Markdownのままでは読み手に負担が残ることがあります。見出しの階層、余白、表の見え方、強調のバランスが弱いと、良いことが書いてあっても、ぱっと伝わりにくいのです。だからi-Styleでは、読み手に見せる資料はAIにHTMLとして生成してもらうことが増えています。
| 形式 | 作る側の良さ | 読む側の課題 |
|---|---|---|
| Markdown | 軽い、AIが出しやすい、差分管理しやすい | 慣れていない人には記号や構造が読みにくい |
| 見た目を固定しやすい | 修正・差し替え・再共有が重くなりやすい | |
| HTML | 見出し、余白、表、導線を整えやすい | 共有用の置き場所がないと扱いづらい |
HTML makerでやりたかったこと
HTML makerは、大きな業務システムではありません。目的はもっとシンプルで、AIでHTMLとして整えた資料ファイルをアップすると、その場ですぐ共有リンクを生成できるようにすることです。
画面では「HTMLをドロップ。すぐURL発行。」という流れにしています。ここで重要なのは、Markdownを自動でHTMLに変換するツールではない、という点です。先にAIにHTML資料を作ってもらい、そのHTMLファイルをアップする。すると、社内で開けるリンクがすぐ発行されます。タイトルはファイル名を使い、期限は15日で自動設定され、必要なときだけ変更できます。実装上は7日・15日・30日のように期限を選べる設計にし、資料を出しっぱなしにしないことも重視しています。
画面上の主な機能
- ・HTMLをドラッグ&ドロップ、またはクリックで選択
- ・関連CSSがある場合はHTMLと一緒にドロップ
- ・タイトル、期限、公開範囲を必要に応じて変更
- ・リンク限定またはパスコード付きでURLを発行
- ・Notion、esaなどへの埋め込み、Slack、ChatWork、メールでの共有導線を想定
- ・共有中の資料を一覧で管理
- ・開く、共有、名前・公開設定、差替え、延長、削除ができる
HTMLファイルをリンクにできるだけで、確認の会話が変わる
社内共有では、内容そのものだけでなく、確認する人がどれだけ早く全体像をつかめるかが重要です。Markdownのまま渡すと、「どこを見ればいいか」「何が見出しで、何が補足か」を読み手が解釈する必要があります。
HTMLとして整えた資料をリンクで開けるようにすると、見出し、余白、表、ボタン風の導線、注意枠などがそのまま伝わります。ファイルを添付して「これを開いてください」と言うより、リンクを1つ送る方が圧倒的に楽です。結果として、内容確認の前に発生していた「見づらい」「どこを読めばいいかわからない」「ファイルが開けない」という摩擦を減らせます。
| 以前 | HTML maker後 |
|---|---|
| MarkdownやHTMLファイルをそのまま添付する | HTML資料をリンクで開ける状態にして共有する |
| 読む側がファイルを開く環境に迷う | ブラウザで確認できる |
| 差し替えのたびに再送しがち | 資料一覧から差替え・延長・削除を管理する |
| 資料の見た目が人によって変わる | HTMLとして整えた表示で確認できる |
共有ツールとして最低限ほしかった安全設計
HTML makerは、任意のHTMLを扱うツールです。そのため、単に「アップロードして公開できる」だけでは不十分です。管理する画面と、資料を見る画面を分け、閲覧側には書き込みAPIを持たせない設計にしています。
また、閲覧用のHTMLにはsandbox付きの制約をかけ、外部通信や外部JavaScript、iframeなどを安易に許可しない方針にしています。社内ツールであっても、AIが生成したHTMLを扱う以上、「便利」と「安全」を同時に見なければいけません。
| 設計ポイント | 理由 |
|---|---|
| 管理画面と閲覧画面を分離 | アップロード・削除などの操作権限と、資料を見る体験を分けるため |
| リンク限定・パスコード付き | ログインを求めずに共有しつつ、資料ごとの公開範囲を調整するため |
| 期限付きURL | 共有資料の消し忘れ、古い資料の見続けを減らすため |
| sandboxと外部通信制限 | AI生成HTMLを安全に確認するため |
| noindex方針 | 共有資料を検索エンジンに拾わせないため |
社内限定にしている理由
HTML makerは、現時点では社内限定で使っています。外部公開のための大きなサービスというより、i-Styleの中で「AIが作ったHTML資料を、すぐ人に見せられる状態にする」ための小さな道具です。
ここは意外と大事です。AI活用は、最初から大きなシステムにするより、毎日の小さな詰まりを解消するツールを作った方が早く効くことがあります。今回で言えば、「AIが作った資料を、読む人に伝わる形で渡したい」という一点に絞りました。
社内ツールとして割り切ったこと
- ・まずは社内の資料確認に用途を絞る
- ・URL発行、期限、リンク限定、パスコード、差替えなど必要な管理機能に集中する
- ・誰でも迷わない画面にする
- ・公開判断や重要資料の扱いは、人の確認を残す
AI活用は、チャットの上手さだけでは終わらない
AI活用というと、良いプロンプトを書くことに目が向きがちです。もちろんそれも大事です。ただ、社内で本当に効いてくるのは、AIが作ったものを人が確認し、直し、共有し、次の判断に使える形にするところです。
Markdownのままだと伝わりにくい資料は、AIにHTMLとして整えてもらう。そのHTMLファイルをアップして、共有URLを発行する。期限を決める。必要ならパスコードを付ける。Notionやesaに埋め込み、Slack、ChatWork、メールで共有できるようにする。ひとつひとつは小さな機能ですが、こういう小さな導線が整うと、AIで作った成果物が社内で使われやすくなります。
i-Styleとしての見方
AI導入で差が出るのは、モデル選びだけではありません。社内の「読みにくい」「探しにくい」「共有しづらい」を、AI前提の小さなツールで減らしていくこと。HTML makerは、そのための社内実験のひとつです。
まとめ：AIで作った資料を、人が読みやすい形に戻す
- ・AIでMarkdown/MD資料を作る機会が増えるほど、そのまま共有した時の伝わりにくさが課題になります。
- ・Markdownは作る側には便利ですが、読む側には視覚的に追いづらい場面があります。
- ・HTML makerは、AIで生成したHTMLファイルをアップすると、社内ですぐ確認できるリンクを生成する社内限定ツールです。
- ・期限、リンク限定、パスコード、差替え、延長、削除など、共有後の管理も含めて小さく整えています。
- ・任意HTMLを扱うため、管理と閲覧の分離、sandbox、外部通信制限、noindexなど安全側の設計も入れています。
- ・AI活用はチャットだけでなく、成果物を人に渡す導線まで設計すると、現場で使われやすくなります。
AIが文章や資料を作る速度は上がりました。次に整えるべきなのは、それを人が読み、判断し、共有できる形にすることです。Markdownのままでは伝わりにくいものは、HTMLとして作り、リンクでさっと見られるようにする。HTML makerは、そこに向けたi-Style社内の小さな実装です。
参考情報
- 一次情報: i-Style社内ツール「HTML maker」スクリーンショット、Mac mini上のREADME・実装・設計メモ（2026年7月26日確認）
- 参考: Using Claude Code: The Unreasonable Effectiveness of HTML（Thariq / X Article / 2026年5月8日）
- 参考: The unreasonable effectiveness of HTML — examples（Thariq / 2026年5月確認）
- 参考: Using Claude Code: The Unreasonable Effectiveness of HTML（Simon Willison / 2026年5月8日）
- 関連: AIに設計書を書かせるなら、MarkdownだけでなくHTMLも選択肢になる
AI資料をHTMLリンクで共有する仕組み化から始めませんか
i-Styleでは、AIの使い方研修だけでなく、資料作成、共有、確認、公開前チェックのような実務導線まで含めて、AI成果物が人に伝わる仕組みを一緒に設計します。
お問い合わせページへarrow_forward問い合わせ前に、i-Styleサポートデスクbotでも相談できます
「AIで作った資料が社内で読まれにくい」「まず何を小さな社内ツールにすればよいか」など、軽い相談はサポートデスクbotでも確認できます。
i-Styleサポートデスクbotで聞くarrow_forward