ブラウザを開いてファイルをドロップするだけで、どんな動画もASCII文字アニメーションに変換できる。

この記事でわかること：
– ASCII Studioの仕組みと特徴
– 40種類以上の文字セットと外観カスタマイズの詳細
– ReactコンポーネントやWebM形式でのエクスポート手順
– ライセンス面での注意点

https://github.com/vansh-nagar/ascii-studio

ASCII StudioはNext.js製のWebアプリで、動画や画像をフレームごとにASCII文字へ変換してブラウザ上で再生する。開発者のvansh-nagar氏が2026年3月に公開し、4月末時点でGitHubスター数は1,000を超えた。Vercelがスポンサーについており、公式サイト（asciistudio.space）はVercelのインフラで提供されている。インストールは不要で、ブラウザからアクセスすれば即使える。

インストールなしで動く理由

従来、動画をASCII化するにはffmpegとPythonを組み合わせたローカル環境の構築が必要だった。ASCII Studioはその変換処理をすべてブラウザ内で完結させた。フレーム抽出から文字マッピング、アニメーション再生まで、ページを離れずに操作できる。

コマンドラインに慣れていないデザイナーやクリエイターでも、UIを操作するだけでASCIIアニメーションを作れる点が従来ツールとの大きな違いだ。

変換パラメーターと文字セット

アップロード後に表示されるConversionパネルには「Quality」「Columns」「Threshold」「Charset」「Invert」の5項目が並ぶ。

Columnsは1行あたりの文字数を指定し、デフォルトは130。値を上げるほどグリッドが細かくなり解像度が上がるが、その分ブラウザの処理負荷も増える。Thresholdはコントラストの閾値で、暗い部分の表現の強弱を調整する。

Charsetには40種類以上のプリセットが用意されている。

  • Standard: ASCII記号を輝度順に並べた基本セット
  • Matrix: ブロック文字を使ってマトリックス風に表現
  • Braille: 点字記号を使ったドット表現
  • Katakana / Hiragana: 日本語文字を組み込んだ独特のスタイル
  • Binary: 0と1だけで構成したデジタル表現
  • Glitch: 記号で乱れた印象を出すセット

Invertをオンにすると文字の明暗が反転する。背景が白いUIに貼り付ける場合など、コントラストを調整したいときに役立つ。

外観カスタマイズとテキストエフェクト

変換後のアニメーションはAppearanceパネルで見た目を細かく整えられる。フォントはJetBrains Mono、Fira Code、VT323、Orbitronなど20種類以上から選択できる。フォントサイズ、行間（Line Height）、字間（Letter Spacing）は数値で直接指定し、太字・イタリック体の切り替えも可能だ。

テキストエフェクトには以下が用意されている。

  • matrix: 文字が上から流れ落ちるマトリックス演出
  • glitch: 文字がランダムにずれるグリッチ表現
  • neon: 発光するネオンサイン風
  • gradient: 文字列にグラデーションをかける
  • burn: 燃えるような表現
  • neural: ニューラルネットワーク風のパルスエフェクト

背景色と文字色はカラーピッカーで任意の値を設定できる。白背景に青文字のデフォルト設定をそのまま使うもよし、黒背景に緑文字でターミナル風にアレンジするもよしだ。

エクスポートの形式

完成したアニメーションはReactコンポーネント、静止画、動画の形式でエクスポートできる。

Reactコンポーネント: フレームデータをすべて内包したコンポーネントとしてコピーできる。Next.jsやReactプロジェクトに貼り付けるだけで、外部依存なしに動くアニメーションが完成する。

画像: 現在表示中のフレームをPNGなどの静止画として保存できる。サムネイルやSNS投稿用のビジュアルとして使いやすい。

動画: ブラウザのMediaRecorder APIを使ってWebM形式で書き出す。ビットレートは6Mbpsに設定されており、そのままSNSへアップロードできる品質がある。

ライセンスと注意点

GitHubリポジトリにはライセンスファイルが存在しない。著作権法の原則上、ライセンス未設定のコードは作者に著作権が留保されたままとなる。個人的な学習や改変の学習に使う分には問題が少ないが、商用プロダクトへの組み込みや再配布を検討する場合は、作者に確認を取ることが安全だ。

処理能力の面では、長尺・高解像度の動画は変換に時間がかかる。ブラウザのメモリ制限に近づくと動作が不安定になることもあるため、まず短いクリップで動作を確かめてから長尺の変換に進むとよい。

まとめ

ASCII StudioはブラウザだけでASCIIアニメーションを作れるOSSツールだ。変換から外観調整、Reactコンポーネント出力まで一通りの機能が揃っており、Webサイトのヒーロービジュアルや開発者向けの作品ページにASCII表現を取り入れたい人の選択肢になる。

セルフホストしたい場合はリポジトリをクローンして npm install && npm run dev で動かせる。ライセンスが未設定の点だけ頭に入れた上で、手元の動画をASCIIに変換してみてほしい。