無料で使える？

無料で使える。アカウントの登録も要らない。Google アカウントでログインしたときだけ、直している文書をクラウドに置いたり、閲覧専用のリンクで共有したりできる。

開いたファイルはどこかに送られる？

ログインしていなければ、処理はすべてブラウザの中で終わり、開いたファイルはサーバーに送られない。ログイン中は、編集して手を止めたときに、あなたのアカウントのクラウドへ自動で保存される（開いただけでは送らない）。

Claude や ChatGPT 以外で作った HTML でも開ける？

開ける。作ったのが何かは問わず、1 枚の HTML でも、CSS や画像が別のファイルになったフォルダでも開ける。reveal.js のスライドや、Claude Design が書き出す deck-stage 形式のスライドにも対応している。

PowerPoint や Google スライドに変換できる？

できない。chamfer が書き出すのは、直した HTML、単体で発表できる HTML、1 スライド 1 ページの PDF の 3 つ。

スマートフォンでも使える？

開くことはできるが、狭い画面ではページの一覧とインスペクタが畳まれるので、細かい手直しには向かない。PC のブラウザで使う前提で作っている。

使い方ガイド

AI で作った HTML スライドを、作り直さずに直す方法

更新 2026 年 9 月 29 日・takushio2525・English

Claude や ChatGPT に「HTML でスライドを作って」と頼むと、数十秒でそれらしい資料ができあがる。ただ、そのまま使えることは少ない。言い回しが 1 か所だけ気になる、見出しが大きすぎて 2 行に折れている、仮の画像を自分の写真に替えたい——残るのはたいてい、こうした小さな手直しだ。

このページでは、その最後の手直しをどこで・どうやるかを、3 つの方法の向き不向きと、chamfer（ブラウザで動く無料のエディタ）で直す手順に分けて説明する。作るところから PDF・発表までの流れ全体はHTML スライドの全体像にまとめてある。

chamfer の編集画面。左にページのサムネイル、中央に選んだスライド、右にインスペクタが並ぶ — chamfer の編集画面。左がページの一覧、中央がスライド、右が選んだ要素の情報（インスペクタ）。

「直して」と頼み直すと、ほかの場所まで変わる

スライドを作らせたあと、同じ会話で「3 枚目の見出しを短くして」と頼むこともできる。ただ、AI は HTML を丸ごと書き直して返すことが多く、そのとき頼んでいない場所——気に入っていた配色、ほかのページの言い回し、図の位置——まで少しずつ変わってしまうことがある。長い HTML では、途中が「以下同様」のように省かれて返ってくることもある。

直したい場所が 1〜2 か所なら、AI に全体を書き直させるより、その場所だけを手で直す方が早くて確実だ。反対に、構成を変えたい・ページを何枚も足したいといった大きな変更は、手で直すより AI に頼む方が向いている。

直し方は 3 つ。向いている直しが違う

直し方	向いている直し	気をつけること
AI に頼み直す	構成を変える、ページを足す、文章をまとめて書き換える	頼んでいない場所まで変わることがある。直すたびに全体を見直す必要がある
HTML を手で書き換える	場所の分かっている文字や色の値を 1 つ変える	タグと CSS を読める必要がある。直したい文字がどの行にあるかを探すのに時間がかかり、閉じタグを消すと表示が崩れる
GUI のエディタで直す	文字・位置・大きさ・色・画像の差し替えを、見た目を見ながら直す	構成を大きく変える作業には向かない。スクリプトで動く部品は編集中は止まる

目安は、内容や構成を変えたいなら AI に、見た目と言い回しの仕上げなら手で。AI に骨格を作らせ、最後の仕上げだけを手でやるのが、いちばん崩れにくい。手で直したあとに AI へ頼み直す場合は、直したファイルを渡して「この HTML の〇〇だけを変えて、ほかは変えないで」と頼む（元の会話の HTML には手直しが入っていないため）。

chamfer で直す手順

chamfer は、AI が作った HTML をそのまま開いて直し、同じ HTML のまま書き出すためのエディタ。ブラウザで chamfer.takushio2525.com を開くだけで使え、インストールもアカウントも要らない。開いた HTML は変換もレンダリングし直しもしないので、直していない部分は元のまま残る。

