映画『マトリックス』を象徴する“緑の雨（デジタルレイン）”。
Webデザイナーやフロントエンド学習者なら、一度は「自分のサイトでも流してみたい！」と思ったことがあるのではないでしょうか。
本記事では、以下のコードを題材に、Canvas × JavaScriptでつくる「マトリクス風デジタルレイン演出」の仕組みを、初学者でも理解できるように丁寧に解説します。
目次
まずはデモとコード（HTML / CSS / JS）
＜HTML＞
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matrix Code</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<canvas id="matrix"></canvas>
</body>
</html>
＜CSS＞
body {
margin: 0;
background: black;
overflow: hidden;
}
#matrix {
display: block;
}
＜JS＞
const canvas = document.getElementById("matrix");
const ctx = canvas.getContext("2d");
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
// 使用する文字（matrixの文字を変えると流れる文字が変わるよ）
const letters = "matrix".split("");
const fontSize = 16;
const columns = canvas.width / fontSize;
// 各列のy座標を管理
const drops = Array(Math.floor(columns)).fill(1);
function draw() {
// 半透明の黒で前の描画を上書き → 残像表現
ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 緑色で文字を描画
ctx.fillStyle = "#0F0";
ctx.font = fontSize + "px monospace";
drops.forEach((y, x) => {
const text = letters[Math.floor(Math.random() * letters.length)];
ctx.fillText(text, x * fontSize, y * fontSize);
// 画面下まで到達したらランダムにリセット
if (y * fontSize > canvas.height && Math.random() > 0.975) {
drops[x] = 0;
}
drops[x]++;
});
}
setInterval(draw, 50);
1. マトリクスコードってなに？｜映画表現 → Web演出へ
“マトリクスコード（デジタルレイン）”は、映画が元祖の象徴的な演出で、
✔ 緑色の文字が下に流れる
✔ 文字がぼやけて残像が出る
✔ 無数のデータが降り注ぐような雰囲気
これらが組み合わさることで、「サイバー感」を強烈に演出できます。
Webサイトでも、この演出を取り入れることで、
- テック企業のヒーローヘッダー
- ポートフォリオの背景装飾
- LPのセクション分岐
- イベント・カンファレンスのサイト演出
など、印象的なビジュアルを作れます。
2. 今回のマトリクスコードの仕組みをざっくり理解しよう
今回のコードは Canvas API と JavaScript を使っています。
仕組みをざっくり言うと…
- canvasタグを全面に広げる
- 縦の“列”を計算する
- 各列ごとに文字の落下位置(y座標)を管理する
- ひたすら緑の文字を描画して前の文字を薄く上書きする
- 一番下まで来たらランダムなタイミングでリセット
という構造になっています。
つまり、
「文字を描く → ぼかして残像にする → 落下を繰り返す」
というループ処理がずっと行われているのです。
3. HTMLの役割｜Canvasを置くだけの超シンプル構造
HTMLは最小構成になっています。
<canvas id="matrix"></canvas>
この1行がすべての舞台です。
Canvasは“絵を描くためのキャンバス”で、JavaScriptで好きなように描画できます。
ポイントはここ
- <script> に defer がついているため、HTMLの読み込み後にJSが実行される
- CSSもJavaScriptも分離されていて管理しやすい構造
- SEO的にも問題なし（canvasは背景演出のため、コンテンツには影響しない）
Web制作のベストプラクティスに沿った構成といえます。
4. CSSの役割｜「全画面 × 黒背景 × 表示崩れなし」
body {
margin: 0;
background: black;
overflow: hidden;
}
#matrix {
display: block;
}
ここで重要なのは overflow: hidden。
これにより、
「Canvas外に描かれた文字がはみ出さない」
という演出上の問題を解消しています。
また margin: 0 により余白が消え、画面全体が完全な黒で統一されます。
映画の雰囲気をそのまま再現する土台になっています。
5. JavaScriptの中身をわかりやすく解説
初心者が「難しそう…」と感じやすい部分ですが、順に見ていくと理解できます。
① canvasの準備
const canvas = document.getElementById("matrix");
const ctx = canvas.getContext("2d");
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
ここは Canvasを全画面サイズにし、描画準備をする部分。
- getContext(“2d”) → 2D描画ツールを使う
- ブラウザの幅・高さに合わせる
② 使う文字を設定
const letters = "matrix".split("");
ここを「ABC」や「カタカナ」に変えると、流れる文字が全部変わります。
自由に世界観を変えられるポイントです。
③ 列(columns)の計算と初期位置の設定
const fontSize = 16;
const columns = canvas.width / fontSize;
const drops = Array(Math.floor(columns)).fill(1);
- columns は「何列の文字を流すか」
- drops は各列ごとの“縦位置（y座標）”
これにより、
「画面いっぱいに文字が落ちる」
状態が自然と作られます。
④ draw() で残像＋落下処理をループ
一番重要な部分。
残像表現
ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
黒をうす〜く塗り重ねることで、前の文字が少しだけ残ります。
これが“マトリックスのエフェクト”そのものです。
文字を描く
ctx.fillStyle = "#0F0";
ctx.font = fontSize + "px monospace";
緑色の等幅フォントを設定し、
ctx.fillText(text, x * fontSize, y * fontSize);
で描画します。
下まで来たらランダムリセット
if (y * fontSize > canvas.height && Math.random() > 0.975) {
drops[x] = 0;
}
完全ランダムではなく、
- 画面外に落ちたタイミング
- ランダムで約 2.5% くらいの確率
という制御が行われています。
そのおかげで、自然な滝のような崩れ方が再現できています。
⑤ setInterval で50msごとに描画し続ける
setInterval(draw, 50);
「setInterval(draw, 50);」は、
「draw という関数を 50ミリ秒（＝0.05秒）ごとに繰り返し実行し続ける」
という意味です。
✔ わかりやすく噛み砕くと
- setInterval() … 一定の間隔で処理をくり返すためのタイマー機能
- draw … 実行したい関数名
- 50 … 間隔（ミリ秒）。50ms＝0.05秒
つまり、
1秒間に約20回（1000 ÷ 50）draw関数が呼ばれ続ける
という動きになります。
これにより “1秒に20回” ほどループしてアニメーションが作られます。
【注釈】Canvas アニメーションはできれば requestAnimationFrame() を使おう
マトリクスコードのような簡単なアニメーションなら setInterval() でも動きます。
ただし、本格的な Canvas 描画やゲーム処理では requestAnimationFrame()（以下 rAF） を使った方が確実に安定します。
その理由を簡単にまとめます。
✔ なぜ setInterval() は不向きなのか？
setInterval は「◯ミリ秒ごとに実行してね」と命令するだけです。
しかし…
- PC が重い
- ブラウザの処理が詰まる
- タブが非アクティブになる
こんな状況では 実行タイミングがズレる（遅延する） ことがあります。
アニメーションはフレームごとに描画するため、
このズレが カクつき の原因になります。
✔ requestAnimationFrame() が最適な理由
rAF は ブラウザが「ちょうど今描画できるよ！」という瞬間に処理を呼び出す 仕組み。
そのため、
- ズレない
- カクつきにくい
- 画面のリフレッシュレートと同期する
- 自動で負荷を調整する
- バッテリー消費も抑えられる
といったメリットがあります。
Canvas で動くものを描くなら、setInterval より requestAnimationFrame の方が“なめらか＆正確”です。
じゃあ何でsetIntervalを使ったの？って話になると思うのですが、記事を書きながら思い出したから( *´艸｀)です。
残念系なんですよ、私は。
| 方法 | 特徴 |
|---|---|
| setInterval | 時間通りに動かないことがある。 処理が重いとズレやすい。 |
| requestAnimationFrame | ブラウザの描画タイミングに合わせて動くので安定・滑らか |
6. マトリクスコードはどこに使える？｜Webデザイナー視点の活用例
デザインと技術の両方を扱う人にとって、この演出は武器になります。
✔ ヒーローヘッダーの背景に
黒背景 × 緑のコードは圧倒的インパクト。
✔ ポートフォリオサイトのセクション演出に
「Skill」「Works」「About」などの区切りに使うと世界観が統一される。
✔ LPの“テック感”演出に
AI・Web制作・セキュリティ・プログラミング講座系と相性抜群。
✔ 404ページの背景にも
遊び心＋世界観構築に最適。
7. パフォーマンス面の注意点
CanvasアニメーションはCPU/GPUを使います。
- 表示時間が長いヒーローエリア
- モバイルの低スペック端末
- Safariや古いAndroidブラウザ
ここは若干の発熱やフレーム落ちを起こしがち。
✔ 可能なら「背景動画」と同じ扱いにする
- prefers-reduced-motion でアニメ無効化
- 背景としての優先度は低くする
- 手前にSEO用のテキストコンテンツをしっかり配置する
背景設定の仕方
① 上に載せるコンテンツ用の HTML を追加
今の
<canvas id="matrix"></canvas>
の すぐ下 に、コンテンツを追加します（例なので中身は自由でOK）。
<!-- ★追加：マトリクスの上に載せるコンテンツ -->
<div class="content">
<h1>Matrix Code</h1>
<p>ここに見出しやボタンなどを載せる</p>
</div>
② Canvas を「全画面背景」にする CSS を追加
既存の body { … } や #matrix { … } はそのままでOKです。
その 下に追記 してください。
/* ★追加：ページ全体を背景動画レイアウトにする */
html,
body {
height: 100%;
}
/* 背景として canvas を固定する */
#matrix {
position: fixed;
top: 0;
left: 0;
width: 100vw; /* 画面いっぱい */
height: 100vh;
z-index: -1; /* コンテンツより奥に */
}
/* 上に載せるコンテンツ用 */
.content {
position: relative;
z-index: 1; /* canvas より手前 */
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: #fff;
}
③ Canvas を画面サイズに合わせる JS
JS の const canvas = document.getElementById("matrix");
の下に、これだけ追加しておくと安心です。
// ★追加：画面サイズに合わせてキャンバスをリサイズ
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener("resize", resizeCanvas);
resizeCanvas();
これで、
- #matrix が 全画面で常に後ろで動き続ける背景
- .content が その上に載るコンテンツ
という「背景動画っぽいマトリクス背景」が実現できます。
8. カスタムするときのチェックリスト
✔ 文字を変えたい → letters を変更
const letters = "AIWEB2025".split("");
✔ 色を変えたい → fillStyle
ctx.fillStyle = "#0FF"; // 青系のデジタルに
✔ 速度を変えたい → setInterval
50 → 30 にすると高速化
✔ 行間を変えたい → fontSize
数字を大きくすると文字サイズUP
まとめ｜マトリクスコードは学習にも作品にも最高の題材
Canvas × JavaScriptでつくるマトリクスコードは、初心者でも挑戦できるうえに、
- プログラミングの基礎（変数、配列、loop）が学べる
- Canvasの扱いの感覚もつかめる
- デザイン演出として強烈に映える
- コードが短いわりに“完成度が高い”
というメリットがあります。
Webデザイン学習系の練習としても非常に相性が良い内容です。
