カウントダウンタイマーのダークモードに関するヒント
最終更新日
ダークモードでは、メールアプリによってメールの色合いが変わります。デザインをほとんどそのままにするものもあれば、背景を暗くしてテキストを明るくするものもあり、Gmailは特に変化が顕著です。タイマーは画像であるため、その色合いは決して変わりません。これらのヒントを参考にすれば、どちらのモードでも見栄えを保つことができます。
ダークモードでは、なぜタイマーが正しく表示されないことがあるのでしょうか
タイマーの周囲のメール本文は暗くなりますが、タイマー自体は選択した色を維持します。背景が白のタイマーは、暗い色のメール内では明るい白のボックスとして表示されます。
各メールアプリがメールの色をどのように表示するかは制御できませんので、どのような背景でも意図的にデザインされたように見えるようにタイマーをデザインしてください。
1. タイマーに独自の背景を設定する
ブランドカラーのような、独自の単色背景を持つタイマーは、どちらのモードでも同じように表示されます。これにより、メール内の隙間ではなく、意図的なデザイン要素として認識されます。さらに、 パディング （スタンダード以上）をタイマーの周りに配置し、透明なカードの上に載せるようにしてください。
2. 透明な背景にはご注意ください
透明なタイマーの縁は、 背景色 お選びください。たとえ……であっても 透明 です。白を選択すると、メールの背景が暗くなった際に、数字の周囲に淡い縁取りが現れます。
タイマーを透過にする必要がある場合は：
- 中程度のグレーの背景色を選んでください。例えば、
#808080. そうすることで、明るい背景でも暗い背景でも、フリンジが目立ちにくくなります。 - この機能は、単色の無地の部分でのみご使用ください。写真やグラデーションの上では、どちらのモードでも縁が粗く見えてしまいます。
これについては、 透明な背景のカウントダウンタイマーがぼやけてしまうのはなぜでしょうか？
3. タイマーの背景色を選んでください。メールの背景色ではありません。
数字とタイマー自体の背景とのコントラストが鮮明であるため、周囲の環境にかかわらず視認性が保たれます。暗い背景やブランドカラーの背景に白または明るい色の数字を表示する方式は、どちらのモードでも機能します。透明な背景に暗い色の数字を表示すると、ダークモードでは数字が見えなくなります。
4. テキストの輪郭を追加する
テキストの輪郭を表示する （Power 以上）では、数字やラベルの周囲に枠線が描かれます。暗い色の数字の周囲に薄い枠線を、あるいは明るい色の数字の周囲に濃い枠線を付けることで、どのような背景でも読みやすさが保たれます。これは、以下のページの下部にございます。 テキストとラベル.
5. もっと大きくしましょう
大きなタイマーほど、1桁あたりのピクセル数が多くなるため、どちらのモードでもエッジが滑らかに見えます。 サイズ または ラベルのフォントサイズ.
高解像度の画面でより鮮明に表示するには、必要な幅の2倍のサイズを選択し、さらに width コード内の画像タグに追加してください。例えば、幅約800ピクセルのX-Largeサイズのタイマーで、 width="400" 400ピクセルで、2倍の精細度で表示されます。
6. 図形が組み込まれたスタイルを試してみてください
ブロック、リング、ピルといったスタイルにより、数字にはそれぞれ独自の色付きの形状が与えられるため、メールの背景色に左右されません。詳しくは カウントダウンタイマーのカスタマイズオプション すべてのスタイルについて。
役に立たないこと
メールテンプレート内のダークモードのコード、例えば prefers-color-scheme CSSでは、タイマーの色を変更することはできません。その色は画像の一部であり、多くのメールアプリでは、そもそもそのコードを無視してしまうからです。
送信する前にテストを行ってください
テストメールを自分に送信し、購読者が最もよく利用しているアプリでダークモードをオンにして開いてみてください。例えば：
- iPhoneおよびAndroidでのGmail
- ウェブブラウザでのGmail
- iPhoneおよびMacのApple Mail
- 見通し
アプリごとにダークモードの扱いが多少異なりますので、複数のアプリで確認してみてください。メールを送信した後に表示がおかしい場合は、Sendtricでタイマーを変更してください。修正内容は、次回そのメールを開いた際に反映されます。
メールのカウントダウンタイマーについて詳しく知りたい場合は、当社の メール用カウントダウンタイマーページ.
関連情報
この記事は役に立ちましたか？
フィードバックありがとうございます！