WordPressに鮮やかで美しい写真をアップロードしたのに、ウェブサイトではくすんで色あせたように見えるのは非常に残念です。私たちは経験済みであり、丁寧に編集した画像が完璧な彩度を失ったときのフラストレーションを知っています。
これは多くのWordPressユーザーにとって一般的な問題ですが、幸いなことに、修正は驚くほど簡単です。問題はカラープロファイル間の不一致にあることが多く、アップロード前に簡単な変換を行うだけで済みます。
このガイドでは、画像を常に最高の状態に見せるための正確な手順を説明します。PhotoshopやGIMPなどの一般的な写真編集ツールを使用してこれを行う方法を説明します。
この投稿で取り上げるトピックの簡単な概要を以下に示します。
- WordPressで画像の色と彩度が失われるのはなぜですか？
- Photoshopを使用してWordPressで画像の色の損失と彩度の低下を修正する方法
- GIMPでWordPressの色の損失と彩度の損失を修正する方法
- WordPressの画像の色に関するよくある質問
- 画像最適化に関する追加リソース
WordPressで画像の色と彩度が失われるのはなぜですか？
画像の色と彩度が失われる主な理由の1つは、カラースペースです。カラースペースは、カメラやその他の画像取得デバイスで利用できる色の範囲にすぎません。
インターネット上では、RGB（赤、緑、青）カラースペースのさまざまな形式が使用されています。最も一般的な2つの形式は、Adobe RGBとsRGBです。
多くのプロの写真家は、より多くの色を持ち、はるかに優れた結果を提供するAdobeのRGBカラー空間を使用して写真を撮影しています。
しかし、WordPressのようなほとんどのコンテンツ管理システム（CMS）は、sRGBカラースペースを使用しています。画像をアップロードすると、WordPressはいくつかの画像サイズを作成し、それらをsRGBに変換します。これらの画像は、Adobe RGBよりも色の数が少なくなります。
Adobe RGB カラー空間でキャプチャされた画像は、より鮮やかで、ハイライトの色を正確に表示します。WordPress によって変換されると、それらの鮮やかな色は、わずかにくすんだ色調に置き換えられます。
例えば、ここでは異なる画質の画像の比較を示します。左側の画像はAdobe RGBカラースペースを使用して撮影されたものです。しかし、WordPressにアップロードすると、画像は鮮やかさを失い、くすんで見えます。
WordPressはリサイズされた画像も圧縮するため、わずかな品質低下の原因となる可能性があります。詳細については、WordPress JPEG画像圧縮の増減方法に関するガイドをお読みください。
とはいえ、WordPressで画像の色の損失と彩度の低下を防ぐ方法を見てみましょう。
Photoshopを使用してWordPressで画像の色の損失と彩度の低下を修正する方法
この問題を解決する最も簡単な方法は、WordPressにアップロードする前に画像をsRGBカラースペースに変換することです。これは、Adobe Photoshopのような画像編集ツールを使用して簡単に行うことができます。
これは、WPBeginnerの私たち自身のデザインチームが使用している正確な方法です。これにより、チュートリアルで見られるすべてのスクリーンショットと機能グラフィックが、毎回鮮明で色精度が高くなります。
方法1：画像をsRGBに変換する
まず、Adobe Photoshopで画像を開く必要があります。
ここから、メニューの一番上にあるファイル » 書き出し » Web用に保存（旧バージョン）に移動します。
これにより、Web用に保存ダイアログボックスが表示され、「sRGBに変換」ボックスをチェックして保存できます。
画像にカラープロファイルを埋め込むこともできます。ただし、ブラウザが画像を読み取る際にはあまり効果がありません。
方法2：Photoshopでカラー設定を編集する
一方、最初の方法の結果に満足できない場合は、この方法を使用できます。
Adobe Photoshopで、編集 » カラー設定に移動します。これにより、カラー設定ダイアログボックスが表示されます。
設定ドロップダウンメニューから「North America Web/Internet」を選択する必要があります。
次に、「カラーマネジメントポリシー」セクションで、RGB設定をワーキングRGBに変換に選択します。その後、「OK」ボタンをクリックして設定を保存します。
次に、アップロードした元の写真または画像を開く必要があります。
作業スペースプロファイルが一致しない場合、Photoshopは警告を表示し、どうするか尋ねてきます。
「作業スペースにドキュメントの色を変換」を選択し、「OK」をクリックしてください。写真の色プロファイルがより正確に変換されました。これで画像を保存して変更を保持できます。
アップロードしたいすべての画像に対してこのプロセスを繰り返します。これで、WordPressでの色や彩度の損失なしに、これらの変換された画像を安全にアップロードできます。
GIMPでWordPressの色の損失と彩度の損失を修正する方法
GIMPは、Adobe Photoshopの強力な無料代替ソフトです。これを使用して、WordPressへのアップロードのカラースペースを変換できます。
GIMPは基本的に、開こうとする各画像にカラープロファイルが埋め込まれているかどうかを検出します。画像がAdobe RGBカラースペースにある場合、GIMPは自動的に変換するためのダイアログボックスを表示します。
画像に埋め込まれたカラープロファイルがない場合や、GIMPが正しく読み取れない場合があります。その場合は、カラー空間をマニュアルで変更する必要があります。
まず、写真が使用している可能性のあるカラー空間を知る必要があります。通常はAdobe RGBですが、異なる場合もあります。不明な場合は、カメラデバイスを確認して確認してください。
GIMPにはAdobe RGBプロファイルが組み込まれていないことに注意してください。コンピュータにAdobe RGB ICCプロファイルをダウンロードする必要があります。
Adobe Digital Imaging Solutionsのウェブサイトを開き、一番下までスクロールするだけです。オペレーティングシステムを選択し、画面の指示に従ってください。
Adobe RGB ICCプロファイルをzipファイルでダウンロードできるようになります。zipファイルを解凍すると、AdobeRGB1998.iccファイルが見つかります。
ICCプロファイルをダウンロードしたら、GIMPで画像を開くだけです。ここから 画像 » モード に移動し、RGBに設定されていることを確認してください。
カラープロファイルを適用すると、GIMPは色を失うことなく安全にsRGBに変換できるようになります。
画像 » カラーマネジメントに移動し、「カラープロファイルに変換」オプションを選択するだけです。
新しいダイアログボックスが現在開きます。
「変換先」オプションを「組み込みRGB」に設定し、「変換」ボタンをクリックしてください。
GIMPはカラープロファイルをsRGBに変換し、画像を保存できるようになります。WordPressにアップロードしたい他の画像についても、同様の手順を繰り返してください。
WordPressの画像の色に関するよくある質問
何千ものユーザーを支援してきた長年の経験から、WordPressの画像に関して繰り返し寄せられる質問がいくつかあることに気づきました。ここでは、最もよく受ける質問への回答を紹介します。
WordPressは常に画質を低下させますか？
デフォルトでは、WordPressはウェブサイトの読み込みを速くするために画像を圧縮します。これはパフォーマンスには良いですが、品質に影響を与えることがあります。圧縮レベルを調整するか、プラグインを使用してより効果的に管理することができます。
メディアライブラリに既にアップロードされた画像の色の修正はできますか？
残念ながら、まず Photoshop や GIMP のようなツールを使用して元の画像ファイルのカラープロファイルを修正する必要があります。その後、修正したバージョンを WordPress のメディアライブラリに再アップロードできます。
すべてのウェブ画像にとってsRGBが最適なカラースペースですか？
はい、sRGB はウェブの標準カラースペースです。ほとんどすべてのウェブブラウザとデバイスは、それを正しく表示するように設計されています。画像を sRGB に変換することで、すべての訪問者にとって色が一貫して表示されるようになります。
画像最適化に関する追加リソース
画像が適切に最適化されていることを確認するために、以下のガイドを参照してください。
- WordPressに画像を正しく追加する方法（ステップバイステップ）
- WebP vs. PNG vs. JPEG：WordPressに最適な画像フォーマット
- 画像 SEO の初心者ガイド – 検索エンジンのための画像を最適化する
- WordPressでアイキャッチ画像を一括編集する方法
- 最適なウェブデザインソフトウェアの選び方（比較）
- WordPressの画像サイズ入門ガイド（ベストプラクティス付き）
- WordPress画像圧縮プラグイン比較
この記事がWordPressでの画像の色の損失と彩度の低下を修正するのに役立ったことを願っています。また、WordPressでの画像の盗難を防ぐ方法やWordPressのメディアライブラリをクリーンアップする方法に関するガイドも参照してください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
Gen
これを試しましたが、画質は改善されたものの、プログラムで見るのと同じ品質の画像にはまだなっていません。他に何かできることはありますか？
WPBeginnerサポート
主にウェブセーフカラーを使用していない場合に品質が低下しますが、この方法を使用すると、他の方法と比較して品質の低下は最小限に抑えられるはずです。
管理者
シャノン・シン
手書きのイラスト/イラストレーター/フォトショップで作成したグラフィックがWordPressでうまくいかず、フラストレーションを感じていました。ほんの数色（一見すると）ですが、バランスが取れていないと幼稚園児のような見た目になってしまうため、バランスが必要です。ありがとうございました。
WPBeginnerサポート
Glad our guide could help
管理者
Joe Webmaster
これは素晴らしいです！画像の退色に気づき、問題を修正しました。長年この作業をしてきましたが、圧縮の問題だと思っていました。GIMPは完璧に機能しました。ありがとうございます！！！この解決策に今まで気づかなかったなんて信じられません。
WPBeginnerサポート
Glad our recommendation was able to help
管理者
ハーゲン
こんにちは。
この素晴らしいチュートリアルに感謝したかっただけです！
写真家から素晴らしい、高価な写真を撮ってもらったばかりで、ショップに追加したいと思っていました。
彼らがどのように見えたか見て、私たちはとても悲しくなりました。
sRGB カラーに変換すると、すべての画像が正しく表示されます。
ありがとうございます！
WPBeginnerサポート
You’re welcome, glad our recommendations could help
管理者
リチャード・シルバービート
いいヒントだけど、画像は色を「ルーズ」するのではなく、「ロス」するんだよ。Looseはtightの反対だよ。
WPBeginnerサポート
Thank you for letting us know about that typo, we’ll be sure to fix it
管理者
クリス・バイアーズ
上記の手順を実行してもまだうまくいかない場合は、カスタムCSSを削除して、スタイルシートの競合がないか確認してみてください。これで解決しました！！
WPBeginnerサポート
Thanks for sharing what fixed it for you
管理者
Ash
すべての調整を試しました（彩度とコントラストを極端に変更しても）が、毎回泥のようにくすんだ画像に戻ってしまいます。
アーティストのウェブサイトにとって、これは非常にイライラします!!!
もし誰か他の代替案を知っていたら、他の解決策の選択肢もいただけると幸いです。
ポール
RGB をカラースペースと呼び続けているため、これは混乱を招きます。RGB はカラーモデルであり、カラースペースではありません。sRGB は実際には RGB のカラースペースであるため、RGB と sRGB を対比することはできません。
RGBをAdobe RGBの略語として使用していますか？これらのカラースペース（sRGB、Adobe RGB、ProPhoto RGBなど）はすべてRGBスペースです。あなたが何を言っているのか文字通り解釈できません。
答えるべき本当の質問：WordPressはICCプロファイルを画像から削除していますか？最新のブラウザはカラーマネジメントにプロファイルを使用し始めていますが、WPがすべてを台無しにしている場合はそれができません。
これは主にグラフィックアートモニター（sRGBスペースよりも広い色域を表示するモニター）を持っている人々の問題です。タグ付けされていない画像はこれらのモニターではひどく見えます。
Julie
写真がすでに WordPress 内にあり、コンピューターにない場合はどうなりますか？
Rosa Bosma
これは素晴らしいトリックで、WordPressだけでなく、他の多くのプラットフォームでも役立ちます！例えば、より鮮やかな色でプロフィール写真をアップロードできます。
francisco cuellar
ダメでした、色はまだくすんでいます
デイジー
色落ちにずっと悩まされていて、少し気が狂いそうです。画像をRGB（sRGBとWeb用）で、考えられるすべての組み合わせでエクスポートしましたが、WordPressは私の画像から色を削除し続けています。現時点ではどうすればいいかわかりません。
サンドラ・コリンズ
これ、ありがとうございます！ロゴ画像でWPが色を紫から青に変えてしまう問題を解決してくれました。
jmdaix
Photoshopの「Web用に保存」メニューから「sRGBに変換」を有効にするのが簡単な方法かもしれません。PSDまたは元のファイルは作業スペースのままにしておき、WordPress用に良いバージョンをエクスポートするだけです。
パディ
GIMPを使用する場合も同様のプロセスがありますか？ありがとうございます。
WPBeginnerサポート
GIMPでの実行方法に関するセクションを記事に追加しました。お役に立てば幸いです。
管理者
Jaime
これはGimpでも機能しますか、それともPSだけですか？
WPBeginnerサポート
GIMPでの手順を追記して記事を更新しました。
管理者
ジョン・ブラウン
用語を何度か入れ替えています。カラースペースの名前はsRGBとAdobe RGBです。例えば、「Adobe sRGB」というものは存在しません。