1. HTML ファイルを開く

画面に HTML ファイルをドラッグ＆ドロップするか、「HTML ファイルを選ぶ」を押して選ぶ。CSS や画像が別のファイルになっている場合は、フォルダごとドロップするか「フォルダを選ぶ」を使う（後述）。手元に HTML が無ければ、「サンプルを開く」で 7 枚のデモが開く。

chamfer の最初の画面。HTML ファイルを選ぶ・フォルダを選ぶ・サンプルを開くのボタンが並ぶ — 最初の画面。ファイルを画面のどこにドロップしても開ける。

2. 直したいページを選ぶ

左に並ぶサムネイルから、直したいページを選ぶ。chamfer はスライドの区切りを自動で見つける。reveal.js の section、class に slide や page を持つ要素の並び、body の直下に並んだ section や article などが手がかりになる。区切りが見つからない文書は、全体を 1 ページとして開く。

3. 文字をその場で書き換える

キャンバスの文字をクリックすると、その場で書き換えられる。Enterで確定、Shift+Enterで改行、Escで取り消し。キャンバスの上で直す限り、太字や色などの文字の装飾はそのまま残る（右のインスペクタの「テキスト」欄で置き換えると、中身がただの文字になって装飾は外れる）。

スライドの見出しをクリックして、その場で文字を書き換えているところ — 見出しをクリックして、その場で書き換えているところ。

4. 位置と大きさを直す

要素をクリックすると、緑の枠とつまみが出る。要素をそのまま掴んでドラッグすると位置が変わり（ページの中央や端、ほかの要素の端に近づくと吸い付いて補助線が出る。Altを押している間は吸い付かない）、四隅と辺のつまみをドラッグすると大きさが変わる（文字はクリックすると編集が始まり、掴んで動かすと移動になる）。選んだ状態で矢印キーを押すと 1px ずつ、Shiftを押しながらなら 10px ずつ動き、Deleteで要素ごと消せる。⌘+Dで複製、⌘+Cと⌘+Vでコピーと貼り付け（別のページにも貼れる）。右の欄の「整列」で、選んだ要素どうしの端や中央を揃えたり、3 つ以上を等間隔に並べたりできる（1 つだけならページに揃う）。移動は CSS の transform で表すので、周りの要素が押し出されてレイアウトが崩れることはない。

5. 文字サイズ・色・画像を変える

要素を選ぶと、右のインスペクタの「スタイル」で、サイズ・文字色・背景色・枠線（色と太さ）・角丸・不透明度・内側余白・外側余白・揃え（左 / 中央 / 右）・太字を変えられる（文字の無い図形では、文字色の行が線の色になる）。変えた値は、その要素の style 属性に書き込まれる。元の CSS ファイルや <style> は書き換えないので、ほかのページの同じ見出しまで一緒に変わることはない。

画像を選ぶと「差し替え…」が出るので、手元の画像を選ぶ。新しい画像を足すときは「挿入」の「画像…」を選ぶか、画像を貼り付ける・画面に落とす。画像は HTML の中に埋め込まれる（data URI）ので、書き出したファイルは 1 枚で完結する。長辺が 1920px を超える写真は、縮めてから埋め込む。

要素を選ぶと枠とつまみが出て、右のインスペクタに文字サイズや色の欄が出る — 要素を選んだところ。掴んで位置、枠のつまみで大きさ、右の欄で文字サイズや色を変える。

6. まとめて直す・元に戻す

Shiftを押しながらクリックすると、選択に足せる。スライドの余白からドラッグすると、四角く囲んだ中に完全に収まった要素をまとめて選べる。まとめて選んだ要素には、移動と文字色などの変更が一度に効く。

操作は「元に戻す」（⌘+Z、Windows は Ctrl+Z）で 1 つずつ戻せる。「やり直す」は ⇧+⌘+Z（Windows は Ctrl+Y）。ドラッグの途中は履歴に積まず、手を離したところで 1 つになる。

7. ページを並べ替える・要素を足す

左のサムネイルをドラッグすると、ページの順番を変えられる。サムネイルにマウスを載せると出るボタンで、そのページを複製・削除できる。一覧の上の「＋」は、表示中のページを複製して後ろに足す（白紙のページを作る機能は無いので、似たページを複製してから中身を直す）。

