📸 コードスクリーンショット

コードを貼り付けて言語・テーマ・背景グラデを選択 → きれいな PNG スクリーンショットを生成。SNS シェア・記事のヘッダー画像に。

完全無料登録不要ブラウザ完結 5 言語対応ダークモード

🔒 プライバシーについて

・すべての処理はあなたのブラウザ内で完結します
・入力したコードはサーバーに送信されません
・保存ログ・履歴・データベース等は存在しません
・登録・ログイン・課金は一切不要です

言語

テーマ

背景

ファイル名

パディング (64)

コード

example.js

📖 つまずきやすいポイント

コードを貼り付けて言語・テーマ・背景を選ぶと、シンタックスハイライト付きの PNG を書き出します。highlight.js と html2canvas を使い、処理はブラウザ内で完結します。できあがるのは画像なので、中のコードは選択もコピーも検索もできません — この 1 点が、以下の注意すべきことのほとんどを決めています。装飾としては優れていますが、コードを伝える手段としてはテキストに大きく劣ります。

ケース	何が起きるか	どうする
書き出した PNG がぼやける	画像はプレビューと同じピクセル比で書き出されます — Retina なら 2 倍ですが、それでもぼやける原因はその先にあります。SNS や Slack にアップロードすると、プラットフォーム側で自動的に縮小され、JPEG に再圧縮されます。とくに横に長い画像はタイムラインの幅に合わせて大きく縮められるため、40 行のコードを 1 枚に収めた画像は、実機で見るとほぼ確実に読めません。自分の画面で開いたときは読めるので、問題に気付きにくいのが厄介な点です。	解像度を上げるより、情報量を減らすほうが効きます。具体的にはコードを 20 行以内に絞り、フォントサイズを上げてください — 縮小されても文字が潰れないのは、元のフォントが大きい場合だけです。パディングを削って余白を減らすのも有効で、同じ幅なら文字が相対的に大きくなります。長いコードを見せたいときは、画像を分割するのではなく、そもそも画像にしないでください — 20 行を超えるコードは、画像で見せる用途に向いていません。投稿する前に、必ずスマートフォンで開いて確認してください — PC の画面だけで判断すると、読者の大半が読めない画像を出すことになります。
日本語や絵文字がずれる・消える	html2canvas は DOM を読んで Canvas に描き直しますが、Web フォントの読み込みが完了する前に描画を始めることがあります。その場合代替フォントで描かれるため、文字幅が変わってインデントが崩れます。さらに、コード用の等幅フォントの多くは日本語のグリフを持っていません — `Monaco` や `Menlo` に日本語を混ぜると、日本語部分だけ別のフォントに落ちて行の高さと文字幅が揃わなくなります。絵文字はさらに厄介で、OS ごとに見た目が違ううえ、カラー絵文字は描画されず豆腐になる環境もあります。	書き出す前にフォントの読み込みを待ってください — `await document.fonts.ready` が最も簡単な方法です。日本語を含むコードを扱うなら、日本語対応の等幅フォント (`Source Han Code JP`、`BIZ UDGothic`、`MS Gothic` など) を明示的に指定してください — これらは日本語を半角 2 文字分の幅で揃えるので、インデントが崩れません。絵文字はコードスクリーンショットでは避けるのが無難です — 環境依存が大きすぎます。そして最終的な確認は、書き出した PNG を実際に開いて、インデントが揃っているかを目で見てください — プレビューと出力は別物です。
記事の本文にコードの画像を使ってしまう	画像にした瞬間、読者はコードをコピーできなくなります — 手で書き写すか、諦めるかの二択です。それだけでなく、スクリーンリーダーは読み上げられず、ブラウザの検索も効かず、翻訳もされず、検索エンジンからも見えません。モバイルで拡大すると潰れ、ダークモードやフォントサイズの設定も一切効きません。Stack Overflow がコードのスクリーンショット投稿を明確に禁止しているのは、これらすべてが質問と回答の役に立たないからです。技術記事で最も重要なのは読者が自分の環境で試せることで、画像はそれを直接妨げます。	コード画像は「装飾」の場面だけに使ってください — SNS のカード画像、記事のヘッダー、スライドの表紙といった、そもそも読ませることを目的としていない場所です。記事の本文には必ずテキストのコードブロックを置いてください。両方欲しい場合は、ヘッダーに画像、本文に同じコードのテキスト版という構成にすれば、見栄えと実用性の両方が取れます。判断の基準は「読者がこのコードを実行したいか」です — 実行してほしいなら画像にしてはいけません。SNS に貼るときも、投稿本文かリンク先にテキスト版を用意してください — 「動かない」という反応の大半は、写し間違いです。

スクリーンショットは、写すつもりの無かったものまで写します。コードの一部を切り取ったつもりでも、ファイルパス (そこにユーザー名が入っていることがあります)、内部のホスト名、社内の識別子、コメントに書かれた課題番号、そして API キーやトークンが一緒に写り込みます。テキストなら Ctrl+F で機械的に探せますが、画像はレビューでも検索でも引っかからないため、公開されたまま長期間残ります。公開前に、画像を開いて 1 行ずつ目で読んでください — 「たぶん大丈夫」で出したものが問題になるのは、たいていこの経路です。もう 1 点、他人のコードを画像にしても著作権は消えません。ライセンスの表示義務がある場合、スクリーンショットにしたことは免除の理由になりません — 引用の範囲を超えるなら、出典とライセンスを併記してください。

📖 使い方

1

コードを貼り付け

テキストエリアにコードを貼り付けます。
2

言語・テーマ・背景を選ぶ

シンタックスハイライトと配色がプレビューに即反映されます。
3

PNG として保存

ダウンロードボタンで PNG を保存。クリップボードにもコピー可能。

❓ よくある質問

コードはサーバーに送られますか？

いいえ。highlight.js と html2canvas を CDN から読み込み、ブラウザ内のみで処理します。

対応言語は？

JavaScript / TypeScript / Python / Go / PHP / Ruby / Bash / JSON / HTML / CSS / SQL に対応。highlight.js が自動検出も行います。

生成画像の解像度は？

プレビューと同じピクセル比 (Retina ディスプレイでは 2x) で書き出されます。

🔗 関連ツール

🐛 このツールで問題が発生しましたか？

完全無料・登録不要。再現手順だけでも結構です。届いたご報告は運営者に直接届き、修正の参考にします。