見出し画像

noteのiOSアプリが「ダークモード」に対応!暗いところでも画面が見やすく、目の負担も少なく

iOSアプリの最新バージョン(6.0.0)で、画面の配色を黒基調に変更する「ダークモード」に対応しました!周囲が暗くても画面がまぶしくならず、記事の読み書きに集中しやすくなります。

左:ホーム画面 / 中:記事画面 / 右:エディタ

今回のアップデートで、エディタやホーム画面、記事画面など、さまざまな画面がダークモードで表示されます。

「画面がまぶしくて目が疲れてしまう」「寝る前に記事をよく読む」など、数多くのnoteフィードバックを受け、今回のカイゼンを行いました。ぜひ、アップデートして体感してみてください!


ダークモードに設定する方法

設定方法は、Appleの「設定」アプリから「画面表示と明るさ」をタップし、「ダーク」を選択するだけ。端末の外観モードを変更すると、アプリ側も自動的にダークモードで表示されます。

詳しくは、以下のAppleサポートページをご覧ください。

※ アプリ側でダークモードに切り替えられる項目はありません


ダークモード対応にあたって

Appleでダークモードが搭載されたiOS13以降、ダークモード対応アプリがふえており、noteフィードバックでも50件以上、Twitterでも100件以上要望が寄せられていました。

体質的に、白い画面を長時間見ることができず、ダークモード対応を熱望します。今まで、作文を別アプリで実施していましたが、段々、専用エディタを使わなければいけない場面が増えてきて、難儀し始めてきています。

近年、ダークモード化が増え、様々なアプリをダークモードで使用しているのですが、その後ノーマルなライトモードなものを起動したり、行き来をすると目の負担が大きく困っております。とくにnoteは夜にのんびり読むことが多いので、ダークモードができたらよいなと思っております。

リリースまで時間がかかってしまいましたが、やっと実現できました。ご意見を寄せてくださったみなさん、本当にありがとうございました!


なお、ダークモード対応は、実は、2019年から開発を検討していました。

noteは、リリース当初から紙・ノートを連想させる “白” の印象が強いサービスです。ダークモードに対応し、切り替えられるようになった場合、この雰囲気が大きく変わってしまうことになります。

また、デザインとしても、白を黒に変えるだけでなく、noteカラーである緑色(#41C9B4)や、スキボタンの赤色(#EA3F60)をダークモードでどう表現するかなど、見やすさ・読みやすさのために、検討するべきところが多くありました。

今回、iOSアプリのダークモード機能の実装を担当した植岡さんと、デザインを担当した沢登さんに聞きました。

植岡 :
ここ1年、ダークモードに関する要望がかなり来ていたことから、本腰を入れて開発をはじめました。これまでのnoteカラーを整理するところからはじめ、一色ずつダークモード対応を進めました。その後、アプリ内で使っているイラストやnoteロゴなどの個別対応や、ダークモード対応させない画面の除外など、リリースまでに細かい調整を重ねています。ダークモードは、年明け一発目 & アプリのメジャーアップデート(6.0.0)のタイミングとしてぴったりな機能かなと思います。ぜひ触ってみてください!

沢登:
要望をあげてくださったクリエイターのみなさまありがとうございました。多くのご要望を受けて、施策優先度をあげることができ、無事リリースまで漕ぎ着けました。noteのアプリでは一部ウェブの表示を組み込む形を取っているため、ウェブのエンジニアにも協力いただき仕組みを準備することができました。とはいえまずはクイックにリリースした状態なので、皆さんのフィードバックをもとにさらに使いやすくしていくので、ドシドシご意見お送り頂ければと思います。


Webブラウザ版、Androidアプリのダークモード対応は未定です

現在は、iOSアプリ(バージョン6.0.0以降)のみ、ダークモードに対応しています。

検討は続けますが、今のところは、Webブラウザ版(PC / スマホ)、Androidアプリでのダークモード対応は未定です。


私たちは、クリエイターのみなさんのご意見・ご要望を受けてカイゼン事項を検討しています。引き続き、創作活動が続けやすい環境づくりを進めていきます。ぜひご意見をお聞かせください。

機能に関するカイゼン・ご要望は noteフィードバック から。
その他のお問い合わせは リクエスト送信フォーム からお願いします。

なお、これまでのカイゼン一覧は、こちらの記事でまとめています。

みんなにも読んでほしいですか?

オススメした記事はフォロワーのタイムラインに表示されます!