ダークモードの明るい未来:ウィキペディアの使いやすさを変える

Translate this post

ダークモードはウィキペディアの役に立つ(ようやく!)

ダークモードは、多くの人が待ち望んでいた機能の1つです。低コントラストの環境が使えたら眼精疲労を軽減できて、ウィキメディアのどのプロジェクトでも読者やコミュニティの使いやすさを改善できる。いよいよモバイル版でもデスクトップ版でも、閲覧モードと編集モードの両方で利用可能になりました

最も要望の多かった機能の1つとして、低コントラストの環境を提供するダークモードは目の疲れを軽減し、ウィキメディアのプロジェクト全体の読者もコミュニティも使いやすさが向上します。一部のウィキではモバイル版でもデスクトップ版でも、また閲覧と編集の両方のモードでこの機能を使えるようになりました。

ダークモードなんて簡単に作れそうに思うかもしれませんが、ウィキペディアその他のウィキメディアのプロジェクト(英語版)を待ち受けていたのは、意外に複雑でユニークな課題だったのです。ウィキメディア財団の技術チームはボランティアの技術編集者と緊密に協力して、この機能を実現しました。

ダークモードが重要な理由

ウィキペディアの読者やコミュニティはダークモードを待ち望んでいて、少なくとも2019年以来、編集者から最も要望の多かった機能の1つだったそうです。ウィキメディア財団のSNSメディアのアカウントには、この機能がどうしてないのかと、常に不満の声が寄せられてきました。さらに注視すると、私たちの分析では読者の2割はOSレベルで設定変更するほどダークモードを熱望しています。ダークモードをめぐる調査によって結果はまちまちですが、目が疲れにくいこと、目に何らかの症状を抱えた人の助けになると高く評価される場合が多いです。

では、この機能の導入をめぐる問題はというと、その理由よりも、常にどのようにすれば適するかがネックでした。ウィキメディア財団がまず克服するべき課題は、ソフトウェアとアーキテクチャの根本的な制限を乗り越えることであり、2022年版ベクター外装の構築で、ある程度まで実現できました。この経緯は以前のブログ投稿「Dark mode is coming」で、ダークモードの登場を詳しく説明してあります(訳注:2023年11月24日付)。ウェブチームはそれを受けて読者の使いやすさ向上プロジェクトに着手し、いよいよ例の課題に向き合いました。ダークモードの実現には、何をどうすればよい?

利用者作成のコンテンツをどうする

サイトとしてのウィキペディアのユニークさは、利用者が生成した膨大な量のコンテンツを基盤にして構築されている点にあります。そのコンテンツの多くは HTML マークアップで構築され、そこにはライトモードのみ使えるという前提があります。そこへダークモードを導入した場合のリスクとは、利用者が何年も注ぎ込んで丹念に作り上げたページがアクセス不能になるかもしれないこと。

配色には意味がある

ウィキペディアの記事では、配色に重要な役割を任せている場合があります。ダークモードらしく見せる一案として、ページ上のすべての色を暗く(濃く)するショートカットを検討したのですが、それだとうまく行かなそうな心配がありました。例えば(訳注:宇宙工学で使う特別な色)「International Orange」(インターナショナル・オレンジ)の記事を例にすると、以下に同じ記事を2種類の配色で置きますので、色見本の微妙な違いを見比べてください。

[キャプション]微妙な色の違いはリスクが高い。本物の「インターナショナル・オレンジ」を

正確に表すのはどの色見本か?

正しい色は上の1番目の例の方です。2番目の画像は「色を濃くするショートカット」を使ったために色相が歪んでしまって、視覚情報が正しくありません。ぱっと見には間違いに気づきにくい点が問題で、言われなければ、こういう問題を見落としてしまうリスクがあります。

上記の例では実害は少ないとしても、色に誤情報を与えると、記事によっては問題があるのは想像がつきます。

[キャプション]色相の歪みの例。上記の4つの例はそれぞれ英語版ウィキペディアの記事「毒性ラベル」と「化学物質の色」、「ハザードシンボル」と「黄色」のページを示しており、色が間違っていたら笑われるばかりか混乱を招くし、時には危険でさえある。誰かの部屋にガスが充満している状況を想定した場合。ウィキペディアの画像をサンプルにして、色からガスの毒性を確かめようとしたら? 不正確な色を示すとは、具体的にどんなことを意味するか、熟考を求められる。

色の問題は上でおおまかに説明しましたが、どんな修正方法を使えるか評価を始めた段階で、まずウェブ・コンテンツに関する色のコントラストのガイドラインを採用しました。単色や複数の色の組み合わせが原因で読みにくくなりそうなページはどれか、判断するためです。以前、ウィキペディアはライトモードだけを提供したために、多くの記事でコンテンツの使いやすさ(アクセシビリティ)に問題があるとわかりました。たとえばレクサム A.F.C. (英語版)の記事では、ユニフォームが赤であるという理由だけで、わざわざ表の見出しの背景色をアクセシビリティの低い赤色に指定していました(その後、修正済み)。

アクセシビリティを高めるには