ツールバーの「挿入」からは、テキストボックスと、四角形・角丸四角形・楕円・三角形・ひし形・星・吹き出し・太い矢印・直線・矢印の図形を、表示中のページの中央に足せる。図形の線の色・塗り・線の太さは右の欄で変えられる。足した要素はほかの要素の上に浮かぶので、既存の中身は 1px も動かない。

8. 書き出す

ツールバーの「書き出し」を押すと、書き出す形を選ぶ画面が出る。何に使うかで選ぶ。

「ページとして」: 取り込んだ HTML に、直したところだけを載せたもの。ファイル名は 元の名前.chamfer.html。元のファイルの代わりにそのまま使える。
「発表用スライドとして」: 開始画面と矢印キーでの送りを同梱した HTML（元の名前.chamfer-deck.html）。渡した相手はブラウザで開くだけで発表できる。
「PDF として」: 1 スライド 1 ページで印刷する。ブラウザの印刷画面で PDF に保存する（PDF にする方法で詳しく説明している）。

「どう書き出す？」の画面。ページとして・発表用スライドとして・PDF としての 3 つから選ぶ — 書き出しの画面。上の 2 つは 1 枚の HTML ファイルになる。

「ページとして」書き出したときに変わるのは、直したところ（触った要素の style と属性、足したり消したりした要素やページ）だけ。何も触らずに書き出せば、元と同じ中身の HTML が返る。chamfer が編集のために付けた目印は書き出すときに外す（付けたアニメーションの設定だけは、書き出した HTML でも再生できるように残る）。

CSS や画像が別のファイルになっているとき

AI が index.html と style.css と画像のフォルダ、のように複数のファイルで出してくることもある。この場合、HTML だけを開くと見た目が欠ける。chamfer は、HTML が参照している CSS や JavaScript のファイルが一緒に読み込まれていないと、そのファイル名を知らせる。知らせが出たら、フォルダごと開き直す。

フォルダで開いても、HTML の中の相対パスは書き換えない。フォルダの中身はブラウザの保存領域（IndexedDB）に写すだけで、サーバーには送らない。HTML が複数入っていれば、開くものを選べる。書き出すのは直した HTML 1 枚だけなので、元のフォルダの HTML と入れ替えれば、CSS や画像の参照はそのまま動く。

編集中に止まるもの・できないこと

HTML の中のスクリプト（<script> や onclick など）は、編集している間は止めている。知らない HTML を開いても勝手に動かないようにするためで、書き出すときには元に戻す。そのため、クリックで切り替わるタブのように、スクリプトで動く部品は編集中は動かない。
フォントの種類を変える欄、要素の重なり順を入れ替える操作、白紙のページを足す操作は無い。
ログインしていないときは、ページを再読み込みすると開いていた文書が消える。直したら書き出してから閉じる。
画面の幅が狭いと、ページの一覧とインスペクタが畳まれる。PC のブラウザで使う前提で作っている。
PowerPoint（.pptx）や Google スライドの形式には書き出せない。

よくある質問

Q. 無料で使える？: 無料で使える。アカウントの登録も要らない。Google アカウントでログインしたときだけ、直している文書をクラウドに置いたり、閲覧専用のリンクで共有したりできる。
Q. 開いたファイルはどこかに送られる？: ログインしていなければ、処理はすべてブラウザの中で終わり、開いたファイルはサーバーに送られない。ログイン中は、編集して手を止めたときに、あなたのアカウントのクラウドへ自動で保存される（開いただけでは送らない）。
Q. Claude や ChatGPT 以外で作った HTML でも開ける？: 開ける。作ったのが何かは問わず、1 枚の HTML でも、CSS や画像が別のファイルになったフォルダでも開ける。reveal.js のスライドや、Claude Design が書き出す deck-stage 形式のスライドにも対応している。
Q. PowerPoint や Google スライドに変換できる？: できない。chamfer が書き出すのは、直した HTML、単体で発表できる HTML、1 スライド 1 ページの PDF の 3 つ。
Q. スマートフォンでも使える？: 開くことはできるが、狭い画面ではページの一覧とインスペクタが畳まれるので、細かい手直しには向かない。PC のブラウザで使う前提で作っている。