ハクソク

世界を動かす技術を、日本語で。

ウェブページ用のアニメーションASCIIアート

2026年10月8日原文(ascii.rest)

概要

  • 本文はアスキーアートで表現されたデザインについての解説
  • ASCIIアートの特徴や用途を簡潔に紹介
  • 作成方法や注意点についても言及
  • 代表的な活用例を箇条書きで説明
  • 読者が自作する際のポイントを整理

ASCIIアートとは

  • ASCIIアート は、文字や記号を使って絵や模様を表現する デジタルアート手法
  • 主に 半角英数字や記号 を組み合わせて構成
  • インターネット掲示板 やチャット、プログラムのコメント欄などで多用
  • 絵文字や通常の画像と違い、 テキストデータとして扱える のが利点

ASCIIアートの特徴

  • 画像データ と比べて 容量が小さい ため、通信量の節約が可能
  • どのプラットフォームでも表示できる 高い互換性
  • 表現力の幅 は限られるが、工夫次第で独特の味わいを持つ作品が作成可能
  • SNSや掲示板 でのコミュニケーションに彩りを与える役割

作成方法と注意点

  • テキストエディタ を使い、文字を一つずつ配置してデザイン
  • 等幅フォント （monospace）で閲覧することで、意図した形状を維持
  • 表示環境によって レイアウト崩れ が起こる場合があるため注意
  • 著作権やマナー を守り、他者の作品を引用する際は出典明記が望ましい

主な活用例

  • ネット掲示板 での挨拶や感情表現
  • プログラムのコメント欄 でのアクセントや区切り線
  • SNSプロフィールや投稿 のデコレーション
  • メール署名 や自己紹介欄での個性演出

自作のポイント

  • シンプルなモチーフ から始めるのがおすすめ
  • 輪郭や陰影 は記号の密度や種類で調整
  • 失敗しても 試行錯誤を繰り返す ことで上達
  • 他の作品を参考にしつつ、 オリジナリティ を大切に

Hackerたちの意見

美しいね。でも、パーツがアニメーションしてるとは思えないな。何か見落としてるのかな？

└

画面に表示されている間に再生されて、動きを抑えたい人のために最初のフレームを保持します。

└

ありがとう！何か問題があったら教えてね！

└

どれかをクリックすると、そのページに行ってそのアニメーションだけを見ることができるよ。僕のスマホでは、トップページのフレームレートがすごく低いんだ。

それはすごいね！僕も似たようなこと（もっと小規模だけど）をClaude Code/Piのためにやったよ。どれくらい機能してるかを示すためにね。https://github.com/robdmac/flow でも、このASCIIアートは、SSHで入るサーバーごとに何かを持ちたいっていう最初の願望を思い出させるな。今はもうサーバーにSSHしてないけど、もししてたら、絶対にターミナルでこれらのシーンを再現しようとしてたよ！

└

Flowはめっちゃ美しくて、このASCIIアートテーマにぴったりだね。インストールしたし、いくつか変更したいことがあるんだけど。PRを受け付けてる？それとも、自分のフォークを維持して、上流に何も期待しない方がいい？変更したい例を挙げると、1. 炎に減衰を加えたい。状態が変わるたびに、炎がゆっくりと基本レートに戻る感じで、例えば2分後に。強い火は最近変わった状態で、減衰した炎はしばらく変わってない古い状態ってことになる。2. 開くたびに違うアニメーションを自動で選んでほしい。1つのターミナルウィンドウで半ダースから1ダースのエージェントを動かしてるから、セッションを区別する方法を作ったんだけど、これらのアニメーションでも同じことをしたい。基本的には、セッションを他と区別する方法が欲しい。3. アニメーションを変えるだけじゃなくて、アニメーションごとにランダムなパレットを選んでほしい。紫っぽい炎、青っぽい炎、赤い炎、オレンジの炎、黄色の炎、みたいに。4. プラグインをcrabigatorに統合して、全幅じゃなくて1つのセクションに収めたい。とにかく、これは美しいモッドで、90年代初頭から中頃のMUDハッキングを思い出させる。すぐに自分のワークフローに取り入れるつもり。そういえば、サーバーごとに違うASCIIアート画像を使ってたことがあったな。サンプルはこちら：https://github.com/samuelclay/NewsBlur/blob/main/ansible/rol... https://github.com/samuelclay/NewsBlur/blob/main/ansible/rol... https://github.com/samuelclay/NewsBlur/blob/main/ansible/rol...

いいね！僕の初期のオンライン貢献のいくつかは、地元のダイヤルアップBBSに対するものだったよ。掲示板のテーマに合わせてアニメーションASCIIシーケンスを作るのに、丸一日を費やしてた。

見た目は美しいけど、これってASCIIアートじゃないみたいだね。ASCIIはどこにあるの？あのサイズの違う点々はASCII文字じゃないよね？もしかして、これはユニコードアートなのかな？

└

ちゃんとしたASCIIがたくさんあるよ。例えば、ここをチェックしてみて：https://ascii.rest/julia-set/

└

君の言うことは正しいね。ASCIIのバージョンを作るのは簡単だと思うよ。だって、ASCIIにはピッチの違うドットがすでにあるから。

素晴らしい、印象的、よくできてる—でも、技術的な簡素さの演出に思えるな。つまり、制約のあるメディアの信頼性を借りて、制約を受け入れてないってこと。再び言うけど、とてもきれいだけど…テスラをシトロエン2CVのように見せるために再構成するような感じだね。

└

おお、これは俺が考えてたことをもっと上手く表現してるね。「テキストキャラクターで構成されている」というのは、ASCIIアートの定義としてはかなり緩いと思う。視覚的に面白くないわけじゃないけど、「ASCIIアート」って聞いたときに人々が思い浮かべるものとはかなり違うと思う。個人的には、これがコントラストに色を使ってるせいで、3つのキャラクターのうちの1つに量子化された小さな点のように感じる。ASCIIアートとはちょっと違う曖昧な境界があって、ASCIIシェーダーとの間にも明確な距離があると思う。

Hacker Newsで議論の続きを見る