単色背景ジェネレーター
オンラインで単色背景画像を生成、カラーとサイズをカスタマイズ、PNG/JPGでダウンロード
単色背景ジェネレーターとは？
単色背景ジェネレーターは、任意の単色とサイズで背景画像を素早く作成するオンラインツールです。HEX カラー値のカスタム入力、一般的なサイズプリセット（1920x1080、4K など）、PNG/JPG 出力形式に対応しています。生成された画像はデスクトップ壁紙、SNS カバー、プレゼン背景、Web デザインなどに使用できます。すべての処理はブラウザ上で完結し、プライバシーを保護します。
使い方
使い方
- 背景色を選択：カラースウォッチをクリックしてピッカーを開くか、HEX値を直接入力
- 画像サイズを選択：プリセット（1080p、2K、4Kなど）をクリックするか、カスタムサイズを入力
- 出力形式を選択：PNG（可逆圧縮）またはJPG（非可逆圧縮、ファイルサイズが小さい）
- 「画像をダウンロード」ボタンをクリックして、単色背景画像をローカルに保存
エクスポートのヒント
- 正確な単色出力にはPNGを、ファイルサイズの軽量化を優先する場合はJPGをご使用ください。
- 壁紙やプレゼン背景には、拡大・縮小による劣化を避けるため、表示画面に合ったサイズを選択してください。
利用シーン
仕組み
単色ジェネレーターは HTML5 Canvas API を使って単一色で塗りつぶされた長方形画像を作成し、PNG または JPEG としてエクスポートします。パイプラインは単純で、指定されたピクセル寸法でプログラム的に Canvas 要素を作成し、getContext('2d') で2Dレンダリングコンテキストを取得して、ctx.fillRect(0, 0, width, height) で選択した fillStyle の色でキャンバス全体を塗りつぶします。 色の入力は #2563eb のような6桁のHEX値を受け付け、CSS とブラウザのデフォルトコンポジターが使用するのと同じ sRGB カラースペースに直接マッピングされます。HEX値が ctx.fillStyle に代入されると、ブラウザは内部的にキャンバスバッキングストアのピクセルフォーマット（通常はRGBA8、R・G・B・Aの順で1ピクセルあたり4バイトのプリマルチプライドアルファ）に変換します。塗りつぶしの場合、長方形内のすべてのピクセルは同じRGBAの組を持つため、非圧縮メモリ使用量は正確に幅 × 高さ × 4バイトです。4Kキャンバス（3840 × 2160）ではレンダリング中に約33MBのGPUメモリを使用します。 エクスポート形式はファイルサイズと忠実度の両方に影響します。PNG（Portable Network Graphics、ISO/IEC 15948）はDEFLATE圧縮アルゴリズムとスキャンラインフィルターステップを使用し、平坦な色の画像ではフィルターが左隣のピクセルから予測し、DEFLATE がほぼゼロの残差を極めてよく圧縮します。1920×1080の単色PNGは通常4KB未満です。JPEG（ISO/IEC 10918）は8×8ピクセルブロックへの離散コサイン変換（DCT）の後、量子化とハフマン符号化を適用します。品質0.92でも、完全に平坦なブロックのDCTは単一のDC係数を生成しますが、クロマサブサンプリング（ほとんどのエンコーダーのデフォルトは4:2:0）により、単色画像を拡大すると淡い8×8のブロックアーティファクトが見える場合があります。そのため、正確な単色出力にはPNGが推奨形式であり、ファイルサイズの制約がピクセルパーフェクトな忠実度を上回る場合にのみJPEGを使用すべきです。 サイズ検証は幅を7680、高さを4320（8K UHD）に制限しています。これはChromeのキャンバスサイズ上限32767×32767ピクセルを下回りますが、ほとんどの統合GPUが単一テクスチャとして確保できる容量を上回っており、低メモリデバイスでのブラウザタブクラッシュに対する安全マージンとなっています。
- キャンバスピクセルフォーマット: ctx.fillStyle はHEX、rgb()、名前付き色などCSSの色情文字列を受け付け、ブラウザがキャンバスバッキングストアのネイティブRGBA8フォーマットに変換する。単色ピクセルはすべて同一のため、非圧縮メモリコストは幅 × 高さ × 4バイト
- PNG 圧縮（ISO/IEC 15948）: スキャンライン予測子付きDEFLATE。平坦な色の画像では予測子がほぼゼロの残差を生成し、DEFLATEが極めて高い圧縮率を達成。1080pの単色PNGは8.3MBのRawピクセルに対して通常4KB未満
- JPEG 圧縮（ISO/IEC 10918）: 8×8 DCTブロック、量子化テーブル、ハフマンエントロピー符号化。平坦な色の入力はブロックごとに単一のDC係数を生成するが、クロマサブサンプリング（4:2:0）により品質0.92でも微妙な8×8グリッドアーティファクトが発生する場合がある
- toDataURL と toBlob の比較: toDataURL() は同期的なbase64エンコードのdata: URIを返し（エンコード済みバイトに約33%のオーバーヘッド追加）、toBlob() はfetchアップロードやcreateObjectURLダウンロードリンクに適した非同期的なBlobを返す（base64拡張なし）
- GPUメモリ制限: Chromeは個々のキャンバス寸法を32767×32767に制限するが、4Kキャンバスで約33MBのGPUテクスチャメモリを消費。ツールの7680×4320上限は、統合GPU搭載ノートPCの性能内でレンダリングを維持する安全制限
- カラースペース: キャンバス操作はデフォルトでsRGBカラースペースを使用。HEXからRGBへの変換はsRGBエンコーディング上では線形だが、物理的な光の強度に対しては非線形 — 生成画像を広色域（Display P3）ワークフローで使用する場合に重要
- ローカル実行: キャンバス作成、塗りつぶし、エクスポートの全パイプラインがブラウザのメインスレッドでネットワーク呼び出しなしに実行。生成された画像バイトはデバイスから送出されることはなく、ダウンロード完了後にキャンバス要素はガベージコレクションされる
使用例
ブランドカラー背景 (Tailwind blue-600)
色: #2563eb
サイズ: 1920 x 1080
出力: 青の全画面背景
用途: デザインモック、ヒーローバナー、プレゼン資料2K の黒色壁紙
色: #000000
サイズ: 2560 x 1440
出力: 2K の黒壁紙 (16:9)
用途: OLED 向けデスクトップ壁紙、ドット抜け確認用リファレンス4K の白色背景
色: #ffffff
サイズ: 3840 x 2160
出力: 4K の白背景
用途: 印刷の塗り足し確認、書類スキャンの基準、e-ink 風スクリーンショットよくある質問
このツールは何をするものですか？
画面全体を単一の純色（またはフルスクリーンのカラーピッカー）で塗りつぶします。モニターのドット抜けや常時点灯ピクセルの確認、ディスプレイのキャリブレーション、ビデオ通話の背景、写真撮影用の均一な色面の作成に便利です。
ドット抜けはどのように確認しますか？
純粋な赤、緑、青、白、黒をフルスクリーンで順番に表示します。背景と異なる色のままで変化しないピクセル、または白い画面上で黒く見えるピクセルは、ドット抜けや常時点灯の可能性が高いです。明るさを下げた状態でも確認しましょう。一部の不具合は特定の輝度レベルでのみ現れます。
任意の色を選べますか？
はい。カラーピッカーは HEX、RGB、HSL、または色名を受け付けます。テストでよく使われる色は純粋な原色（#FF0000、#00FF00、#0000FF）、純粋な黒、純粋な白、ミドルグレー（#808080）です。フルスクリーン表示は画面のネイティブ解像度で、合成によるアーティファクトなしに描画されます。
フルスクリーンに切り替えるには？
フルスクリーンボタンをクリックするか、F11 を押してください。ページが画面全体に広がり、端から端まで確認できます。終了するには Esc または F11 を押します。
何かが保存されたりアップロードされたりしますか？
いいえ。色の値はページ内のローカル情報で、外部に送信されることはありません。タブを閉じれば破棄されます。
なぜ同じ色が2台のモニターで違って見えるのですか？
パネルの種類（IPS、VA、TN、OLED）やカラーキャリブレーションが異なると、同じ RGB 値でも描画結果が変わります。カラーマネジメントなしで広色域モニターを使用している場合、色は sRGB の元の値より彩度が高く見えます。モニターキャリブレーションソフトウェア（DisplayCAL、OS のカラープロファイル）でこの差を埋められます。
バックライトムラのテストにも使えますか？
はい。暗い部屋で純粋な黒をフルスクリーン表示してください。端や角に光のムラが見える場合、それはバックライト漏れ（LCD）または軸外の発光（OLED）です。LCD ではわずかであれば正常ですが、端の激しいムラはパネルの不具合です。