カラマネ小話

【連載】制作者のための「Webカラマネ講座」 モバイルデバイス編

企業ホームページ、ECサイト、ブログ、SNSなど、Webに画像を掲載する機会のある方は多くいらっしゃいます。皆さんが掲載した製品や商品、制作物などの画像は、読者に意図した色で伝わっていますか?

Webサイトにもいくつかのルールと注意点があります。このコンテンツでは、EIZOで検証した結果をもとに、マメ知識を交えながらWebにおける色管理やカラーマネージメントを連載形式で解説していきます。

 

第1回 Webブラウザ編 第2回 ICCプロファイル編 第3回 モバイルデバイス編

 

第3回 モバイルデバイスでのカラーマネージメント

第1回Webブラウザ編第2回ICCプロファイル編の解説を通して、読者の皆さんにWebコンテンツ制作におけるカラーマネージメントの重要性をお伝えしてきました。しかし、ここで次のような疑問が浮かび上がってくるかもしれません。

『Webコンテンツに掲載した画像は、モバイルデバイス(スマートフォンやタブレット端末)で意図通りに表示されているのだろうか?』

WebコンテンツはPCユーザーだけでなく、スマートフォンやタブレット端末といったモバイルデバイスユーザーにも多く閲覧されます。モバイルデバイスのWebブラウザでも、PCのWebブラウザで見たときと同様に、制作者が意図した色と同じ色を表示できるのか。(ICCプロファイルを読み込み、カラーマネージメントに対応しているのか。)この疑問にお答えするために、第3回では、EIZOでの検証結果をもとに、モバイルデバイス上のWebブラウザがどのようにカラープロファイルを処理しているのかを解説します。

webcm03_001.jpg

 

 

モバイルデバイスの色域

PC用のモニターは、ColorEdgeに代表されるように、高画質で広色域に表示できるものがあります。では、モバイルデバイスはどうでしょう。Apple社は、iPhone 7から広色域液晶パネルを搭載し、より広色域の表示が可能になりました。またAndroidも、OS Android 8.0以降から、一部のモデルにおいて、画質モードやカラー設定で、広色域表示を選択できるようになりました。
このように、近年の製品では、sRGBよりも広い、Adobe RGBやDCI-P3に近い広色域を表示できるモバイルデバイスが増えました。
 

webcm03_002.jpg

 

モバイルデバイス上のWebブラウザでの表示検証

webcm03_003.jpg

・ColorEdgeでiPhone 7を測定する様子

では実際に、モバイルデバイスでWebブラウザを開くとき、画像はどのように表示されるのか、検証した結果は以下の通りです。今回、検証に使用したWebブラウザは、iPhoneではSafari、AndroidではChromeです。 

  • 今回の検証では、ColorEdge専用カラーマネージメントソフトウェアColorNavigator 7のデバイス測定機能(デバイスエミュレーション機能)を使用しました。これは、他のデバイス上に表示されたWebブラウザの色特性を測定することができる機能です。
デバイス iPhone 7 Google Pixel 3
OS iOS 13.4.1 Android 9
ブラウザ Safari 13.1 Chrome 83.0.4103.101
①画像に埋め込んだカラープロファイルが反映されるか
②カラープロファイルのない画像はどう表示されるか sRGBの色域として表示される デバイスの色域で表示される
③デバイスのプロファイルを参照しているか ×
sRGB色域のデバイスと認識

※ iPhone 7以降の機種、iPad ProでSafariを使用した場合も、同様の結果となります。

  • 2020年6月現在のブラウザで検証した結果です。ブラウザのアップデート状況によって結果は異なる可能性がありますのでご了承ください。

 

iPhone/Safariの場合

  • 画像に埋め込まれたカラープロファイルを読み込み、正しく表示できます。
  • カラープロファイルのない画像も、自動的に汎用性の高いsRGB色域で表示されます。

連載の第1回において、macOSでSafariを検証したときと同じ結果となりました。

 

Android/Chromeの場合

  • 画像に埋め込まれたカラープロファイルを参照しますが、デバイスのプロファイルを参照しません
  • 実際のデバイスの色域に関係なく、すべてsRGB色域のデバイスとして認識します。そのため、広色域モデルで広色域表示の設定にしている場合は、制作者がsRGBプロファイルを埋め込んでいても、正しい表示ができません。正しい表示をするには、モバイルデバイスの設定の変更が必要です。詳しくは以下の「Androidのカラー設定」を参照ください。
  • カラープロファイルのない画像は、デバイスの表示色域に引き伸ばしたり圧縮したりして表示されるため、極端に派手な発色になったり、地味な発色になったり、おかしな色になる場合があります。

連載の第1回において、Windows OSでInternet Explorerを検証したときと同じ結果となりました。


結果をまとめると、PCで閲覧されるWebコンテンツの場合同様に、モバイルデバイスで閲覧されるWebコンテンツを制作する場合にも、画像にはsRGBプロファイルを埋め込むことが推奨されます。
ただしこの結果は、限られたWebブラウザ上の検証結果であるため、他のブラウザやアプリケーションを使用して表示した場合、異なる結果となる場合があります 。

 

Androidのカラー設定

広色域モデルのAndroidにはデバイスのカラー設定があり、以下の表のように色域を変更することが可能です。

デバイス名 デバイスのカラー設定 デバイス測定結果
【参考】iPhone 広色域で表示される
Google Pixel 3 ナチュラル sRGBの色域で表示される
アダプティブ 広色域で表示される

※ デバイスのカラー設定の名称はメーカーによって異なる場合があります。

AndroidのChromeブラウザで画像を表示する際には、デバイスのプロファイルを参照した表示ができないため、広色域の「アダプティブ」を選択していると、画像の色域が引き伸ばされたり圧縮されたりする場合があります。Chromeを使ってWebブラウザを正しい色で閲覧したい場合は、デバイスのカラー設定は、sRGB相当の色域で表示する「ナチュラル」などを選ぶようにしましょう。

 

まとめ

  • Webに掲載する画像は、汎用性の高いsRGBプロファイルを埋め込みましょう。

  • sRGBのプロファイルを埋め込むことで、モバイルデバイス上でも制作者が意図した色を正しく表示できます

  • ただし、Androidを使用したChrome上で、画像を正しい色で見ていただくためには、ユーザー側でのデバイスのカラー設定が必要となります。

     

webcm03_004.jpg

 


 

【次回予告!乞うご期待】

次回は、モバイルデバイスで撮影したデータの 運用について検証します。


 



 

Webコンテンツ制作におすすめのモニター

CS2410
ColorEdge CS2410

 

sRGB_img_cs2410.jpg

専用ソフトを使って汎用性の高いsRGB表示環境を維持。コストパフォーマンスよく導入できる。

 


CS2410をARを使って試し置きできます!
bnr_ar.jpg


 

カラマネ小話一覧に戻る

 

第1回 Webブラウザ編 第2回 ICCプロファイル編 第3回 モバイルデバイス編

 

ピックアップ

  • 悩んでいるあなたに…おすすめのColorEdgeをご提案
  • よくわかるカラーマネージメント (カラマネ小話)
  • ColorEdge 写真家100名、唯一の選択
  • 映像制作者のためのカラーワークフロー連載
  • Cool Japanを支える、EIZO 導入企業様一覧
  • 3DCGでのカラーマネージメントがよくわかる!読み物公開中
  • 雑誌掲載記事
  • ColorEdge受賞
  • 開催イベントのあゆみ
  • 壁紙データ
prev next