HTML Share — HTMLを、ドラッグするだけで共有
現職の社内向けに作った、HTMLファイルをドラッグするだけで共有URLを発行できるツール。Claudeで作った資料・レポート・デモを、ZIPや添付なしで、URLひとつで渡せます。現場の「共有の手間」を起点に、企画とUI設計を行い、実装はAIに任せて、社内デザインシステムに沿って整えました。
HTMLを、URLひとつで渡す。
HTML Share は、HTMLファイルをドラッグ&ドロップするだけで共有URLを発行できる、社内向けのWebツールです。アップロードした瞬間にURLが自動でコピーされ、あとは Slack やメールに貼るだけ。受け取った人は、そのURLをブラウザで開くだけで閲覧できます。ダウンロードも解凍も、専用アプリも要りません。
きっかけは、自分自身の日々の作業でした。Claude で資料やレポート、UIデモを HTML で作る機会が増えるほど、それを「どう渡すか」の手間が目立つようになった。その引っかかりを、そのままツールにしたのが HTML Share です。
「作る」より、「渡す」でつまずいていた。
HTMLで作った資料は、そのままでは共有しづらい。ZIPに固めて添付し、相手はダウンロードして解凍して開く。あるいは Word や PDF に変換すると、レイアウトが崩れたり、動きのあるデモが伝わらなかったりする。「作る」ところより、「渡す」ところに毎回コストがかかっていました。
けれど中身はただのHTML。ブラウザさえあれば開けるはずのものを、なぜ毎回ファイルとして送っているのか。だからこのツールは、共有を「URLを配るだけ」に置き換えることだけを目的にしました。作る側も、受け取る側も、手間をゼロに近づけることが起点です。
手間を、両側から削る。
作る側は、一動作で終わる。
ファイルをドロップした瞬間にアップロードが走り、共有URLは自動でクリップボードへ。「発行」を意識させないことを狙い、ドロップから貼り付けまでを一続きの動作にしています。⌘U / ⌘K のショートカットも用意しました。
受け取る側に、何も要求しない。
閲覧に必要なのはブラウザだけ。ダウンロードも解凍も専用アプリも不要です。会議中にスマホで確認したい場面のために、QRコードもその場で表示できるようにしました。
社内デザインシステムに、沿わせる。
色・余白・サイズは社内共通のトークンに従い、ボタンや入力は共通コンポーネントを使用。一度きりのツールではなく、チームの見た目・作法の中で自然に使え、あとから引き継げることを前提に作りました。
かたちにしたもの。
即・URL発行＆自動コピー
ドロップした瞬間に共有URLを生成し、クリップボードへ自動コピー。そのまま Slack に貼れます。
ブラウザで即閲覧
受け取った人はURLを開くだけ。ダウンロード・解凍・専用アプリは不要です。
QRコード表示
スマホでの確認や会議中の共有に。共有URLをその場でQRコードにできます。
アップロード前プレビュー
送る前に、ローカルで中身を確認。意図したHTMLか、その場でチェックできます。
履歴管理
直近10件の共有URLをブラウザに保存。過去に配ったリンクの再利用も簡単です。
キーボードショートカット
⌘U でアップロード、⌘K でURLコピー、⌘H で履歴。手を止めずに共有できます。
つくり方。
日々の「共有の手間」を、起点にする
Claudeで作ったHTMLをどう渡すか。自分が実際に困っていた場面から要件を定め、「URLを配るだけ」に絞り込みました。
社内デザインシステムに沿ってUIを組む
共通トークンとコンポーネントを使い、アップロード導線・プレビュー・QR・履歴を、チームの作法の中で自然に使える形にまとめました。
Next.js × Vercel Blob。コードはAIに書かせる
App Router＋TypeScript＋Tailwind で実装。ファイルは Vercel Blob に保存し、URLは推測困難なランダムID（nanoid）で発行する構成にしました。
Vercel にデプロイし、社内へ
バックエンドを別途持たずに Vercel 上で完結。社内で実際に使ってもらいながら、細かな使い勝手を整えていきました。
毎回の「ちょっと面倒」を、ツールにする。
HTML Share は、派手な機能を持つツールではありません。けれど「毎回ちょっと面倒」を一つ消すだけで、日々の共有はずいぶん軽くなります。自分のAIワークフロー（Claudeで作る）から生まれた引っかかりを、そのままツールにできたことが、この制作の芯でした。
社内デザインシステムに沿って作ったのは、自分だけの便利で終わらせないためです。チームの見た目・作法の中に収まっていれば、他の人にも使ってもらえ、あとから引き継げる。「小さくても、ちゃんと残るもの」を意識した一つです。