Web上に画像をアップロードすると、色味が変わってしまうことはありませんか？
これは画像の内容や画質が悪いわけではなく、色の表現方法の違いが原因で起きる現象です。
たとえば、CMYKという色表現の画像をそのままWordPressにアップロードした場合、画面上で見ると「暗くなる」「色が変わっている」と感じることがあります。
そこで当記事では、CMYKとRGBの違いを軸に、色が変わる原因や対策を解説します。
目次
CMYKとRGBの違いとは
CMYKとRGBは、どちらも色を表現するためのルール（色空間）です。ただし、この2つは使われる場面がまったく異なります。
CMYKは、主に印刷物向けの色表現です。一方、RGBは、パソコンやスマートフォンなど、画面表示向けに作られています。
この違いを理解していないまま画像を使うと、「つくったときと色が違う」「Webにアップしたら暗くなった」といった現象が起きやすくなります。
CMYKとRGBは、色を表現するための仕組みの違いです。拡張子とは全く別物です。
WEBで使う画像ファイルには、複数の種類があります。 同じ画像ファイルでも、複数のファイル形式があり、「.jpeg」などの拡張子と呼ばれる文字列で判別できるようになっています。 当記事では、そんな画像ファイルの拡張子について、種類別の違いや特性をご紹介いたします。 拡張子とは ...
CMYKとは（印刷用の色の仕組み）
CMYKは、印刷物で使われる色の表現方法です。シアン（C）、マゼンタ（M）、イエロー（Y）、ブラック（K）の4色を組み合わせて色を作ります。
チラシやパンフレット・名刺など、インクを使って印刷するものは、このCMYKを前提に作られています。
画面表示よりも、「印刷したときにどう見えるか」を重視した色の仕組みがCMYKです。
RGBとは（Web・画面表示用の色の仕組み）
一方、RGBは、Webサイトやスマートフォン、パソコンの画面表示用に作られた色の表現方法です。
赤（R）、緑（G）、青（B）の光を使って色を表現するため、画面上で自然に見える設計になっています。
現在のブラウザやWordPressを含む多くのWebサービスは、RGBを基準に画像を表示していますので、Webで使う画像は、基本的にRGBで作成・保存するのがセオリーです。
なぜCMYKの画像は色が変わって見えるのか
印刷用（インクでの表現）に最適化されたCMYKは、Webサイトやブラウザではそのまま表示できないため、画面表示用の色へ変換されてしまいます。
この無理な変換が原因で、次のような現象が起こるわけです。
- 色が暗く見える
- 全体的にくすんで見える
- 元のデザインと印象が変わる
もしWordPressサイトにアップした画像の色味が変わってしまった場合は、色の表現方法（色空間）が何かを確認してみるといいでしょう。おそらくCMYKになっているはずです。
たとえばMacの場合、画像を右クリックして「情報を見る」から、色空間をかんたんに確認できます。
色空間がRGBになっている画像
上記のように、色空間がRGBになっていれば、Web上にアップして問題ないです。
色味を変えずに画像をアップする方法
WebサイトやWordPressで画像を使う場合は、色の表現方法をRGBに変換してからアップロードすれば問題なしです。
Photoshopなどの画像編集ソフトを使っている場合は、次のような設定で対策できます。
- 色の設定をRGBにする
- Web用として書き出す
画像を書き出す前に、下記箇所を確認しておきましょう。
Photoshopで書き出す前に確認する箇所
まとめ
CMYKは印刷用、RGBはWeb用の色の表現方法です。
CMYKの画像をそのままWebにアップすると、ブラウザ側で変換が行われ、色味が変わって見えることがあります。そのため、Webで使う画像は、あらかじめRGBに変換しておくのが基本です。
用途に合った色の仕組みを使い分けることで、画像の色が変わってしまう問題は防げます。
画像編集に関するおすすめ記事
プロ向きのPhotoshopなどではなく、もっと簡単に扱える無料の画像編集ソフトを教えてほしい、という方も多いでしょう。 当記事では無料で初心者でも使える画像・写真の編集ソフトをご紹介します。 サイト運営においても切り抜き・サイズ変更・文字入れなどの簡単な画像編集くらいはできる方が作業が...
この記事では、Webライターのための画像作成テクニックをお伝えします。 見栄えのいい画像を作れるスキルは、ライターとしての価値を底上げしてくれます。 他ライターとの差別化になりますし、単価も上げやすいです。 しかも、画像作成のスキルは習得が容易です。プロのデザイナーを目指すなら話は別で...
ChatGPTを筆頭に、凄まじい勢いで進化しているAIツールですが、画像編集に便利なものもあります。 今回ご紹介する「ClipDrop」です。 ブラウザ上でドラッグ&ドロップするだけで、Photoshopで編集したような加工を実現できます。画像の色味や質感を変更するようなレベルではあ...
WordPressテーマ集
コメント