ツールへ移動

コードの雨(マトリックス風)

読み込み中…

できること

このコードの雨でできること

黒い画面にカタカナと数字の列が降り注ぐ、ブラウザで描くコードの雨。大きさ、速さ、色を選べます。

  • 01

    カタカナと数字だけの雨

    アからノまでのカタカナ25文字と、0から9の数字が降ります。左右反転はしておらず、アルファベットも使いません。映画の画像ではなく、独自の絵です。

  • 02

    明るい先頭と、消えていく尾

    各列の先頭は白に近い色で光り、後ろは選んだ色で、だんだん暗くなります。列ごとに速さと長さが違うので、列ごとに落ちる速さと長さがばらつくので、画面全体が同じ周期で動くことはありません。

  • 03

    雨の色は自由に

    カラーピッカーで、緑のほか青や赤など、好きな色を選べます。最初は明るい緑です。先頭の色は変わりません。選んだ色は、このブラウザに保存されます。

  • 04

    文字サイズと速さ

    「文字サイズ」は10 pxから42 px、「速さ」は0.25×から3×です。大きい文字は列が減り、遅いほうが画面は落ち着きます。変更はその場で反映されます。

  • 05

    一時停止と再開

    「一時停止」で動きを止め、「再開」で動かします。OSで動きを減らしている場合は、止まった状態から始まります。別のタブの裏に隠れたときは、自動で描画をやめます。

  • 06

    黒い背景で全画面

    背景は黒で、雨はFキーかプレビューのクリックで画面いっぱいに広がります。戻るにはEscキーか「全画面表示を閉じる」です。登録も、音もありません。

解説

コードの雨とは何か、このページには何が出るのか

ターミナルのような画面ならハッカー画面が、同じく暗い背景で動く絵ならレーダー画面があります。

「マトリックス 画面」と呼ばれるあの映像は、緑の文字が縦の列になって降り注ぐ演出です。列ごとに先頭が明るく、そこから後ろへ向かって暗くなり、やがて黒に消えます。このページは、それをブラウザのキャンバスに、1コマずつ描いています。列は一本ずつ、落ちる速さも長さも違うので、全部が同じリズムで動くことはありません。

発想のもとは映画「マトリックス」(1999年)です。ただ、このページの絵は独自に描いたもので、映画の画像は一枚も使っていません。映画の制作側との関わりもありません。画面に流れるのは、アからノまでのカタカナ25文字と、0から9までの数字です。アルファベットは使いません。文字は意味を持たず、順番もでたらめです。

調整は3つです。「文字サイズ」は10 pxから42 pxで、最初は22 pxです。「速さ」は0.25×から3×で、最初は1×です。「雨の色」は、カラーピッカーで好きな色を選びます。最初は明るい緑です。色を変えても、列の先頭はいつも白に近い明るい色で光ります。選んだ値は、このブラウザに保存されます。

列の数は、画面の幅と文字サイズで決まります。ブラウザのウィンドウの大きさを変えると、列は大きさに合わせて増えたり減ったりしますが、雨はそのまま降り続けます。文字を大きくするほど列は少なく、1本1本が太く見えます。小さくするほど列が増えて、きめ細かい雨になります。

「一時停止」を押すと動きが止まり、ボタンが「再開」に変わります。OSで動きを減らす設定にしている場合は、最初から止まった状態で開き、自分で「再開」を押すと動き出します。タブが別のタブの裏に隠れているあいだは、描くのをやめます。見ていない絵に力を使わないためです。

これは、WindowsやmacOSの設定画面から選ぶようなスクリーンセーバーではありません。ダウンロードして入れる種類のものとは別で、ブラウザのタブを自分で開き、Fキーかプレビューのクリックで全画面にして使います。

この映像は、映画やドラマでは「ハッキング」の画面として描かれがちです。でも、ここでは本当のコードは何も動いておらず、何かを調べたり、侵入したり、診断したりもしません。文字はただの飾りとして、でたらめに降っているだけです。ターミナルに近い見た目がよければ、このサイトの「ハッカー画面」を開いてください。そちらも演出で、現実には何も行いません。

背景は黒で、文字はいつも動いています。暗い部屋の飾りには合います。ただ、有機ELの画面の焼き付きを防げるとは、このページは言えません。動く絵ではあっても、保護の仕組みではないからです。有機ELのテレビやモニターは、昼も夜もつけっぱなしにしないでください。メーカーの案内も見ておくと安心です。

