リモートMacの色とHiDPIを検証する基準

クラウドMacへリモート接続したとき、デザイン上のグレーが青みがかって見えたり、シミュレータの文字の輪郭がローカル環境よりぼやけて見えたりすることがあります。この段階で、色の値を変更したり画像を差し替えたりしてはいけません。リモートデスクトップに表示されるのは、「アプリのレンダリング結果が転送され、最後にローカル画面へ表示された」映像です。どの段階でも、拡大縮小、圧縮、色変換が加わる可能性があります。まずクラウド側の元データを保存し、その後で差異の発生箇所をレイヤーごとに切り分けるのが正しい手順です。

3つの変数レイヤーを切り分ける

リモートでの表示検証には、少なくとも次の3つのレイヤーが含まれます。

1. アプリのウィンドウ、シミュレータのスクリーンショット、書き出しファイルなど、クラウドMacが実際に生成したピクセル。
2. リモート接続が映像に加える拡大縮小、色深度変換、圧縮。
3. ローカル端末の表示スケーリング、カラープロファイル、クライアントウィンドウのサイズ。

リモート画面だけをスクリーンショットにすると、第2レイヤーと第3レイヤーが同じ証拠に混在し、後から問題の発生箇所を判断できません。検証ごとにディレクトリを作成し、システム情報、クラウド側の元スクリーンショット、ローカルでの確認記録を分けて保存することを推奨します。

mkdir -p "$HOME/visual-baseline"/{system,source,notes}
system_profiler SPDisplaysDataType \
  > "$HOME/visual-baseline/system/displays.txt"
system_profiler SPColorSyncDataType \
  > "$HOME/visual-baseline/system/colorsync.txt"
sw_vers > "$HOME/visual-baseline/system/macos.txt"

これらのファイルは、性能比較のためのものではありません。検証時に使用していたシステムのバージョン、デスクトップの実出力サイズ、システムが認識していたカラープロファイルという3つの基本情報を確認するために使います。

リモートデスクトップは操作や簡易確認には適していますが、リモート映像の見た目だけで、クラウド側が生成した元ファイルを評価することはできません。

解像度とスケーリングの関係を固定する

ぼやけの最も一般的な原因は、素材の解像度不足ではなく、論理サイズ、物理ピクセル、クライアントウィンドウが整数比でスケーリングされていないことです。まず「ディスプレイ」設定で固定の解像度を選択し、「スペースを拡大」などで示される論理サイズを記録したうえで、システムレポートから実際の出力ピクセル数を確認します。検証中に解像度を頻繁に切り替えないでください。

クライアント側では、1:1表示を優先します。ウィンドウ内に収まらない場合は、操作のために一時的に縮小しても構いませんが、証拠を取得する前に元の比率へ戻します。クライアントに「ウィンドウに合わせる」と「画面全体に引き伸ばす」がある場合は、両者を区別してください。通常、前者はアスペクト比を維持しますが、後者は円、フォント、ピクセルグリッドを変形させる可能性があります。

再利用できるテスト画面を用意する

基準画面には、小さい文字、1ピクセルの線、角丸、半透明の影、グレースケール、連続グラデーションを含めます。鮮やかな色のトップ画面だけを使うのは避けてください。コントラストの高い大きな色面では、スケーリング誤差を見つけにくいためです。テスト画面の内容とウィンドウサイズは固定し、その画面を生成したコミットも記録します。

iOS画面を検証する場合は、起動中のシミュレータから元のスクリーンショットを直接書き出す方法を優先します。

mkdir -p "$HOME/visual-baseline/source"
xcrun simctl io booted screenshot \
  "$HOME/visual-baseline/source/simulator.png"
sips -g pixelWidth -g pixelHeight -g profile \
  "$HOME/visual-baseline/source/simulator.png"
shasum -a 256 "$HOME/visual-baseline/source/simulator.png"

ハッシュは、チームメンバーが同一のファイルを受け取ったことを確認するために使います。見た目が同じ2枚の画像が、必ず同じハッシュになるという意味ではありません。画像を保存し直すと、メタデータやエンコードが変わる場合があります。

