ブログ

ダークモードの画面でも読みやすいスクリーンショットの撮り方

公開 2026年10月25日 · ダークモード, スクリーンショット, 読みやすさ, 注釈

暗い画面は手を抜いた注釈に厳しいものです。細い線は消え、色はぶつかり、テキストの注記は見えなくなります。ダークテーマでも読めるスクリーンショットを作る設定を紹介します。

ダークモードのインターフェースは画面上ではくっきり見えても、ドキュメントの中では泥沼になります。細いグレーの枠線は白いページで消え、赤い注釈は暗い赤の UI に溶け込み、明るいスライドに貼ったスクリーンショットは黒い穴のように見えます。いくつかの選択で、そのほとんどが解決します。

背景に合わせて注釈を付ける

既定の注釈パレットは明るいインターフェース向けに調整されています。暗い UI では、論理を反転させます。

• 線には明るい色を使います。 白、明るい青、鮮やかな緑などです。暗い赤や暗い青は暗い背景に消えます。
• テキストは標準ではなく縁取りスタイルを使います。 縁取りは各文字の周囲にコントラストのある線を描くので、白いラベルは暗いカードの上でも明るい部分の上でも読めます。
• 太さを 1 段階上げます。 白の上では問題ない 2 ピクセルの線も、#1c1c1e の上では細く見えます。
• 暗い文字の上に半透明のハイライトを重ねるのは避けます。 暗い背景に明るい文字があるところへ低い不透明度のマーカーを重ねると、コントラストがさらに下がります。行の背景をハイライトするか、図形を使います。

同じアプリに定期的に注釈を付けるなら、落ち着いた色をパレットに保存して、どのスクリーンショットでも同じ見た目にします。

枠を画像に合わせて機能させる

暗いスクリーンショットを白いドキュメントページに置くと、境界が必要になります。そうしないと端が消え、画像が虚空に浮かぶ長方形のように見えます。

• きつめに切り抜きます。 暗い領域が主役だと分かるようにします。
• スクリーンショットをドキュメントやスライドに使うときは、画像エディター（Pro）で 明るい背景 を追加します。明るいグレーや白の枠が画像とページを分け、「黒い穴」効果を止めます。
• 同じパネルで 控えめな角丸と影 を追加します。暗いスクリーンショットでは、影は明るいものより大きな役割を果たします。
• 縦横比を揃えます。 一連のスクリーンショット、特にスライドでは重要です。

キャプチャする瞬間を選ぶ

ダーク UI には、ホバーのハイライト、フォーカスリング、読み込み中のスケルトンなど、コントラストを変える一時的な状態がよくあります。ポインタの下にある状態ではなく、情報を担う状態をキャプチャします。

• カーソル自体が要点でない限り、記録する要素からポインタを離します。
• アニメーションが落ち着くのを待ちます。半分透けたトーストのスクリーンショットは役に立ちません。
• ツールチップが主題なら、開いている間にキャプチャします。静止したフレームがそれを保ちます。

テキストより先に図形で示す

暗いインターフェースでは、テキストの注記は UI 自身のラベルと競合します。優先するのは次のとおりです。

• カードや行の周囲に明るい色の 図形の枠線。
• 要素の横に 番号 を置き、説明は画像の下に書きます。
• スポットライト（Pro）で忙しい暗い画面の残りを暗くします。アプリのパレットを変えずにコントラストを上げられます。
• 拡大鏡（Pro）は、スクリーンショットの要点である小さなステータスアイコンに使います。

文章が本当に必要なときだけテキストを使い、画像の一番忙しい部分の外に置きます。

読まれる場所で結果を確認する

キャプチャオーバーレイでよく見えるスクリーンショットも、置かれる場所では失敗することがあります。

• チャットアプリの明るいテーマ では、メッセージ背景と溶け合わないように枠線が必要かもしれません。
• ダークテーマの Wiki では、明るいスクリーンショットのほうが光って見えます。スクリーンショットごとではなく、ドキュメントごとに一貫した扱いにします。
• 印刷 では、暗い背景はインクを消費し、細い線を隠します。背景の処理を使うか、印刷用にだけ反転します。

行き先が混在する場合の最も安全な既定は、小さな余白、一貫した角丸、柔らかな影を付けた明るい背景です。

短いチェックリスト

よくある質問

ダークのスクリーンショットで注釈が消えるのはなぜですか？

暗い赤、暗い青、黒の線は、暗いインターフェースに対してほとんどコントラストがありません。白か明るいアクセント色に切り替え、縁取りのテキストスタイルを使い、線の太さを 1 段階上げてください。

ドキュメント用にダークのスクリーンショットを反転すべきですか？

通常は不要です。反転した UI は見慣れず、色もアプリと一致しなくなります。代わりに余白と枠線を付けて明るい背景に載せると、色を変えずにページと分けられます。

背景には Pro が必要ですか？

はい、画像の背景は Pro の機能です。切り抜き、注釈、ピン留めは無料で、背景と枠の設定は Pro に含まれます。

ブログのほかの記事