noteがダークモード対応！ 最適な図表は黒背景？ 白背景？【web ページ・デザイン】

はじめに

こんにちは、きまま / Easygoing です。

今回は、2026年8月13日に note の ブラウザ版が正式対応 した ダークモード について考えてみたいと思います。

ダークモードは目に優しい

まずは、note の実際のダークモードの表示を見てみましょう。

note のダークモード表示は、黒背景で光量が少なく、夜の屋内などでは 明るさを下げて表示 できるため目に優しくなっています。

ダークモードは 2016年 から普及した

ダークモードは、2016年頃 から普及が始まりました。

ダークモードは、それ以前から独自の機能として一部の webサイト や アプリに搭載されていましたが、2016年8月2日 に Windows 10 がダークテーマに正式採用 したことにより、本格的な普及が始まります。

そして、2019 〜 2020 年に主要なブラウザが prefers-color-scheme という プロパティに対応し、2020年3月3日 に W3C の web の標準を決める会議に盛り込まれた ことにより標準化されます。

note は、2022 年に iOS と Android のアプリ版 がダークモードに対応していましたが、今回 PC を含めた web 版が対応 したことにより、ほぼ全てのユーザー がダークモードを利用してページを閲覧できるようになりました。

note のダークモード表示のアルゴリズム

note のダークモードの表示のアルゴリズムは、次のようになっています。

1. note の設定（Cookie の note_theme_mode）

2. ユーザーの端末の設定（prefers-color-scheme）

3. デフォルトはライトモード

note は、右上のアカウントのアイコン → 設定 → 外観 の項目で、note のライトモード・ダークモード の表示を切り替えることができます。

もし 端末の設定を使う を選んだ場合は、ユーザーの端末の ブラウザ もしくは OS のダークモードの設定 を読み取って表示します。

上記のいずれも読み取れなかった場合は、フォールバックとして デフォルト の ライトモード がそのまま表示されるようになっています。

ダークモードは常に ON？

それでは、一体どれぐらいのユーザーが普段からダークモードを利用しているのでしょうか？

2026年3月〜6月 に実施された Android Authority の 3110 票の読者アンケート では、73.3 % のユーザーが 常にダークモードを ON にして利用していると回答しています。

• ダークモードを常に有効：73.31 %

• 必要に応じて切り替える：5.79 %

• 時間帯で自動で切り替える：15.24 %

• ダークモードを利用しない：5.66 %

また、2023年に行われた ComputerBase コミュニティアンケートでは、PC や モバイルの端末 を含めた 59.3 % のユーザーが 常にダークモードを ON にしていると回答しています。

こうした、テック系記事のアンケートに答えるユーザーは、一般のユーザーと比べてダークモードの利用率が高い可能性はありますが、それでも 既に半数以上のユーザーがダークモードを常用 している結果であり、その割合は今後も増えると予想されます。

図表はダークモードを優先する？

note の記事のダークモード対応は note が行ってくれるので、クリエイターは特に気にする必要はありません。

一方で、記事の中で 図や表 を使っている場合、ライトモード / ダークモード のどちらを優先するのか考える必要があります。

白背景のグラフ

黒背景のグラフ

図表の背景色は、ライトモードであれば 白背景、ダークモードでは 黒背景 が適しています。

筆者は、今までライトモードを優先して白背景のグラフを利用してきましたが、note にダークモードが標準搭載されたことにより、これからはダークモードを優先して 黒背景に切り替える ことにしました。

note は Markdown の表を表示できない

私たちは、note を書く時に Markdown 記法 で入力しています。

Markdown は主に技術者向けに簡略化した web の記法で、人間にとっても機械にとっても読みやすい のが特徴です。

note の Markdown 入力について

Markdown 記法 では、本来は簡単に表を作ることができるのですが、note ではこの Markdown の表の作成機能が 無効化 されています。

表は応用すると、ページのレイアウトにも使えるので、note は シンプルな表示 を維持するためにあえて無効化しているのかもしれません。

note は KaTeX 記法の表に対応している

note は、Markdown 形式の表は作成できませんが、KaTeX 記法 の表には対応しています。

KaTex 記法は、数式 を軽量・高速に書くために開発された ライブラリ で、note にもその機能が実装されています。

マサト さんの KaTeX 記法 の表の解説

白背景の表

黒背景の表

KaTeX 記法の表