元のスクリーンショットから問題のレイヤーを特定する

まず、クラウド側で生成した simulator.png をローカルへダウンロードします。チャットアプリのプレビューや再エンコードを経由させないでください。1:1のピクセル表示に対応した方法で、文字の輪郭、細い線、グラデーションを確認します。

元ファイルが鮮明で、リモートデスクトップだけがぼやけている場合、アプリを変更する必要はありません。問題は転送またはクライアント側のスケーリングにあります。元ファイル自体もぼやけている場合は、画像素材の倍率、レイアウトが小数ピクセル上に配置されていないか、テキストのラスタライズ方式、スクリーンショット対象の端末を確認します。ローカルの特定のディスプレイだけで色がずれて見える場合は、デザインの色値を直接変更するのではなく、ファイルのカラープロファイルとローカルの表示設定を照合してください。

次の順序で証拠を保存できます。

01-source.png        云端工具直接生成的原始图
02-remote-view.png   远程客户端看到的画面
03-local-view.txt    本地屏幕、缩放和客户端设置
04-system.txt        云端显示与色彩环境

比較では、一度に変更する変数を1つだけにします。たとえば、クラウド側の解像度を固定したまま、クライアントのスケーリングだけを切り替えます。結果を確認してから、別の色深度や圧縮設定をテストしてください。複数の設定を同時に変更すると、結論を再現できなくなります。

システムの基準を崩さずに色ずれへ対処する

色の問題では、まずファイルにプロファイル情報が含まれているかを確認します。sips -g profile を使えば、画像に関連付けられたプロファイルを簡単に確認できますが、転送経路全体が正しく色管理されていることまでは証明できません。書き出しツールで出力カラースペースを指定できる場合は、プロジェクトの規約で選択肢を固定し、自動処理と手動書き出しの両方に同じルールを適用します。

リモートプレビューを「ローカルに近い見た目」にするためだけに、クラウド側システムの標準ディスプレイプロファイルを安易に置き換えてはいけません。あるクライアントでは正常に見えても、スクリーンショット、動画の書き出し、別のメンバーのセッションに影響する可能性があります。クラウド側の基準は固定し、ローカルクライアントの表示モードを記録したうえで、常に元の成果物を最終判断の根拠とする方が確実です。

半透明の影や暗いグラデーションでは、リモート圧縮によるバンディングにも注意が必要です。元画像を拡大して確認し、元画像は滑らかでもリモート画面に段差が見える場合は、アプリ側のグラデーションを調整する必要はありません。元画像にも明確な段差がある場合に限り、素材のビット深度、書き出し設定、レンダリング処理を調査します。

検証手順を引き継ぎチェックリストに組み込む

チームでは、特定のメンバーがクライアント設定を覚えていることに依存せず、表示検証の基準をコードのバージョンに紐付けて管理します。システムのバージョン、リモートクライアント、ディスプレイ解像度、スクリーンショット対象端末のいずれかを変更した場合は、基準ファイル一式を再生成してください。

引き継ぎ前に、少なくとも次の項目を確認します。

• クラウド側のシステムバージョンとディスプレイレポートを保存している。
• リモートデスクトップで固定解像度を使用し、クライアントが縦横比の異なる引き伸ばしを行っていない。
• シミュレータまたはアプリから元のスクリーンショットを直接生成している。
• 元画像のピクセルサイズ、カラープロファイル、ハッシュを記録している。
• ぼやけや色ずれを判断する前に、元のレンダリング、転送映像、ローカル表示を個別に確認している。
• 不具合記録にコミット、対象端末、クライアント設定、最小再現手順が含まれている。
• 一時的なテストファイルをプロジェクトの成果物ディレクトリから移動し、正式なアーカイブに混入しないようにしている。

VMOakのリモートMacでこの手順を実施する場合も、接続時の操作感と成果物の検証を分けて考える必要があります。前者では操作が快適かどうかを確認し、後者ではクラウド側で生成されたファイルが仕様を満たしているかを確認します。常に元の成果物を証拠の起点にすれば、リモート圧縮、HiDPIスケーリング、実際のレンダリング不具合が同じ問題として混同されることはありません。

よくある質問