chamfer

chamfer — HTML スライド・資料のエディタ

AI が作った HTML スライド・資料を、ブラウザで直すエディタ

chamfer は、Claude や ChatGPT が作った HTML のスライドや資料を、作り直さずに仕上げるための Web アプリ。ブラウザで HTML を開き、文字・位置・色・画像を画面の上で直して、同じ HTML のまま書き出す。直していない部分は元のまま残るので、AI が作ったデザインを崩さずに最後の手直しだけができる。

chamfer を開く使い方を読む

無料・登録不要・インストール不要。手元に HTML が無ければ、開いた画面の「サンプルを開く」で試せる。

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

できること

  • AI が作った HTML をそのまま開く

    Claude・ChatGPT・Gemini など、作ったのが何かは問わない。1 枚の HTML も、CSS や画像が別のファイルになったフォルダも開ける。reveal.js のスライドや、Claude Design の deck-stage 形式にも対応。スライドの区切りは自動で見つける。

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

    スライドの文字をクリックすると、その場で書き換えられる。太字や色などの装飾はそのまま残る。

  • 位置・大きさ・色・画像を直す

    ドラッグで移動とリサイズ。右の欄で文字サイズ・文字色・背景色・余白・揃えを変え、画像は手元のファイルに差し替える。

  • ページと要素を足す・並べ替える

    ページの並べ替え・複製・削除。テキストボックスと四角形・楕円・直線・矢印を足せる。複数の要素をまとめて動かし、操作は 1 つずつ元に戻せる。

  • アニメーションを付けて発表する

    要素ごとにフェード・上下左右からのスライド・ズームを付けて順番を決められる。表示中のページから全画面で発表できる。

  • 3 つの形で書き出す

    直したところだけを載せた同じ HTML、開くだけで発表できる HTML、1 スライド 1 ページの PDF のどれかで書き出す。

使い方は 3 ステップ

  1. chamfer.takushio2525.com を開き、HTML ファイルを画面にドロップする（「HTML ファイルを選ぶ」でもよい）。CSS や画像が別のファイルなら、フォルダごとドロップする。
  2. 左の一覧から直したいページを選び、文字をクリックして書き換える。要素を選ぶと出る枠とつまみで位置と大きさを、右の欄で色や文字サイズを直す。
  3. ツールバーの「書き出し」から、「ページとして」・「発表用スライドとして」・「PDF として」のどれかを選ぶ。
要素を選ぶと枠とつまみが出て、右のインスペクタに文字サイズや色の欄が出る
要素を選んだところ。枠のつまみで位置と大きさ、右の欄で文字サイズや色を変える。

画面ごとの詳しい手順は AI で作った HTML スライドを、作り直さずに直す方法 に、PDF の作り方は HTML のスライドを 1 枚 1 ページの PDF にする にまとめてある。

開いたファイルの扱い

ログインしない限り、処理はすべてブラウザの中で終わり、開いたファイルはサーバーに送られない。フォルダで開いたときも、中身はブラウザの保存領域に写すだけで外には出さない。そのかわり、ページを再読み込みすると開いていた文書は消えるので、直したら書き出してから閉じる。

Google アカウントでログインしたときだけ、直している文書が手を止めるたびにクラウドへ自動で保存され、別の端末から開いたり、閲覧専用のリンクで人に見せたりできる。詳しくはデータの扱いに書いた。

向いていること・向いていないこと

こんなときchamfer でほかの方法
言い回しを 1 か所だけ直したいクリックしてその場で直す—
見出しの大きさや色、画像を整えたい選んで右の欄で直す・画像を差し替える—
提出用に 1 枚 1 ページの PDF が要る「PDF として」で書き出す—
構成を変えたい・ページを何枚も足したい向かないAI に頼み直す
PowerPoint や Google スライドにしたいできないそれぞれのアプリで作る
スマートフォンで細かく直したい向かない（PC のブラウザ向け）—
  • フォントの種類を変える欄、重なり順を入れ替える操作、白紙のページを足す操作は無い。
  • CSS ファイルそのものは編集しない。変更は HTML の中の要素に書き込まれる。
  • HTML の中のスクリプトは、編集している間は止めている（書き出すときには元に戻す）。

使い方ガイド

HTML スライドを作るところから発表するまでの流れは、まずHTML スライドの全体像：作る・直す・PDF にする・発表するで見渡せる。個別の手順は次の 3 本にある。

chamfer 使い方ガイドの一覧へ

In English

This page introduces chamfer in Japanese. The editor itself is available in English at chamfer.takushio2525.com: open an AI-generated HTML deck, fix the text, layout, colors and images in place, and export the same HTML or a one-slide-per-page PDF.

The guides are also available in English:

All guides in English