CodeKitHub
日本語
画像ツール

画像からASCIIアートへの変換ツール

写真をアップロードすると、元の画像の明るさに合わせて陰影が付けられたASCII文字のグリッドとして返されます。これは、おなじみの「テキストアート」のような見た目です。すべての処理はブラウザ内のキャンバス上で行われます。画像はローカルで読み込まれるだけで、どこにもアップロードされることはありません。

このツールとは?

このツールは、画像をグリッド上でサンプリングし、各セルの明るさを測定して、「空っぽに見える」(スペース、ピリオド)ものから「密度が高いように見える」(@、#、塗りつぶされたブロック)ものへと変化するグラデーションから、そのセルの色に対応する文字に置き換えます。 デフォルトでは、明るい領域は密度の高い文字に、暗い領域は密度の低い文字にマッピングされます。出力は暗いボックス上の明るいテキストとなるため、これにより写真の明るい部分は実際に明るく見え、暗い部分は背景に溶け込むようになります。

これは、このサイトにあるテキストベースのASCIIアートジェネレーターとは異なります。そちらは入力した単語を大きなブロック文字(FIGletスタイルのバナー)に変換するものです。一方、このツールは逆の仕組みになっており、入力としてテキストではなく、実際の写真や画像ファイルを受け入れます。

なぜこれを使うのか?

  • ワンクリックで、どんな写真でも共有可能なプレーンテキストのASCIIアートに変換できます。
  • 出力幅を調整可能で、3種類の文字セット(詳細なグレースケールグラデーション、シンプルな7文字グラデーション、またはUnicodeブロックシェーディング)から選択でき、さまざまな外観を実現できます。
  • 明るい背景のコンテキストに貼り付ける際の反転オプション。
  • 100% プライベート — 画像の処理はローカルで行われるため、写真がアップロードされることは一切ありません。
  • 無料、登録不要、透かしなし。

使い方

  1. アップロードエリアをクリックするか、JPG、PNG、またはWebP形式の画像をドラッグしてアップロードしてください。
  2. 出力幅(文字数)を設定します。数値が大きいほど詳細になりますが、結果の幅も広くなります。
  3. 文字セットを選択してください:「詳細」は滑らかなグラデーションに、「シンプル」または「ブロック」はより大胆な仕上がりに適しています。
  4. 結果を明るい背景の場所に貼り付ける場合は、「反転」をオンにしてください。
  5. 「コピー」をクリックして、プレーンテキスト形式の結果を取得してください。

入力

A photo of a single bright white circle on a black background, 100 characters wide

出力

Mostly blank/space characters around the edges, with a dense cluster of @ and # characters forming the circle's silhouette in the middle

表示される文字は、画像の実際の輝度値によって異なります。これはパターンの説明であり、文字通りの出力結果ではありません。元の写真ごとに異なる結果が得られるためです。

実用的なヒント

  • コントラストの高い写真(無地の背景に被写体がくっきりと写っているもの)は、雑多でコントラストの低いシーンよりも、はるかに認識されやすくなります。
  • 幅100~150文字が、ほとんどの用途において最適な範囲です。細部までしっかり表示できるほど広く、かつ通常の画面に収まるほど狭いためです。
  • 出力結果が予想とは逆になっている場合(被写体が暗いはずなのに明るいシルエットのように見えるなど)、別の画像を試すのではなく、「反転」チェックボックスのオン/オフを切り替えてみてください。
  • 出力幅が非常に狭い場合、「Blocks」文字セットは「Detailed」よりも読みやすいことがよくあります。これは、数種類の濃淡レベルの方が、数十個の細い文字よりも視認性が高いためです。

テキストからASCIIアートへの変換との違い

写真を加工するのではなく、入力したテキスト(プロジェクト名や単語など)でバナーを作成したい場合は、このサイトの「ASCIIアートジェネレーター」が適しています。このツールはFIGletフォントを使用してブロック文字を描画するため、画像処理を一切行いません。

この2つのツールは、通常組み合わせて使用されます。つまり、タイトルとしてFIGletバナーを配置し、その下にこのツールで変換した画像を視覚的な要素として配置するのです。これらはどちらもプレーンテキスト形式であるため、コードのコメント欄やプレーンテキスト形式のREADMEに貼り付けても問題なく表示されます。

ASCIIアートジェネレーター · 画像圧縮ツール

よくある質問

なぜ私のASCIIアートが潰れたり、伸びたりして見えるのでしょうか?

等幅文字のセルは、幅に比べて高さがおよそ2倍あるため、ピクセル単位で変換すると画像が縦方向に圧縮されてしまいます。このツールでは、1:1のピクセルグリッドで想定される行数よりも少ない行数をサンプリングすることで、すでにこの問題を補正しています。それでも貼り付けた場所で表示がおかしい場合は、貼り付け先のフォントが等幅フォントではない可能性があります。

文字セットの選択は、実際に重要なのでしょうか?

はい。「Detailed」は滑らかなグラデーションを実現するために数十種類の文字を使用しており、少し離れた場所から、あるいはズームインして見たときに最も見やすくなります。 「Simple」(7文字)と「Blocks」(Unicodeのシェーディングブロック)は、明るさのレベルごとに目に見える帯状の境界線があり、より太くグラフィック的な外観になります。フォトリアリスティックな表現というよりは、スタイリッシュな効果に適しています。

「反転」はいつ使うべきですか?

デフォルトでは、写真の明るい部分は文字が濃く、暗い部分は文字が薄くなります。このツールの暗い出力ボックス(暗い背景に明るい文字)では、これが正しく表示されます。 結果を白い文書や明るいテーマのアプリに貼り付ける場合は、「反転」をオンにして、画像の暗い部分が濃い文字に割り当てられるようにしてください(明るいページ上の黒いインク)。そうすることで、アートワークの可読性を保つことができます。

理想的な出力幅はどれくらいですか?

100文字は、ブラウザやターミナルで横スクロールせずに表示するための適切なデフォルト値です。これを大幅に増やすと(200以上)、より詳細な情報が得られますが、表示幅がほとんどの画面の幅を超えてしまいます。一方、幅を極端に狭くすると(40未満)、識別可能な詳細のほとんどが失われてしまいます。

私の写真はどこかにアップロードされていますか?

いいえ。画像はブラウザ内で直接、Canvas API を使用してデコードおよびサンプリングされます。どの段階でもサーバーへデータが送信されることはありません。

関連ツール