アニメーション

映画『マトリックス』の世界を再現！HTMLで描く「マトリックス・コード」のアニメーション

投稿日 2026/01/18

更新日 2026/1/17

漆黒の画面を、光り輝く緑の数字がスルスルと流れ落ちていく――。
映画『マトリックス』の象徴とも言えるあの「デジタルな雨（マトリックス・コード）」は、今やテック・ガジェットやプログラミングの世界を象徴するアイコンとなりました。

今回は、SNS等でプログラミング初学者の学習用としてよく紹介されるPythonのコードをベースに、Webブラウザで軽量かつスムーズに動くJavaScript版として完全再現しました。あなたのWebサイトを一瞬でサイバーパンクな世界観へ塗り替える方法をご紹介します。

Preview プレビュー

Code コード

HTML

<canvas id="kumonosu-canvas"></canvas>

CSS

body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background-color: black;
	overflow: hidden;
}

/* ID指定でスタイルを適用することも可能 */
#kumonosu-canvas {
	display: block;
}

JavaScript

const canvas = document.getElementById('kumonosu-canvas');
const ctx = canvas.getContext('2d');

// 基本設定
const fontSize = 14;
const chars = "0101010101010101010101010101";
const colors = ['#008000', '#32CD32', '#228B22', '#00FF00'];

let columns = 0;
let drops = [];

// 画面サイズの設定と初期化
function init() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    columns = Math.floor(canvas.width / fontSize);
    drops = [];
    for (let i = 0; i < columns; i++) {
        // 降り始めをバラバラにするためにマイナスの開始位置を設定
        drops[i] = Math.random() * -100;
    }
}

// 描画処理
function draw() {
    // 背景を半透明で塗りつぶすことで、過去の文字を徐々に消し「残像」を作る
    ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    ctx.font = fontSize + "px Courier";

    for (let i = 0; i < drops.length; i++) {
        // ランダムな一文字を選択
        const text = chars.charAt(Math.floor(Math.random() * chars.length));

        // 色のランダム設定
        ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)];

        const x = i * fontSize;
        const y = drops[i] * fontSize;

        ctx.fillText(text, x, y);

        // 画面下端に到達した後、低確率で最上部へリセット（雨が降り続ける演出）
        if (y > canvas.height && Math.random() > 0.95) {
            drops[i] = 0;
        }

        // 落下速度の更新
        drops[i]++;
    }
}

// 初期実行
init();

// ループ実行（約30FPS）
setInterval(draw, 33);

// ブラウザのリサイズに対応
window.addEventListener('resize', () => {
    init();
});

Explanation 詳しい説明

1. 基本仕様

描画方式: HTML5 Canvas API
使用言語: JavaScript (Vanilla JS)
キャンバスID: kumonosu-canvas
演出: 「0」と「1」がランダムな速度・色（3色の緑系）で上から下に降り注ぎ、下端に到達すると上から再配置されます。

2. カスタマイズ

このコードを自分好みにアレンジしたい場合は、以下の変数を書き換えてください。

文字の種類を変える:
const chars = “010101…”; の中身を “ABCDEF” や漢数字に変えると雰囲気がガラッと変わります。
色を変える:
const colors = [‘#008000’, ‘#32CD32’, ‘#228B22’]; を ‘#FF0000’（赤系）や ‘#0000FF’（青系）に変更すれば、別のテーマカラーになります。
密度を変える:
const fontSize = 16; を小さくすると、より細かく大量の数字が降るようになります。
残像の長さを変える:
ctx.fillStyle = “rgba(0, 0, 0, 0.1)”; の 0.1（透明度）を 0.05 にすると残像が長く、0.3 にすると短くなります。

3. 注意点

パフォーマンス: このコードは軽量ですが、非常に高解像度なディスプレイ（4Kなど）で全画面表示する場合、処理負荷を抑えるために fontSize を極端に小さくしすぎないことを推奨します。
背景色: キャンバス自体が黒背景を描画し続けるため、HTMLの他の要素と重ねる場合は CSS の z-index や position: absolute; を調整してください。