Dark Readerのインストールと使い方。(PC & スマホ)ダークモードで目を大切に。デザイナー、コーチ、ディレクター / いがわ

.

Memo

ダークモードの設定。パソコンとスマホのDark Reader。

ダークモードでパソコンやスマホを。Dark Readerのインストール手順。

Dark Readerのダークモードについて。
ダークモードで。

パソコンやスマホで長時間ブラウザを見ているときに、目の負担を軽減する「Dark Reader」を使ってダークモードにすると楽になる。

以前はダークモードがなかったので、個人的に、目を悪くした原因となってしまった。

光から目を守る。

日差しからサングラスで目を守るときのように、これからパソコン作業に関わっていく人は、目の保護に気をつけて欲しいと思う。

ブルーライトは目に悪いと知っていながら、若さの勢いで頑張ってしまうと、後でつけが回ってきてしまう。

Dark Readerのインストールと使い方。ダークモードで目を優しく。


Dark Readerのインストール方法。(Chromeの場合。)

Chrome ウェブストア。

「Dark Reader」は、例えばChromeなら、Chrome ウェブストアから追加ができる。

Chrome ウェブストアの画面左上の検索ボックスで検索できる。「dark reader」と小文字でもOK。

Chrome ウェブストアでの「Dark Reader」の検索結果の画面。

Chrome ウェブストア – Dark Reader:Dark Reader – Chrome ウェブストア

Chromeへ追加する。

「Dark Reader」を選択すると、右側に「Chromeに追加」のボタンが表示されるので、クリック。

Chrome ウェブストアのページ画面。

拡張機能の追加画面。

確認画面が表示されたら、「拡張機能を追加」をクリック。

Dark Readerの追加画面。

「拡張機能」から、「Dark Reader」を選択。

Chrome上部のバーに、パズルのピースのアイコンの「拡張機能」がある。そこから、追加した「Dark Reader」を選択する。

ピンのアイコンでバーに固定すると、その後のオン・オフの切り替えが楽になる。

Chomeの拡張機能の画面。Dark Readerの選択。

ピンで固定すると、バーにアイコンが表示される。

Chomeの拡張機能の画面。Dark Readerを固定に。

Dark Readerのインストールと使い方。ダークモードで目を優しく。


Dark Readerのインストール方法。(Firefoxの場合。)

Firefox Browser ADD-ONS。

Firefoxなら、Firefox (ja) 向けアドオン – ADD-ONS 拡張機能から追加ができる。

画面右上の検索ボックスで「dark reader」と入力すると、途中で候補が出てくる。

Dark ReaderをFirefoxへ追加する。

Firefox ADD-ONS 拡張機能 Dark Reader:Dark Reader – Firefox ADD-ONS

Firefoxへ追加する。

「Firefoxへ追加」のボタンが表示されるので、クリック。

Dark ReaderをFirefoxへ追加する。

拡張機能の追加画面。

確認画面が表示される。

Dark ReaderをFirefoxへ追加する。

特に問題がなければ、確認画面で「追加」をクリック。

Firefox版Dark Reader追加の確認画面。

上部バーにDark Readerのアイコンが追加される。

後はChromeとほぼ同じインターフェイスで、使い方もほとんど同じ。

Firefox版のDark Readerのインターフェイス。

Dark Readerの使い方はシンプル。

基本的にダークモードの「オン」 or 「オフ」がメインなので、使い方はすぐに慣れる。

Dark Readerのインストールと使い方。ダークモードで目を優しく。


Dark Readerのインストール方法。(Edgeの場合。)

Edge アドオン。

Microsoft Edgeの場合も、Edge アドオンから拡張機能として追加ができる。

Microsoft Edgeのアド オン追加ページの画面。


Dark Readerによるダークモードの使い方。

「Dark Reader」のオン・オフ。
ダークモードのオン・オフを選択。

インストール後は、「Dark Reader」のアイコンをクリックし、メニューからオン・オフを選択するだけ。

オンにしておけば、その後は全てのサイトで自動的にダークモードになる。

サイトごとの設定や、輝度やコントラストなどもお好みで調整できるが、必須というわけではない。

まれにログインができないサイトがあるが、そのときはオフにすると良い。

Dark Readerのメニュー。

Dark Readerの料金について。

ChromeとFirefox、Edgeの場合。

ChromeとFirefox、Edgeの「Dark Reader」は無料で利用可能。

2024年3月現在。)

Safariの場合。

Safariの場合は¥700での買い切り。

サブスクではないので請求は一度だけ。その買い切り額でMacとiPhone、iPadで共有できる。

2024年3月現在。)

Mac App Store: ‎「Dark Reader for Safari」をApp Storeで


Dark Readerのインストール方法。(Safariの場合。)

Mac App Store。

SafariやApp Storeで「dark reader」を検索。

Dark Reader for Safariのダウンロード画面。

確認画面が表示されたら、「App Store.app」をクリック。

Dark Reader for Safariのダウンロード。

App Storeへ支払いを済ませ、インストール。

iPhoneからインストール。
App Store。

iPhoneからでも同様。「dark reader」で検索して、App Storeからダウンロードできる。

App Store:Dark Reader for Safari

iPhoneからDark Reader(ダークリーダー)をインストール。
使い方はほとんど一緒。

使い方もほぼ同じで、検索バーの左側にあるパズルのアイコンからDark Readerを選択すると、オン・オフの切り替え画面を開くことができる。

切り替えや調整したいときだけ使えば良く、毎回開く必要はないのが便利。

iPhoneからDark Reader(ダークリーダー)をインストール。

Dark Readerのインストールページ。(Androidの場合。)

Androidの場合。

Androidの場合は、Firefoxで使用できる。

Firefox Browser ADD-ONS:Dark Reader – Get this Extension for 🦊 Firefox

AndroidのDark Readerのダウンロードページの画面。
AndroidのDark Readerのダウンロードページの画面。

参照: Dark Reader for iOS and Android is available – Dark Reader blog

英語。ブラウザの翻訳機能で日本語にできます。)

パソコンでもスマホでも、クオリティはかなり高い。

ダークモードで目を大切に。

以上、参考になれば幸いです。


Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。(元々はメモ書きでした。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真は主にUnsplashPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。

デザイナー、ディレクター、講師、コーチ / 井川宜久

免責事項について

  • 記事ページ(Memosのページ)は当初は文字通りメモ書きでした。その後、修正や更新をしております。
  • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ早急に対応いたします。
  • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。