hello,idea

読了時間: 6 min read

ダークモードでもアイデア帳の温かみを保つ工夫

WebデザインCSS技術

前回の記事では、このブログのノート・付箋モチーフデザインについてお話ししました。

今回は、その続編として、ダークモードでもアイデア帳の温かみを保つための技術的な工夫について掘り下げていきます。

ダークモード対応の課題

カフェでノートを広げるといえば、白い紙にカラフルなペンや付箋でメモを取る、というイメージが強いですよね。

でも、ダークモードは背景が暗くなります。ここで単純に色を反転させてしまうと、あの温かみが失われてしまいます。

直面した問題

ダークモード対応で直面した主な課題は以下の通りです：

  1. 紙の質感をどう表現するか
    白い紙 → 暗い背景になっても「紙」に見えるか？

  2. 付箋の色をどうするか
    明るい色の付箋 → ダークモードでも見やすいか？

  3. 罫線やマステの視認性
    薄い線 → 暗い背景でも見えるか？

  4. 温かみを保てるか
    カラフル＝温かみ → ダークモードでも同じ印象を与えられるか？

ALERT: 単純な色反転はNG

ライトモードの色をそのままダークモードに持ち込むと、眩しすぎたり、逆に見えなくなったりします。モードごとに最適化された色選びが必要です。

設計思想: 両モードで一貫した体験を

このブログでは、**「どちらのモードでも同じアイデア帳の温かみを感じられる」**ことを目指しました。

デザインの方針

  1. 色相（Hue）は維持、明度（Lightness）を調整
    付箋の「黄色」「青」などの色相は変えず、明度だけを調整する

  2. コントラスト比を確保
    WCAGのアクセシビリティ基準（最低AA、できればAAA）を満たす

  3. 装飾要素は共通
    マスキングテープや罫線などの装飾は、両モードで同じ位置・同じ形

  4. 自然な切り替え
    モード切り替え時に違和感なく移行できる

CSS変数による色管理

両モード対応の鍵は、**CSS変数（カスタムプロパティ）**の活用です。

基本的な実装パターン

:root {
  /* ライトモード */
  --paper-bg: #fefefe;
  --paper-shadow: rgba(0, 0, 0, 0.1);
  --line-color: rgba(0, 0, 0, 0.08);
  --sticky-yellow: #fef3c7;
  --sticky-blue: #dbeafe;
}


[data-theme="dark"] {
  /* ダークモード */
  --paper-bg: #1e1e1e;
  --paper-shadow: rgba(0, 0, 0, 0.3);
  --line-color: rgba(255, 255, 255, 0.05);
  --sticky-yellow: #4a3f28;
  --sticky-blue: #1e3a5f;
}

コンポーネント側では、モードを意識せずに変数を使うだけです：

.article-card {
  background-color: var(--sticky-yellow);
  box-shadow: 0 2px 8px var(--paper-shadow);
}


.note-lines {
  background: repeating-linear-gradient(
    transparent,
    transparent 31px,
    var(--line-color) 31px,
    var(--line-color) 32px
  );
}

デザイントークンの階層化

さらに、意味のある名前でトークンを階層化しています：

:root {
  /* 基本カラー */
  --color-yellow-light: #fef3c7;
  --color-yellow-dark: #4a3f28;


  /* 意味を持ったトークン */
  --sticky-yellow: var(--color-yellow-light);
  --accent-primary: var(--sticky-yellow);
}


[data-theme="dark"] {
  --sticky-yellow: var(--color-yellow-dark);
  /* accent-primaryは自動的に切り替わる */
}

これにより、「付箋の黄色」と「アクセントカラー」を同じ色にする、といった管理がしやすくなります。

色選びのポイント

ダークモードの色選びは、試行錯誤の連続でした。

付箋の色調整

ライトモード: 明るく鮮やかな色（彩度高め）
ダークモード: 暗く落ち着いた色（彩度低め）

例えば、黄色の付箋：

  • ライト: #fef3c7 (明度93%, 彩度79%)
  • ダーク: #4a3f28 (明度29%, 彩度30%)

POINT: HSL色空間で考える

RGBではなく、HSL（色相・彩度・明度）で色を考えると、ダークモード対応がしやすくなります。

  • H (Hue): 色相はできるだけ維持
  • S (Saturation): ダークモードでは彩度を下げる
  • L (Lightness): ダークモードでは明度を大幅に下げる

マスキングテープのコントラスト

マスキングテープは、付箋の上に重なる装飾です。

ライトモードでは「黄色の付箋に青のマステ」のようにコントラストを付けやすいですが、ダークモードでは両方とも暗くなるので工夫が必要でした。

解決策：

  • マステの色を付箋より少し明るく/暗くして差をつける
  • 透明度を調整して重なりを表現
  • 境界線を追加して視認性を確保

罫線の繊細さを保つ

ノート罫線は、ライトモードでは「薄いグレー」で十分ですが、ダークモードでは「薄い白」になります。

でも、薄すぎると見えないし、濃すぎると邪魔になります。

最終的には、rgba(255, 255, 255, 0.05) という非常に薄い白にしました。読むときは気にならないけど、よく見ると罫線がある、くらいの絶妙なバランスです。

アクセシビリティとの両立

デザインの美しさだけでなく、アクセシビリティも重要です。

コントラスト比の確保

WCAG 2.1の基準では：

  • AA: 通常テキスト4.5:1、大きなテキスト3:1
  • AAA: 通常テキスト7:1、大きなテキスト4.5:1

このブログでは、本文テキストはAA以上、見出しはAAAを目指しています。

ブラウザの開発者ツールや、WebAIM Contrast Checkerなどのツールで、定期的にチェックしています。

フォーカス状態の視認性

キーボード操作時のフォーカス状態も、両モードで見やすいようにしています：

a:focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: 2px;
  border-radius: 2px;
}

--focus-color も、モードに応じて切り替わります。

実装のコツ

最後に、実装上のコツをいくつか共有します。

1. CSS変数は :root と [data-theme] で管理

prefers-color-scheme を使う方法もありますが、このブログではユーザーが手動で切り替えられるように data-theme 属性を使っています。

2. 変数名は意味を持たせる

--color-1 ではなく、--sticky-yellow や --paper-bg のように、用途が分かる名前をつける。

3. グラデーションや影も変数化

色だけでなく、box-shadow や background-image の値も変数化すると、メンテナンスが楽になります。

:root {
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.1);
}


[data-theme="dark"] {
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.4);
}

4. トランジションで滑らかに

モード切り替え時に色が瞬間的に変わると不自然なので、トランジションを設定します：

* {
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}

ただし、transition: all は使わない方が安全です（パフォーマンスの問題）。

おわりに

ダークモード対応は、単に色を反転させるだけではありません。

それぞれのモードで最適な体験を提供しつつ、デザインの一貫性を保つ。それが、このブログのアイデア帳らしさを支えています。

技術的には少し複雑になりますが、CSS変数とデザイントークンをうまく使えば、メンテナンスしやすいコードになります。

皆さんも、ダークモード対応で困ったときは、ぜひCSS変数を活用してみてください 💡

それでは、また次の記事で 📝