画像

写真をアスキーアートに:くっきり仕上げるコツ

背景がシンプルで明暗のはっきりした写真を選び、貼り付け先に合わせて幅を決めましょう。

最終更新:

画像アスキーアート変換は、写真を小さなマスに分け、マスごとの明るさに合った文字で埋めます。明るいマスには @ や # のような詰まった文字、暗いマスには . や空白が入ります。そのため同じツールでも、どの写真をどう設定するかで結果が大きく変わります。

1. 変換に向いた写真を選ぶ

1文字が写真の小さな一部分を表します。40列なら絵全体を1行40文字に収めなければならないので、細かい部分は消え、大きな形と明暗の差だけが残ります。

変換に向いている 向いていない
無地やシンプルな背景 ものが多いごちゃごちゃした背景
被写体が画面いっぱい 人が小さく写った集合写真
明るい部分と暗い部分がはっきり 全体が同じくらいの明るさ
顔、ペットのアップ、ロゴ 風景、小さな文字のスクリーンショット

変換する前に被写体のまわりで写真を切り抜くと、同じ幅でもずっとはっきりします。

2. 貼り付け先に合わせて幅を決める

幅は列の数です。列が多いほど細部が残りますが、行も長くなります。チャットの吹き出しや GitHub のページより長い行は折り返されて絵が崩れるので、先に貼り付け先を決めましょう。

貼り付け先 おすすめの幅
チャットアプリや Discord 40〜60列
GitHub README やコードのコメント 80列くらい
ターミナル 80〜120列
PNG 画像 90列以上。広いほど写真に近づく

サンプルのねこを、初期設定のまま40列にするとこうなります。40列でも耳・目・体がわかります。(この設定で開く)

     ......------------------......
    .....--**::::::::::::::**--.....
   ....----#%%*=::::::::=*%%#----.....
  ....---::%%%%%########%%%%%::---....
 ....---::+%%@@@@@@@@@@@@@%%%+::---....
....----::#@@@@@@@@@@@@@@@@@%#::----....
....---::#@@@%#*#%@@@@%#*#%@@%#::---....
....---:*%@@@*@.#*@@@@*%.%*@@%%*:---....
....----*%@@@##:##@@@@##:##@@%%*----....
 ....-++=%%@@@@@@@@%%@@@@@@@%%%=++-.....
 ...-===+#@@@@@@@@@%%@@@@@@@@@#+===-...
  ..-+:---:*%%@@@%@%%@%@@%%%*:---:+-..
   .....-+*####%%%%%%%%%%####*+-.....
    ...+########################+...
      *##########################*

3. 文字セットを選ぶ

文字セットは、明るさの段階ごとに使う文字の一覧です。

セット 文字 向いている用途
標準 . : - = + * # % @ ほぼどこでも使える
ブロック ░ ▒ ▓ █ なめらかな濃淡としっかりした見た目。PNG にぴったり
詳細 70文字 細かい段階で、幅が広いときに効果的
2値 # と空白 シルエットだけ。ロゴやシンプルな形に

同じねこをブロックのセットにするとこうなります。マスが塗りつぶされたように見えるので、小さな幅でも形がしっかりします。(この設定で開く)

             ░░░░░░░░░░░░░░
          ░▒▒░░░░░░░░░░░░░░▒▒░
        ░░░▓▓▓▒░░░░░░░░░░▒▓▓▓░░░
       ░░░░▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░
      ░░░░░▓▓██████████████▓▓░░░░░
      ░░░░▓█████████████████▓▒░░░░
     ░░░░▓███▓▓▒▓▓████▓▓▒▓▓██▓▓░░░░
     ░░░▒████▒█ ▓▒████▒▓ ▓▒██▓▓▒░░░
      ░░▒▓███▓▒░▒▒████▒▒░▒▒██▓▓▒░░
     ░░░░▓██████████▓███████▓▓▓░░░░
    ░░░░░▓█████████▓▓█████████▓░░░░░
    ░▒░ ░░░▒▓▓███▓█▓▓█▓██▓▓▓▒░░░ ░▒░
        ░░▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒░░
       ░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░
      ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒

ブロック文字は、等幅フォントを使わないアプリでは幅が変わることがあり、行がずれてしまいます。チャットアプリにテキストで送るなら、標準のセットのほうが安全です。

4. 自動補正はオンのままで

自動補正は写真の明るさの分布を見て、それに合わせてコントラストを広げ、文字セットの段階をより多く使えるようにします。オフにしてコントラストまで下げるとどうなるでしょう?

::::::============================::::::
::::=======**==============**=======::::
:::========*##*+========+*##*========:::
::=========#####********#####=========::
:=========+##################+=========:
:=========*#####%%%%%########*=========:
=========*####***#%%%##***####*=========
========*####*#=#*#%##*#:#*####*========
========*####**=**####**=**####*========
:=====+++######################+++=====:
::===++++*####################*++++====:
::===*=====*################*=====*===::
:::======+****###########*****+======:::
:::::==+************************+==:::::
::::::****************************::::::

背景はほとんど = と :、ねこは # と * ばかりになり、目や鼻などの細部がぼやけます。明るさの差が少ない段階に押し込まれてしまうからです。(この設定で開く)

自動補正はオンのままにして、結果が暗すぎたり明るすぎたりするときだけ明るさとコントラストを少し動かしましょう。それでも形がぼやけるなら、輪郭の強調を上げます。輪郭の強調は「標準」と「詳細」のセットで使えます。

5. 白い背景には反転を

変換ツールの結果欄は暗い背景です。明るい部分に詰まった文字が入るので、暗い画面で正しく見えます。

メモ帳や GitHub のライトテーマのような白い背景に貼ると、写真のネガのように明暗が逆になって見えます。白い背景に貼るなら、コピーする前に反転をオンにしてください。

6. 保存方法を選ぶ

したいこと ボタン
文字を貼り付ける コピー
ファイルに残す、コードに入れる TXT
形をそのまま送る PNG
元の色を残す カラーをオンにしてから PNG

テキストでコピーすると文字だけが残り、色は消えます。色を残すにはカラーをオンにして PNG で保存してください。

写真はブラウザの中で変換され、変換のためにサーバーへ送られることはありません。