Qiitaをユニバーサルデザイン化したいから簡単な拡張機能を作ろうとした時に得た知見

はじめに

Qiitaって色が一様で見にくいと思ったことはありませんか?
私は親の遺伝で遠視がきつく、背景色と似た色の文字を見ようとするとピントを合わせるのに目を酷使して疲れます。
これは自分に限った話ではなく、例えば色盲の方なら色の区別がつきにくかったりします。
そのため、Web開発をする際はユニバーサルデザインに気を付けようという心がけがあります。
しかし、Qiitaには色の変換ならまだしも、文字の大きさを変更することすら出来ません。
ここで、拡張機能を作った時に得た知見を記そうと思います。

あまりデザインセンスには自信が無いということをまず言っておきます..

作ろうとした際に思ったこと

リンクが見にくい

問題例

例えばこの最初のページ。普通に見る分には全然問題ありません。

しかしながら...

この二つのリンク。記事を見たリンクは灰色に、見ていないリンクは黒色で表示しています。
確かにデザイン的には合っているのかもしれませんが、遠目で見ると違いがわかりにくいです。

検索した場合のリンクは、青と紫という初期色になっています。

これはただただデザインを優先したのか、一貫性が無いのかわかりませんが分かりやすい色で統一するのがよさそうです。

解決例

例で、記事を見たリンクを深緑で表示してみます。

個人的にはこちらの方が数倍見やすいです。(個人差あり)
しかしながら違う色の方が見やすい場合があります。これは拡張機能で補うことは出来ますが、スマホ等では出来ません。
これはQiita側でテーマ的なものを開発してもらうのを待つしかありません。(緑主体なのはわかっていますが...)
せめて暗めのテーマが欲しいのは私だけでしょうか。

誰が書いたかわかりにくい

問題例

これも最初のページなのですが

拡大したらそうでもないかもしれませんが、byとユーザーネームが引っ付いて見えます。
また、一列全て色が同じです。

解決例

ユーザーネームの色を変え、Qiitaお気に入りのLGTMの色をテーマカラーにしました。こうすると何日前かがわかりにくいので何かしらイイ感じに色をつけていきたいですね。

簡単に拡張機能を作ってみた

サクッと上記の問題を解決するような拡張機能を作りました。chrome限定です。

本当にわずかですが、ここで色を変えることが出来ます。
GitHubにもあげておきますので誰か完成までもっていってほしいな。

作っていて思ったこと

chromeの拡張機能は少ししか触ったことが無いのですが、ページのcssを動的に変えようとすると凄く大変です。
ましてやQiitaではclass名で取得することが難しく、今後デザイン変更された時にclass名が変更されるとまた一から変えるはめになります。
それはとても大変なので、Qiita様が直々にユニバーサルデザイン化して頂く必要があります。
緑が基調なのはよーくわかっております。しかしながらユニバーサルデザイン化をして頂きたい所存でございます。

と、いったことが思ったことです。色変更だけでも大変なんじゃ...

まとめ

Qiitaを便利にするには機能追加もいいのですが、元を見やすくしてみるのもありだと思って考えました。
フロントエンドを主にしているので、ユニバーサルデザインは人よりかは重要視しています。(自分もその一部だからね)
万人に便利かと言われると微妙ですが、一部の人はすごく便利になると思うので是非とも公式で開発を進めてほしいです。