雨は、1秒に約30回描かれます。古いノートPCや4Kのモニターでは、動きが重く感じられることがあります。実際の速さは、ブラウザが決めます。文字を大きくすると列が減って軽くなり、「一時停止」を押せば描画が止まります。

操作の場所をまとめておきます。プレビューの隣のパネルに、「文字サイズ」「速さ」「雨の色」「一時停止」が並びます。「画面をオンのままにする」は、最初は閉じている「表示オプション」の中です。全画面にするとボタンは隠れますが、クリックするかマウスを動かして「設定」を押せば、また出てきます。

暗い壁一面に、緑色に光る文字の縦の列が上から下へ連なっている
文字黒地に緑の文字が縦の列になって降ります。写真はイメージで、このページが描くのは、カタカナと数字です。

手順

コードの雨を全画面で流す手順

大きさ、速さ、色を決めて全画面にし、Escキーで戻ります。

  1. 01

    コードの雨を開く

    パソコン、タブレット、スマホの最近のブラウザで開きます。OSが動きを減らす設定でなければ、雨はすぐに降り始めます。入れるものはありません。

  2. 02

    大きさ、速さ、色を決める

    プレビューの隣で、「文字サイズ」と「速さ」を好みに合わせ、「雨の色」で色を選びます。文字が大きく、速さが遅いほど、画面は静かになります。

  3. 03

    全画面にする

    Fキー、「全画面表示」ボタン、プレビューのクリックのいずれかで、雨が画面全体に広がります。「表示オプション」の「画面をオンのままにする」は最初からオンですが、全画面のときだけ効きます。

  4. 04

    止めたいときは一時停止

    スクリーンショットや写真を撮るときは「一時停止」を押します。全画面中は、画面をクリックして「設定」を開いてください。「再開」で動き出します。止めているあいだ、列はその位置で止まったままです。

  5. 05

    Escキーで戻る

    Escキーか「全画面表示を閉じる」で、元のページに戻ります。雨が完全に止まるのは、タブを閉じたときです。

明かりを消した部屋で、人物が後ろ姿で大きなモニターに映る緑の文字の雨を眺めている
手順ページを開くと、すぐに雨が降り始めます。全画面にして、戻るときはEscキーです。写真はイメージです。

特徴

入れるソフトでも、ハッキングの道具でもありません

映画の画像も、本物のコードも、有機ELの保護機能もありません。

  • 01

    インストールなしで、見慣れた絵が出る

    配布されているスクリーンセーバーは、ダウンロードして許可を与える必要があります。この雨はタブの中で動きます。開いて、全画面にして、終わったら閉じるだけです。

  • 02

    速さも色も、自分の好みで

    ゆっくりでも速くても、緑でも青でも、自分で決められます。ファイルを編集したり、ソフトを開いたりする必要はなく、選んだ値は、このブラウザに残ります。

  • 03

    黒い背景に動く文字

    暗い部屋やサブモニターによく合います。有機ELの焼き付きを防ぐことは、このページは約束しません。あくまで絵であり、サービスではありません。

  • 04

    見ていないときは止まります

    別のタブの裏に隠れると、描画が止まります。パソコンの負担を減らす助けにはなりますが、どれだけ減るかは端末によります。「一時停止」で手動でも止められます。

  • 05

    映画の画像も、ハッキングの道具もありません

    映画の素材は使っておらず、本物のコードも動きません。文字は飾りです。何ができて何ができないかが、はっきりしています。

使い方

コードの雨を出す場面

