コードを画像に変換：読みやすいコードスクリーンショットの作り方
チュートリアル、スライド、進捗共有に使うコードのスクリーンショットが必要なら、Code to Image に短いコードを貼り付け、言語と見た目を選んで PNG に出力できます。IDE 全体や開いているタブ、デスクトップまで写す必要はありません。
大切なのは、公開するサイズでも読めることです。この記事では実際のコード画像出力を例に、行番号と折り返しを確認し、画像と一緒にコピー可能な Markdown の原稿も残す手順を紹介します。
- コード画像作成ツールを開き、見せたいコードだけを貼り付けます。専用エディターに Markdown のコードフェンスは不要です。
- プログラミング言語を明示的に選び、キーワード、文字列、コメントの色を確認します。色が付くことはコードの正しさを保証しません。
- テーマとフォントを選びます。特定の行を説明するなら行番号を有効にし、最も長い行も読めるようキャンバスを調整します。
- PNG を出力してダウンロードしたファイルを開きます。読者が見る大きさで先頭と末尾の行、インデント、括弧、フッターを確認します。
文字を小さくしたり、極端に縦長の画像にしたりする前に、関係のない準備部分を減らします。モジュール全体が必要ならソースファイルを共有し、画像では一部分を取り上げます。
次の JavaScript 関数は再試行のラベルを作る補助関数です。リクエストの送信や再試行の予約、本番用の再試行制御は行いません。短い例なので、出力画像のインデント、引用符、閉じ括弧を確認しやすくなります。
記事やリポジトリーには、次の Markdown 版を保存します。専用エディターに貼り付けるのはフェンス内の JavaScript だけです。
```javascript
function retryLabel(attempt, limit = 3) {
if (attempt >= limit) {
return "Stop and review";
}
return `Retry ${attempt + 1} of ${limit}`;
}
console.log(retryLabel(0));
```
再現できるよう、六つの言語版で同じ原稿を使っています。画像の見せ方ではなくフェンスの書き方を知りたい場合は、Markdown コードブロックのガイドを参照してください。
元の PNG を開いて、レイアウトを使う前に確認してください。この画像は実際の専用コードエディターで JavaScript を選択し、行番号を有効にして 2 倍の画像出力で生成しました。無料出力のブランド表示を残しています。架空の IDE の画面や性能テストではなく、実際のコード描画結果です。
こうした画像はチュートリアルやチーム内の議論の参照に使えます。行番号があれば条件式や return 文を指し示せますが、コピーや検討のためには文字のソースも必要です。
| 問題 | 調整すること |
|---|---|
| 埋め込むと文字が小さすぎる | 表示する行を減らすか、掲載領域を広げる |
| 長い式が予想外の位置で折り返す | キャンバスを広げるか、意味を変えずに例を短くする |
| 説明する行番号と合わない | 説明全体でソースと行番号の設定をそろえる |
| コメントや文字列が背景に埋もれる | コントラストの高いテーマを選び、出力ファイルを確認する |
| 最後の行やフッターが切れる | 高さを確認するか、固定高さのレイアウトをやめる |
| 元画像は鮮明なのに共有後にぼやける | アップロード後や埋め込み後の画像も確認する |
高解像度は画素を増やしますが、長いコードを狭い段組みに入れても自動で読みやすくなるわけではありません。先頭の行、閉じ括弧、ブランド表示を切り取って例の意味を誤解させないようにします。SNS 用の構成は Markdown 画像の共有手順も参考にしてください。
画像の直前か直後にフェンス付きのソースを置くか、対応するソースファイルへリンクします。代替テキストには言語と例の要点を記します。コマンドや重要な実装の詳細が、画像の中にしか存在しない状態は避けてください。
画像は見せ方を保ち、文字はコピー、検索、コードレビューに役立ちます。説明もコードと同じくらい重要なら、Markdown エディターで見出し、本文、コードを一枚にまとめられます。コードそのものが主役なら、専用ツールから始める方が直接的です。
はい。無料のブラウザー出力にはブランド表示が付きます。2026 年 11 月 3 日の確認時点では、ログインした無料アカウントは透かしなしのブラウザー出力を合計 5 回使えます。追加分は料金ページの Creator または 1 回分の出力パスを確認してください。新たに購入した API クレジットは API 出力用で、ブラウザー出力の透かし除去には使えません。
今回のように文字が中心なら、まず PNG を使います。ツールは JPEG、WebP、文書で渡すための PDF にも対応します。出力後とアップロード後の両方で確認してください。この記事は各サービスの現在のアップロード上限や再圧縮ルールを保証していません。
この手順はソースを画像向けに整えるもので、実行済みやテスト合格の証拠にはなりません。他の人に勧める前に、適切な環境で元のコードをレビューし、テストしてください。
いいえ。出力にはサーバー側の処理を使い、自動的な伏せ字処理も前提にできません。認証情報、内部の接続先、個人情報はアップロード前に取り除き、組織の取り扱い規則に従ってください。オフライン動作や特定の保存期間は約束していません。
短いコードを用意してコード画像として出力し、実際のダウンロードを掲載予定の大きさで確認します。対応するソースと、注目する行の短い説明も添えましょう。共有しやすい見た目と、読者が続けて扱えるコードの両方を渡せます。