ダークモードでスクリーンショットを撮るには？

撮影前にOS、ブラウザ、アプリのダークモードを有効にします。macOSでは「システム設定」>「外観」、Windowsでは「設定」>「個人用設定」>「色」からダークを選びます。

ドキュメントにはダークモードとライトモードのどちらを載せますか？

読者に合わせて選びます。多くのユーザーがライトモードならライト版を標準にし、製品の初期設定がダークならダーク版を先に示します。重要な画面は両方を用意するのが理想です。

広い暗色部分は色の変化が少ないため、わずかに圧縮しやすい場合があります。差は通常数%ほどなので、ファイルサイズだけを理由にモードを選ぶ必要はありません。

自動撮影ツールなら、撮影ごとに配色設定を切り替え、同じページのライト版とダーク版を作れます。手動でテーマを切り替える作業が不要です。

白い背景の上に暗い画像を置くと、周囲との強い差によって画像が薄く感じられる場合があります。細い枠線や影を加えると、画像と背景を分けやすくなります。

ダークモードのスクリーンショットは、OS、ブラウザ、アプリをダークモードに設定して撮影した画像です。暗い配色の画面をそのまま示します。

ダークモードは一部の人だけが使う設定ではありません。主要なOS、ブラウザ、アプリの多くが暗いテーマに対応し、初期設定として使う人も少なくありません。ドキュメント、マーケティング資料、アプリストアにライトモードだけを載せると、ダークモード利用者が実際に見る画面と異なります。

両方を撮影すれば、ユーザーごとの表示に合うドキュメントを作れます。マーケティングでは、ダークモード対応を重視する人へ暗い配色を見せられます。QAでは両方を比較し、コントラスト不足、テーマ用設定の欠落、配色に追従しない要素など、一方のモードだけに出る問題を見つけられます。

アクセシビリティの面でも重要です。目の疲れ、光への敏感さ、暗い環境での作業を理由にダークテーマを使う人もいます。ライト版だけの画像では、その人たちが使う画面を正しく示せない場合があります。

手動で両方を撮る場合は、システムまたはアプリのテーマを切り替え、画面の更新を待ってから再撮影します。1ページなら簡単でも、数十画面ある製品では作業量が倍になります。

自動撮影では、ページを表示する前にprefers-color-schemeメディア機能をlightまたはdarkへ設定できます。同じURLから1回の処理で両方を作り、テーマの切り替えや撮り忘れを防ぎます。表示幅とスクロール位置が一致し、配色だけが異なる2枚になります。

実際のドキュメント作成では、まずライト版を撮り、まったく同じ設定でダーク版を撮ります。表示幅、切り抜き、ファイル名の規則を固定すると、2枚を確認しやすく、UI変更後の撮り直しも簡単です。

両方を撮るときは、次の項目をそろえます。

ダークモードには、ライトモードとは異なる注意点があります。暗い背景の白または明るい文字は、サブピクセル描画の違いで細く見える場合があります。細い境界線、控えめな影、無効状態の要素なども、明るい背景より見えにくくなることがあります。

白いドキュメントやWebページへダークモード画像を置くと、周囲とのコントラストが強くなり、内容より画像の端が目立つ場合があります。細い枠線、角丸、影を付けると、画像とページの境界が分かりやすくなります。

反対に、暗いページやプレゼンテーションへライトモード画像を置いても、同じような不一致が生じます。資料の背景に画像のテーマを合わせると、見た目が整います。

ドキュメントに一方だけを載せる。 製品がダークモードに対応しているのにライト版しかなければ、ダークモード利用者は普段の画面と結び付けにくくなります。
コントラストを確認しない。 暗いテーマでは、補助的な文字や無効な要素のコントラストが不足する場合があります。実際に表示する大きさで、文字を読めるか確認します。
撮影設定がそろっていない。 ライト版とダーク版で表示幅が違うと、並べて比較できません。切り替える前に、表示寸法とコンテンツの状態を固定します。
暗い画像を枠なしで明るい背景へ置く。 白いページに暗い画像だけを置くと、浮いて見えます。枠線や影を加えてページ上の位置を明確にします。