サブモニター、動画の背景、暗い部屋、授業や文化祭、パーティーでの使い方です。

  • プログラミングやゲームの横で、サブモニターに流す

    机にモニターを何枚も並べる人にとって、緑の雨は飾りの一つです。作業の内容を見ているわけではなく、パソコンについて何かを伝えるわけでもありません。写真を撮りたくなったら、「一時停止」を押してください。

    設定サブモニターを全画面、「速さ」は0.5×、「文字サイズ」は22 px。
    やること作業や対戦の隣の画面に出して、部屋の雰囲気を足します。
    注意明るい緑を大きな画面で長く見ると、疲れることがあります。画面の明るさを下げるか、暗めの色を選んでください。
  • 動画やポッドキャストの背景にする

    技術系の動画やポッドキャストでは、緑の雨があるだけで、それらしい雰囲気が出ます。映像として必要な場合だけでかまいません。

    設定背後のモニター、4Kかフルハイビジョン、全画面。照明は控えめに。
    やること自分の背後に雨を出して録画するか、ウィンドウを取り込みます。
    注意画面に照明や窓の光が映り込まないよう、向きを変えてください。カメラによっては縞が映るので、先に試し撮りをしてください。
  • 暗い部屋の間接照明がわりに置く

    黒地にゆっくり降る雨は、控えめな光源になります。落ち着くかどうかは好みしだいで、このページは安らぎや睡眠の質については何も言いません。

    設定テレビかモニター、明るさは低め、「速さ」は0.25×から0.5×、全画面。
    やること照明を落とした部屋で、ゆっくり降る雨を画面に出します。
    注意睡眠用の道具ではありません。寝るときは画面を消し、有機ELの画面を一晩中つけておくのは避けてください。
  • 情報の授業、プログラミング部、文化祭の会場に

    動く絵があると、教室や会場がにぎやかになります。あくまで背景で、プログラミングの授業の代わりにはなりません。本物のコードだとか、誰かがハッキングされているとか、言わないでください。

    設定プロジェクターか大型テレビ、全画面、「速さ」は1×から2×。
    やること開演前や休憩時間に、会場側の画面に流します。
    注意プロジェクターの解像度を先に確かめてください。端が切れたり、黒が灰色に浮いたりすることがあります。
  • 作業用の配信や動画の映像に使う

    ゆっくり降る雨は、動きの少ない背景にちょうどよい絵です。文字が大きいほど動きがおとなしく、描画の負担も軽くなります。長時間の配信は、パソコンの負荷を見ながら、設定を調整してください。

    設定OBSで取り込むブラウザのウィンドウ、「速さ」は0.5×、「文字サイズ」は大きめ。
    やること長めの作業用配信や勉強用の動画で、画面に流す映像として使います。
    注意このページは音を出しません。音楽を流す場合は、その曲の利用ルールを確かめてください。
  • パーティーやハロウィン、友達同士の悪ふざけに

    パーティーの背景には、ぴったりです。いたずらに使っても、すぐに飾りだと分かるはずです。このページは、どこにも接続せず、端末を調べることもありません。

    設定ノートPCをつないだテレビ、全画面。色は赤や青など好みで。
    やること部屋のテレビに雨を出して、飾りとして流します。
    注意職場や学校で、パソコンが本当にハッキングされていると思わせるために使うのはやめてください。
暗いリビングで、テレビに緑の文字の雨が映り、壁がほのかに緑色に照らされている
置き場所テレビが部屋の唯一の明かりになった様子です。写真はイメージで、実際の文字はカタカナと数字です。

注意点

このコードの雨にできないこと

何も調べず、何にも接続せず、焼き付きの対策にもなりません。

  • Note

    注意:これはブラウザで描いた絵です。本物のコードは動かず、何かを調べたり、侵入したりもしません。

  • Note

    設定:「速さ」を下げ、「文字サイズ」を上げると、画面が落ち着いて、パソコンの負担も減ります。

  • Note

    注意:有機ELの焼き付きを防げるとは言えません。画面をつけっぱなしにしないでください。

  • Note

    できないこと:文字はカタカナと数字だけで、アルファベットや映画の画像は使いません。

  • Note

    設定:OSで動きを減らしていると、雨は止まった状態で始まります。「再開」を押すと動き出します。

  • Note

    注意:長い配信や録画に使うときは、雨の描画も端末の負担になります。「文字サイズ」を上げ、「速さ」を下げて、動作の重さを見ながら調整してください。

  • Note

    注意:スライダーやカラーピッカーを触った直後は、Fキーが効きません。いったんプレビューのほうをクリックしてから押し直してください。全画面を出るEscキーは、いつでも効きます。

  • Note

    注意:長いあいだ出しておくときは、全画面にして「画面をオンのままにする」にチェックを入れてください。ブラウザが断ると、画面が暗くなることがあります。

質問

コードの雨についてのよくある質問

映画との関係、流れる文字、速さと色、負担、焼き付き、スクリーンセーバーとの違い。

映画「マトリックス」の本物の映像ですか?

いいえ。マトリックス風に、独自に描いた絵です。映画の画像は使っておらず、映画の制作側との関わりもありません。文字は、カタカナと数字を使っています。再現ではなく、雰囲気を借りた演出だと考えてください。

流れる文字は何ですか? 意味はありますか?

アからノまでのカタカナ25文字と、0から9の数字です。アルファベットはなく、左右反転もしていません。順番はでたらめで、意味のある言葉やコードにはなりません。ただの飾りです。

