Dark Mode Screenshot

ダークモードのスクリーンショットは、ダークの外観のインターフェースを表示します。暗い背景に明るい文字とコントロールを配置した状態です。macOSでは、システム設定の「外観」で外観を設定します。選択肢は「ライト」、「ダーク」、「自動」です。「自動」を選ぶと、日中の時間帯に応じて切り替わります。

ネイティブアプリは通常、システムの設定に従います。独自のテーマ設定を持つアプリも多くあります。Webサイトは、Media Queries Level 5で定義されたCSSのメディア特性 prefers-color-scheme で設定を検出します。ダークのスタイルがないサイトは、どちらのモードでもライトのデザインを表示します。そのため、システムがダークに設定されていても、ページがダークになるとは限りません。

ダークモードのスクリーンショットが重要な理由

多くの人がMacやスマートフォンをダークモードで使っています。ライトの画面しか示していないドキュメントは、色、境界線、アイコンが異なるため、読み手を混乱させることがあります。製品ページやストアの掲載情報では、両方の外観を示すことで、アプリが両方に対応していることを伝えます。

両方のモードを撮影する

1. 撮影する画面を選び、ウィンドウのサイズと位置を固定します。
2. 外観をライトに設定し、一式を撮影します。
3. ダークに切り替え、対象のアプリが変わったことを確認してから、同じ一式を再度撮影します。
4. ライトかダークを示す接尾辞をファイル名に付け、対になる画像をまとめます。

Temposhotは、画面の見た目をそのまま記録します。外観ごとに、同じ自動キャプチャの設定を2回実行してください。Custom Area ソースは保存された範囲で開くため、2つの一式の位置が揃います。

ダークモードと可読性

ダークな背景に細いライトの文字を配置すると、画像を縮小したときに文字が細く見えます。広い暗い領域は、PNGで圧縮すると効率よく圧縮されます。低品質のJPEGでは、暗いグラデーションに縞模様が出たり、明るい文字の周囲に輪郭のにじみが出たりすることがあります。拡大した切り抜きで確認してください。文字をくっきり残すには、PNG Export (Lossless) で書き出します。

よくある間違い

• 1つのガイドでライトとダークのスクリーンショットを混在させる。
• アプリが独自のテーマ設定を保持している状態で、システムの外観を切り替える。
• 長時間の撮影中も外観を「自動」のままにし、実行の途中で外観が変わる。
• 境界線のないダークのスクリーンショットを、ダークのページに配置し、端が見えなくなる。

同じスクリーンショットを繰り返し撮りますか？

設定をプリセットとして保存し、外観ごとに実行してください。詳しくは macOSでのスクリーンショットの自動化 をご覧ください。

よくある質問

Macがダークでも、Webサイトがライトのままなのはなぜですか？

サイトにダークのスタイルがないか、システムの設定ではなく独自のテーマ切り替えを使っている可能性があります。撮影の前に、サイトの設定を確認してください。

ダークのスクリーンショットにはどの形式が最適ですか？

PNGは文字の輪郭を正確に保ちます。ファイルサイズが重要な場合は、品質の設定を高くしたJPGを使ってください。

出典

• Media Queries Level 5（W3C）
• Light-on-dark color scheme（Wikipedia）

関連リソース

• キャプチャプリセット: 設定の保存と再利用。
• 書き出し形式: PNGとJPGのオプション。
• Compare Images: ライトとダークの版を比較します。