[キャプション]このスクリーンショットは、レクサム A.F.C. の記事の修正前後を示す。ダークモードを使用しない場合(左)、採用後の記事(右=現状)。チームの赤いユニフォームに合わせて、表の見出しに赤色の背景を置いた。ダークモードの作業中、アクセシビリティの面でこのページが問題だとわかり、赤の色相を変更してブランドとの関連性を維持した。

色ごとに意味をもたせて、知識を伝える方法があります。たとえば色彩の役割を説明するのに — 上記のインターナショナル・オレンジなら色そのものが役に立ちます。そうは言っても、ほとんどの記事では色は意味よりも、書式の設定のために選んでいます。あるいはまた、色によって情報を誤解させるという望ましくない側面 — たとえば赤色は 警告や危険を連想させます。一般論ですが、色を使うときはよく考える必要があります。その対策をこのプロジェクトに組み込み、ユーザー生成コンテンツを見回るボランティア編集者がこの問題を簡単に識別して修正できるようにしたいと考えました。

ウィキペディアは誰でも編集できるため、皆の責任でアクセシビリティを高めたい。ダークモード機能を追加したことで、ウィキペディアのコンテンツを改善するチャンスができました。アクセシビリティと既存の問題をしっかり認識してもらいたいし、誰もが望んでいた機能を盛り込んで、それがきっかけになったら最高ではありませんか?

コンテンツをさらに改善するには

記事の改善に関して課題が待ち受けていましたが、近道をするよりも、コンテンツをもっと良くすることの方が重要でした。結局、ウィキペディアという百科事典は常にコツコツ改善を続ける共同作業で回っているのですから。

ここで言う作業を支えるため、問題箇所にフラグを立てるツールの作成と、コンテンツをもっと使いやすくしようとする編集者が動きやすいようにしました。既存の書式設定がライトモードを前提としている点に課題があるのだから、何か変更しても慎重にリリースすることにしました。

まずどの言語版のウィキペディアでも、ログイン利用者を対象にダークモードを展開しました。非ログイン利用者(つまり読者のほとんど)への対応は、技術系編集者がすぐに色の問題に対応できるウィキ、つまり問題が少ないウィキに限定しました。具体的には英語版日本語版簡体中国語版、フランス語版ドイツ語版ポーランド語版ポルトガル語版であり、加えて規模の小さめなウィキペディアも対象にしました。技術系編集者の皆さんとの協力をさらに進め、より多くの言語版でダークモードが利用できるようになるのを楽しみにしています。

もし皆さんがウィキペディアの編集ができて CSS やテンプレートの作成に協力いただける場合は、手を貸してください。日頃、活動されているウィキでは、デスクトップ版の既定の外装はまだ2022年版ベクターではないでしょうか? その状態ですべての利用者がダークモードを使えるようにしたいと思われたら、コミュニティや私たちにご連絡ください。ちなみにダークモードが有効な外装は現状、ミネルバ(Minerva=モバイル・モード)と 2022年版ベクター(Vector =デスクトップ・モード)だけです。

お疲れさまでした!

ここまでの道のりは、多くの有意義な会話を交した旅でした。まず最初に、既存の書式を更新してくれたボランティア編集者の皆さん全員に、心から感謝を申し上げたいと思います。次にウェブチームの Bernard、Edward、George、Jan、Jennifer、Justin、Kim、Mo、Olga、Nat、Steph、設計システム・チームの Anne、Barbara、Chris、Eric、Derek、Lauralyn、Roan、Volker に感謝します。どの人もこのプロジェクト全体を通して、私たちのニーズが急速に変化しても非常に忍耐強く対応してくれました。またMediaWiki エンジニアリング・チームには、このプロジェクトを私たちと一緒に立ち上げて軌道に乗せてくれたこと、中でも Moriel にも感謝しています。初期の作業から何年も経ちましたが、その段階でこの作業に何度も弾みをつけてくれた Volker と MusikAnimal もありがとう。私たちの製品大使として Bachounda、Isabel、Mehman、Phuong、運動広報支援の Szymon が重要な役割を果たしてくれたおかげで、私たちは編集コミュニティと手を結ぶことができました。私は当ウェブチームの技術リーダーなのですが、エンジニアリング部分の作業を統括しました。

これらの人々と、さらに私たちをこれまで支持してくれたウィキメディアのコミュニティにも、コードベースやコンテンツ拡張に協力してくれた同僚や友人にも、寄せてくれた重要な貢献には感謝しない時がありません。ウィキメディア・ハッカソン 2024 にも、大変おせわになりました(開催地エストニア)。できるだけ多くの人を称えたいと思ってリンク先のページを作成したのですが、誰かの名前を見落としていないようにと願うばかりで — 気づいたらぜひ、他の人にも謝意が届くように知らせてあげていただけないでしょうか。

ウィキペディアの読者の皆さんにとって、ダークモードで読む楽しさが増えるなら、何より幸いです。

Can you help us translate this article?

In order for this article to reach as many people as possible we would like your help. Can you translate this article to get the message out?