DVDロゴ風スクリーンセーバー公開のお知らせ

パッチー・クリエイツでは、懐かしのDVDロゴが跳ね返るスクリーンセーバーをブラウザで再現した、Webツールを公開しました。

企画の発端

このWebスクリーンセーバーは、とある配信の蓋絵で「ロゴがスクリーンセーバーみたいに動き回ってたらオモロいんちゃう」みたいな雑なボケがあったので、作ってみました。

ただの再現ではなく、

好きなロゴ画像で動かせる
色を自由に変えられる
見た目の雰囲気を細かく調整できる

という遊べるスクリーンセーバーを目指したのが特徴です。

主な機能

完全ブラウザ完結

アプリやソフトではなく、ブラウザだけで動くことを前提に設計されています。

インストール不要で、誰でもURLを開くだけで使えます。

表示内容のカスタマイズ

画像: 好きなロゴ画像（PNG推奨）をアップロード
テキスト: 文字列を入力して表示
背景: 単色、画像、動画、図形から選択可能

4つの色モード

元の色味

最もシンプルな表示モード。オリジナルのPNGそのままで動きます。

特定色に変換

好きな色の"DVDロゴ風"に変えられるモード。ただのフィルターではなく「色付き照明」的な表現になっています。

跳ね返るたびに色変更

壁に当たるたびに鮮やかなランダムカラーへ変化します。当たった瞬間の変化が楽しく、見続けてしまう"中毒性"があります。

虹色に変化

時間経過でHue（色相）を回転。つまりロゴが光っているように色が流れる演出です。

負荷を抑えるため、色の再計算は最大30FPSに制限する工夫も入っています。

陰影を維持した色変換

ロゴの色を変えるとき、単純な色置換ではなく元画像の明るさ（陰影）を利用して色を乗算しています。

初期実装では陰影が強すぎて「くすんだ色」になってしまう問題が発生しましたが、改良版では濃淡の強さを調整できるようになっています。

0.0: 完全な単色（陰影なし）
0.25: デフォルト（鮮やかさと陰影のバランス）
1.0: 元の濃淡を完全に保持

絶妙なバランスを自由に調整できます。

操作方法

表示内容の設定

画像: 「ファイルを選択」ボタンからロゴ画像をアップロード（PNG推奨）
テキスト: テキスト欄に文字列を入力
背景:
- 図形: 「図形を追加」ボタンで背景に図形を配置
- 単色: 背景色を選択
- 画像: 背景画像をアップロード
- 動画: 背景動画をアップロード
- RGB: RGB色分解モード

色モードの選択

元の色味: オリジナルの色で表示
特定色に変換: 指定した色に変換（「変換色」で色を選択）
跳ね返るたびに色変更: 壁に当たるたびにランダムな色に変化
虹色に変化: 時間経過で色相が回転

濃淡の強さ（色変換時のみ有効）

スライダーで0.0～1.0の範囲で調整。デフォルトは0.25です。

サイズ・速度の調整

倍率: ロゴのサイズを調整
速度: 移動速度を調整

再生コントロール

▶ 再生: スペースキーまたはボタンで再生/一時停止
- 再生開始時に全画面を要求（拒否するとウィンドウ表示のまま）
🔄 位置リセット: ロゴの位置を中央に戻す
⚙️ 全パラメーターリセット: すべての設定を初期状態に戻す

キーボード操作

スペースキー: 再生/一時停止
Escキー: 一時停止
キャンバスクリック: UIの表示/非表示を切り替え

UI設計のこだわり

このUIは普通の設定パネルではなく、スクリーンセーバーとして邪魔にならないUIを目指しています。

自動的に消えるUI

再生中: UIが自動的に非表示になる
一時停止: UIが表示される
キャンバスクリック: UIの表示/非表示を手動で切り替え

という"気配を消すUI"になっています。

これは、操作性よりも"鑑賞体験"を優先したUI設計思想の表れです。

技術的なポイント

Canvasによるリアルタイム描画

アニメーションはすべて<canvas>による毎フレーム描画で実装しています。

DOMアニメーションではなくCanvasを使っている理由は：

ピクセル単位の色加工ができる
描画パフォーマンスが安定
画像の色変換や虹色エフェクトが実現可能

画面サイズとDPR対応

Retinaなどの高解像度ディスプレイでもロゴがボケないように、devicePixelRatio対応が入っています。

フルスクリーン仕様

ブラウザのセキュリティ上、フルスクリーンはユーザー操作中でないと発動できません。

そのため「再生ボタン押下時にだけ全画面要求する」という仕様になっています。

色変換のパフォーマンス

毎フレーム画像の色を変えると重くなるため、

通常モードはキャッシュ利用
虹色だけ限定的に再計算

という最適化が入っています。

体験として目指したもの

この作品は単なるアニメーションではなく、

ぼーっと眺めていられる
懐かしくて
ちょっと楽しくて
触ると遊べる

そんな現代版デジタルおもちゃを目指しています。

ぜひ、DVDロゴ風スクリーンセーバーをお試しください。

ご不明な点がございましたら、お気軽にお問い合わせください。