雨の速さは変えられますか?

変えられます。プレビューの隣の「速さ」で、0.25×から3×まで選べます。最初は1×です。「文字サイズ」を変えると、列の数も変わります。大きいほど列が減ります。全画面中は、画面をクリックして「設定」を押すと出てきます。

色は、青や赤に変えられますか?

変えられます。「雨の色」のカラーピッカーで色を選んでください。最初は明るい緑です。各列の先頭だけは、いつも白に近い明るい色のままです。次に開いたときも、同じ色で始まります。

パソコンへの負担は大きいですか?

端末しだいです。雨は1秒に約30回描かれるので、古いノートPCや4Kモニターでは重く感じることがあります。文字を大きくする、「一時停止」を押す、別のタブに切り替えるといった方法で、負担は減ります。

別のタブを開いているあいだも、雨は降り続けますか?

降りません。タブが隠れているあいだは、描画が止まります。戻ってくると、また動き出します。「一時停止」は、タブが見えている状態で自分の意思で止めたいときに使います。

有機ELの画面の焼き付き防止になりますか?

約束はできません。背景は黒で文字は動きますが、これは絵であって、保護の仕組みではないからです。有機ELの画面は、昼夜つけっぱなしにしないでください。メーカーの案内も確認しておくと安心です。

Windows 11やMacのスクリーンセーバーに設定できますか?

できません。スクリーンセーバーは、Windowsなら「.scr」という拡張子のファイルで入れる、インストール型のものです。このページは、OSが自動で開くものではありません。自分でタブを開き、「全画面表示」を選んで使います。

全画面にするには? 戻る方法は?

Fキーを押すか、プレビューをクリックします。元に戻すときは、Escキーを押すか「全画面表示を閉じる」を選びます。全画面中の「一時停止」などは、画面をクリックして「設定」を押した先にあります。Fキーが効かないときは、直前にスライダーかカラーピッカーを触っています。プレビューをクリックしてください。

雨を出している間、画面は消えませんか?

全画面で「画面をオンのままにする」にチェックが入っていれば、ブラウザに画面を消さないよう頼みます。ブラウザが断ることもあり、そのときはステータス欄に案内が出ます。ノートPCは、蓋を閉じるとスリープすることがあります。

スマホやタブレットでも動きますか?

最近のSafariやChromeなら動きます。小さな画面では、文字を大きめにすると見やすくなります。長く出しておくなら、充電しながら使ってください。画面がつきっぱなしになるかは、ブラウザと端末の設定しだいです。

これは「ハッカー画面」と同じものですか?

別のものです。ここにあるのは、文字が降るだけの絵です。端末を調べたり、何かに接続したりはしません。ターミナルのような画面は、別ページの「ハッカー画面」にあります。そちらも演出で、実際には何も行いません。

インターネットがなくても雨は降りますか?

ページを開いたあとなら、降り続けます。描画はブラウザの中で行うからです。最初にページを開くときと、読み込み直すときには、通信が必要です。

Zoomなどのビデオ会議の背景にできますか?

ページをそのまま背景にはできません。Zoomのバーチャル背景に選べるのは、画像や動画のファイルです。雨を使いたいなら、別のソフトで画面を録画して動画にするか、OBSなどで取り込む方法があります。録画の機能は、このページにはありません。職場や学校の会議では、背景の決まりも確かめてください。

ウィンドウの大きさを変えても、雨は続きますか?

続きます。ウィンドウの幅に合わせて、列の数が自動で増減します。全画面に切り替えたときも同じです。設定した大きさ、速さ、色も、そのまま引き継がれます。

動画や配信の背景に使ってもいいですか?

かまいません。ウィンドウを取り込むか、画面を撮影してください。このページ自体は何も録画しません。カメラに縞が映ることがあるので、本番前に短く試してください。

文字サイズを大きくすると、どうなりますか?

1文字が大きくなり、横に並ぶ列の数が減ります。そのぶん動きも軽くなります。最大は42 pxです。小さくすると列が増えて密になり、細かい雨に見えますが、描画の負担は増えます。

無料ですか? アカウントは要りますか?

無料で、アカウントは要りません。画面に透かしも出ません。ブラウザが覚えているのは、文字サイズ、速さ、雨の色の3つだけです。

雨

コードの雨を開く

ブラウザで描いた絵です。本物のコードは動きません。

ツールに戻る

日本語のツール