Mima Design MemottoWEB DESIGNER · mima

ポートフォリオサイトにダークモードを追加した方法

ポートフォリオサイトは作品を見せる場所だからこそ、訪問者の環境や閲覧時間に合わせた表示を用意したいと考えました。そこで、既存のデザインを大きく崩さずに、ダークテーマへ切り替えられる機能を追加しました。

今回の目的は、単に背景色を黒くすることではありません。文字の読みやすさ、画像やボタンの見え方、スマートフォンでの操作性まで含めて、自然に使えるカラーモードを作ることを重視しました。

実装では、OSの表示設定を自動的に反映しつつ、ユーザーが任意でライトモードとダークモードを選べるようにしています。再訪問時にも設定が残るよう、ブラウザの保存機能も利用しました。

制作過程やデザインの考え方は、普段公開しているポートフォリオサイトの構成とも関係しています。作品を見る人に余計な負担をかけず、サイト全体の印象を保つことが今回のテーマでした。

ダークモードを導入した理由

長時間の閲覧では、白い背景に明るい文字が並ぶ画面より、暗めの配色のほうが目への刺激を抑えられる場合があります。特にスマートフォンを夜間に見る人にとって、表示テーマを選べることは小さくても便利な機能です。

また、ダークモードはサイトの雰囲気を変える効果もあります。作品画像やスクリーンショットの色が引き立ち、ポートフォリオ全体に落ち着いた印象を与えられます。ただし、黒と白だけで構成するとコントラストが強くなりすぎるため、濃いグレーや少し彩度を落とした色を組み合わせました。

CSSカスタムプロパティで色を管理する

最初に、背景色や文字色をCSSカスタムプロパティへまとめました。ライトテーマでは白に近い背景と濃い文字、ダークテーマでは濃いグレーの背景と明るすぎない文字を指定しています。

:root {
  --bg-color: #f7f7f5;
  --text-color: #222;
  --sub-color: #666;
  --border-color: #ddd;
}

[data-theme="dark"] {
  --bg-color: #171717;
  --text-color: #eee;
  --sub-color: #b5b5b5;
  --border-color: #444;
}

各コンポーネントで直接カラーコードを書くのではなく、変数を参照する形にしたことで、カードやナビゲーション、フッターの調整もスムーズになりました。テーマ追加後に色を変更したくなった場合も、修正箇所を追いやすくなります。

OS設定と手動切り替えを連動させる

初回訪問時は、prefers-color-schemeを使ってOSの表示設定を確認します。ユーザーが端末をダークモードにしていれば、サイトも自動的に暗いテーマで表示されます。

その後、切り替えボタンを押した場合は、その選択をlocalStorageへ保存します。次回アクセス時には保存値を優先し、明示的な選択がない場合だけOS設定を参照する仕組みにしました。

const savedTheme = localStorage.getItem('theme');
const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

const theme = savedTheme || (systemDark ? 'dark' : 'light');
document.documentElement.dataset.theme = theme;

ページの読み込み直後にテーマを適用しないと、一瞬だけライトモードが表示されることがあります。このちらつきを抑えるため、テーマ判定の処理をできるだけ早い段階で実行するようにしています。

見た目と操作性を確認する

色を置き換えるだけでは、完成したとはいえません。作品画像の周囲にある余白、リンクの下線、ホバー時の変化、フォームの入力欄なども、テーマごとに見え方を確認しました。

特に注意したのは、薄いグレーの文字です。ライトモードでは十分に読めても、ダークモードでは背景に埋もれることがあります。本文、補足情報、日付、外部リンクなど、情報の優先度に応じて明度を調整しました。

実装前に確認した項目

  • 配色をCSS変数にまとめる
  • 画像やロゴの見え方を確認する
  • ボタンとリンクの状態を整理する
  • 保存する設定値を決める

公開後に確認した項目

  • iPhoneとデスクトップで表示する
  • OS設定の自動反映を試す
  • 初回読み込み時のちらつきを見る
  • キーボード操作とコントラストを確認する

実装方法ごとの違い

サイトの規模や更新方法によって、適した実装は変わります。静的なポートフォリオなら、CSS変数と少量のJavaScriptだけでも十分に対応できます。複数ページで構成される場合は、共通レイアウトへ切り替え処理を組み込むと管理しやすくなります。

方法 特徴 向いているケース
OS設定のみ 実装が簡単で自然に反映できる 小規模なサイト
手動切り替えのみ ユーザーが表示を選べる テーマ性を重視するサイト
OS設定と手動切り替え 自動反映と自由な変更を両立できる ポートフォリオやブログ
CSS変数中心の管理 色の変更や保守が容易 複数コンポーネントがあるサイト

今回の構成では、OS設定を初期値にしながら、手動切り替えと保存機能を組み合わせました。機能そのものは小さくても、配色設計やアクセシビリティまで確認すると、サイト全体の完成度に影響します。

ダークモードは後から追加できる機能ですが、色を直接指定している箇所が多いほど修正量が増えます。今後サイトを制作するときは、最初からテーマ変更を意識してデザイン tokens を整理しておく予定です。表示テーマに対応したポートフォリオを実際に見てもらい、制作物や活動記録をより快適に閲覧できる形へ整えていきます。