$$
\newcommand{\arraystretch}{1.5}
\small
\begin{array}{|c|c|c|c|c|}
\hline
\text{モデル名} & \text{登場年月} & \text{開発元} & \text{開発国} & \text{オープンウェイト} \cr
\hline
\text{ChatGPT} & \text{2022年11月} & \text{OpenAI} & \text{米国} & \cr
\hline
\text{Claude} & \text{2022年12月} & \text{Anthropic} & \text{米国} & \cr
\hline
\text{GLM} & \text{2023年3月} & \text{Zhipu AI} & \text{中国} & ○ \cr
\hline
\text{Llama} & \text{2023年2月} & \text{Meta} & \text{米国} & ○ \cr
\hline
\text{Falcon} & \text{2023年5月} & \text{TII} & \text{UAE} & ○ \cr
\hline
\text{Qwen} & \text{2023年8月} & \text{Alibaba} & \text{中国} & ○ \cr
\hline
\text{Mistral} & \text{2023年9月} & \text{Mistral AI} & \text{フランス} & ○ \cr
\hline
\text{Kimi} & \text{2023年10月} & \text{Moonshot AI} & \text{中国} & ○ \cr
\hline
\text{DeepSeek} & \text{2023年10月} & \text{DeepSeek AI} & \text{中国} & ○ \cr
\hline
\text{Nemotron} & \text{2023年11月} & \text{NVIDIA} & \text{米国} & ○ \cr
\hline
\text{Grok} & \text{2023年11月} & \text{xAI} & \text{米国} & \cr
\hline
\text{Gemini} & \text{2023年12月} & \text{Google} & \text{米国} & \cr
\hline
\text{Phi} & \text{2023年12月} & \text{Microsoft} & \text{米国} & ○ \cr
\hline
\text{MiniMax} & \text{2024年1月} & \text{MiniMax} & \text{中国} & ○ \cr
\hline
\end{array}
$$

入力した KaTeX コード（このまま note の編集画面に貼り付け）

$$
\newcommand{\arraystretch}{1.5}
\small
\begin{array}{|c|c|c|c|c|}
\hline
\text{モデル名} & \text{登場年月} & \text{開発元} & \text{開発国} & \text{オープンウェイト} \cr
\hline
\text{ChatGPT} & \text{2022年11月} & \text{OpenAI} & \text{米国} & \cr
\hline
\text{Claude} & \text{2022年12月} & \text{Anthropic} & \text{米国} & \cr
\hline
\text{GLM} & \text{2023年3月} & \text{Zhipu AI} & \text{中国} & ○ \cr
\hline
\text{Llama} & \text{2023年2月} & \text{Meta} & \text{米国} & ○ \cr
\hline
\text{Falcon} & \text{2023年5月} & \text{TII} & \text{UAE} & ○ \cr
\hline
\text{Qwen} & \text{2023年8月} & \text{Alibaba} & \text{中国} & ○ \cr
\hline
\text{Mistral} & \text{2023年9月} & \text{Mistral AI} & \text{フランス} & ○ \cr
\hline
\text{Kimi} & \text{2023年10月} & \text{Moonshot AI} & \text{中国} & ○ \cr
\hline
\text{DeepSeek} & \text{2023年10月} & \text{DeepSeek AI} & \text{中国} & ○ \cr
\hline
\text{Nemotron} & \text{2023年11月} & \text{NVIDIA} & \text{米国} & ○ \cr
\hline
\text{Grok} & \text{2023年11月} & \text{xAI} & \text{米国} & \cr
\hline
\text{Gemini} & \text{2023年12月} & \text{Google} & \text{米国} & \cr
\hline
\text{Phi} & \text{2023年12月} & \text{Microsoft} & \text{米国} & ○ \cr
\hline
\text{MiniMax} & \text{2024年1月} & \text{MiniMax} & \text{中国} & ○ \cr
\hline
\end{array}
$$

KaTeX 形式の表は、機種によっては日本語が 明朝体 で表示されてしまうで、ゴシック体の本文との統一感が無くなってしまうのが難点ですが、ライトモード と ダークモード の切り替えには 自動で追従 します。

KaTeX 記法は、慣れるまでその作成は難しいですが、Excel や スプレッドシート で作った表を CSV もしくは Markdown 形式で出力して、ChatGPT や Gemini などの AI に渡すと簡単に KaTeX 記法に変換してくれるので、はじめは AI に変換してもらうと良いでしょう。

2026.8.28 追記

note の KaTeX の表示が不安定のため、表は従来通りスクリーンショットの画像を貼る方法に戻しました。

note の運営に、ダークモードでの表示率の公開を要望！

今回、note のヘルプセンターからのリクエスト で ライトモード／ダークモードの利用率の公開 を要望してみました。

note は サービス利用登録者数が 1200万人 を超える巨大なコンテンツ配信プラットフォーム であり、その情報公開は web の標準 を知る上で大きな意味を持っています。

note のヘルプセンターには、膨大な数のリクエストが届くと思うので、実際に要望が担当者まで届くかどうかわかりませんが、より良い note の執筆のために返事を期待して待ちたいと思います。

2026.8.25 追記

note 運営より返信が来ました。

というわけで、ライトモード/ダークモードの利用率は 非公開 とのことでした。

まとめ：note が ダークモード に対応！

• note が ダークモード に対応

• 半数以上が ダークモード 常時 ON で利用

• KaTeX 記法で表を作成する

今回は、note のダークモード対応について考えてみました。

筆者は ダークモード の表示が好きで、スマホ も PC も常にダークモードで利用しています。

ダークモードの利用率は既に 50% を超えている可能性もあり、これからは「ダークモードが標準」のコンテンツ作成を心がける必要があります。

筆者も、これを機会に「黒い note」に少しずつ慣れていきたいと思います。

最後までお読みいただきありがとうございます！

更新履歴

2026.8.25

• ダークモードの利用率についての note 運営 からの返信を追記しました

2026.8.28

• KaTeX 表記 の表について追記しました

English Article