スライドとブログ記事の数式

スライドやブログ記事に typeset された数式を入れるには、いくつかのパーツの組み合わせが必要です — まず LaTeX をどこかで描画し、その結果を画像としてスライドや記事に貼り込む、という流れになります。やり方はいろいろあって（専用の LaTeX → 画像サービス、ブログテンプレートに MathJax を仕込む、Overleaf からのスクリーンショット等）、どれが向くかはプラットフォーム次第です。

drawtonomy はその選択肢の中の 無料・インストール不要・アカウント不要 な 1 つです。Math ツールが KaTeX で LaTeX を描画し、色とサイズを変えられ、透過背景の PNG / SVG にエクスポートできます — すべてブラウザ内で、アカウント登録不要で動きます。

$E = mc^2 のライブ KaTeX プレビュー — 上に LaTeX ソース、下にレンダー結果$

Math ツールの動作 — 上に LaTeX、下に KaTeX レンダー結果、右にカラーとサイズのパネル。

2 分のワークフロー

drawtonomy.com を開く。
下部ツールバーの fx アイコンをクリック（/ でも可）。

$drawtonomy 下部ツールバーで fx アイコンがハイライトされている$
キャンバスをクリック。LaTeX を入力。下にリアルタイムでレンダーされる。

$二次方程式の解の公式をライブプレビューで描画した Math エディタ$
Esc で確定。選択状態のまま、右パネルで色とサイズを設定。

$同じ式を赤色、60 px に変更$
Menu → Export → PNG（または SVG）。保存。
ファイルをスライドやブログ記事にドラッグ。

これで完了。インストール不要、アカウント不要、LaTeX 環境不要。

出力先ごとの推奨形式

貼る先	推奨形式	理由
Google Slides	PNG	SVG サポートが部分的。PNG はどこでも同じに見える
Keynote	SVG（または PNG）	Keynote は SVG を扱える。拡大しても綺麗
PowerPoint	PNG（Microsoft 365 では SVG も）	旧 PowerPoint は SVG を無視
Notion	PNG	Notion の画像埋め込みはラスター専用
Medium	PNG	Medium は SVG を強くダウンサンプリング
Substack	PNG	Substack は本文にラスターアップロードのみ
Ghost / WordPress	SVG	両方とも SVG をネイティブ描画
Discord / Slack	PNG	チャットアプリは SVG の扱いがバラバラ

迷ったら 透過背景の PNG がどこでも動きます。SVG はシャープですが統合がトリッキー。

スライドのテーマに合わせて色を変える

デフォルトは黒で、白スライド向け。ダークテーマのスライドなら Color パネルで白（またはブランドアクセント色）を選ぶ。同じ瞬間に数式が再描画されます。

色変更ごとに undo ステップが分かれるので、気軽に試せます。

他のアプローチとの位置づけ

どれも適した場面ではよく動くアプローチです。選び方は「どれくらい初期セットアップに時間をかけるか」と「出力先がどこか」でほぼ決まります。

LaTeX → 画像 Web サービス（CodeCogs、QuickLaTeX など）は単発の数式に手早くて、出力もきれい。継続利用に向くかどうかは、サービスごとに仕様や条件が変わることがあるので、利用時点での状況を確認するのが安心です。
ブログに埋め込む MathJax は、ソースを記事内に保持できるのが理想的。プラットフォームがテーマカスタマイズをどこまで許すかでセットアップの自由度が変わります。
Overleaf からスクリーンショット は、すでに LaTeX を書いてあるならいちばん早い経路です。キャプチャ DPI に応じて画質が決まります。
手打ち Unicode（x² + y² = r²）は、分数や積分が要らない単純な式ならむしろ最速です。

drawtonomy は数式をベクターで描画し、綺麗にエクスポートし、.drawtonomy.svg を保管しておけば後で再編集できます。

1 つの数式を超えて

Math ツールは無限キャンバスの上に乗っています。たとえば「3 つの数式を横並びに置いて間に図を挟む」ようなスライド 1 枚を組みたいときは、全体を drawtonomy で組んで 1 枚の画像として書き出せます — スライドツールのレイアウトグリッドと格闘する必要がありません。