画像スキャンライン

画像スキャンライン効果とは

スキャンライン効果は、画像の上に等間隔の水平な暗線を重ね、古いブラウン管（CRT）モニターやアナログテレビの見た目を模倣します。実際の CRT では電子ビームが画像を 1 行ずつ描画し、各パス間の隙間が蛍光体の行の間に淡い暗い縞を残しました。この縞をデジタルで再現すると、静止画にレトロ・放送・アーケード感を瞬時に与えられ、他の方法では偽造が難しい雰囲気を作り出せます。

本ツールはこの見た目を完全にブラウザ内で再現します。画像をアップロードし、線の周波数スライダーでスキャンラインの密度を選ぶと、ツールはピクセルの各行を走査し、N 行おきに暗化させて鮮明な暗い縞を残します。パイプライン全体が JavaScript と Canvas API でローカル実行されるため、何もアップロードされず、結果はほぼ瞬時に得られます。

スキャンラインフィルタの仕組み

本ツールは内部的に Canvas 2D API を使用します。ソース画像がオフスクリーンキャンバスに描画され、getImageData が生のピクセルバッファを返します。線の周波数スライダーはパターンの周期を制御し——値 N の場合、N 行おきにスキャンラインとして選ばれます。スキャンライン行上の各ピクセルについて、赤・緑・青チャンネルに 0.5 を掛けて輝度を半減させ、明確な暗い縞を生成します。間の行は変更されないため、明るい行は明るさを保ち、暗い行は半分の強度に落ちます。

周波数 1 はすべての行をスキャンラインにして画像全体を均一に暗くし、周波数 10 は 9 つの明るい行ごとに 1 つの暗い行を残し、非常に繊細な縞を生成します。デフォルトの 3 はバランスを取った——2 つの明るい行ごとに 1 つの暗い行——もので、通常の視聴距離では説得力のある CRT 蛍光体マスクとして読めます。

スキャンラインと他のレトロ効果の違い

スキャンラインは他のビンテージ画像処理と混同されますが、かなり特定のことを行います。セピアや粒子フィルタが色を変えたり画像全体にランダムノイズを加えたりするのに対し、スキャンラインは厳密に幾何学的で、色相を変えずランダム性も加えずに規則的な水平な暗い縞のグリッドを課します。これにより「フィルム」ではなく「スクリーン」を示唆したい場合にスキャンラインが定番の選択になります。

ピクセレートフィルタと比べると、スキャンラインは元のディテールをすべて保持し、行ごとに輝度を変調するだけなので、下地の画像は依然読めます——ただ CRT 上に表示されているように見えます。スキャンラインは他のレトロ効果とも相性抜群です。スキャンラインの上に少しブルームや色収差を重ねると、単独の効果よりもはるかに説得力のある「古いモニターからキャプチャした」見た目になります。

スキャンラインを使う場面

スキャンラインは、作品を古い画面に表示しているように見せたい時にゲームアート・グラフィックデザイン・動画制作で使われるスタイル的選択です。よくある場面は以下の通りです：

• ゲームアートとスクリーンショット。UI モックアップ、キャラクター立絵、環境静止画を、CRT で動く 1980 年代アーケード筐体や 16 ビットコンソールからキャプチャしたように見せます。
• レトロブランドとポスター。シンセウェーブ・ヴェイパーウェイヴ・サイバーパンクテーマのデザインのヒーロー画像にスキャンラインを重ね、アナログ技術のムードを強調します。
• 動画サムネイルとタイトルカード。静止フレームに一時停止した VHS テープや放送モニターの見た目を与え、ファウンドフッテージや SF 物語をほのめかします。
• Web と UI デザイン。繊細なスキャンラインテクスチャを背景やアクセントに使い、端末・ダッシュボード・ヘッドアップディスプレイを暗示します。
• プライバシーとスタイリゼーション。スキャンラインオーバーレイはスクリーンショットの識別可能なディテールを柔らかくしつつ、全体構図は認識可能に保てます。

画像をスクリーン上・放送・アーケード時代の感じにしたい時、スキャンラインは最速の手段です。

画像にスキャンラインを追加する方法

スキャンラインの追加は数秒で完了し、すべてブラウザ内で実行されます——アップロードなし、サインアップなし、透かしなし。以下の手順に従ってください：

1. 画像をアップロード。アップロードエリアをクリックするか、JPG・PNG・WebP・GIF・BMP ファイルをドラッグ＆ドロップします。画像は即座にデコードされプレビューされます。
2. 線の周波数を設定。1 から 10 のスライダーを使います。低い値はスキャンラインを密に詰め、高い値は間隔を広げて繊細な縞にします。
3. 出力形式を選択。PNG でロスレス品質、JPG でより小さい写真、WebP でサイズと品質の現代的なバランスを選べます。
4. スキャンラインを適用をクリック。ツールが画像を処理し、元と結果のファイルサイズを並べて表示します。
5. 結果をダウンロード。「スキャンライン画像をダウンロード」をクリックして保存します。元のファイルはそのまま残ります。

すべてのステップは JavaScript でブラウザ内ローカルに実行されるため、画像がサーバーにアップロードされることはありません。これにより本ツールは完全にプライベートで高速、機密画像にも適しています。