kamenokoki.com

【238日目】Google Lighthouseに指摘された「テキストが読みにくい」に対応してみた

Posted:  Last Update:

Javascriptの勉強に飽きてしまったので、サイトのパワーアップに専念しています。現在はGoogle Lighthouseに指摘された問題点に対応中。

一大プロジェクトの間に寄り道

こんにちは「亀の子」です。自力でサイトを構築してブログを運営しています。「自力でブログ入力フォームを作ろう!」と今年に入ってから頑張ってた!

頑張ってたんだけど、Javaの勉強が読んでるだけで飽きちゃった!ちなみに、いま現在、ブログ入力フォームはここ(画像)までできています。

途中までできている入力頁

そんなわけでJavaの勉強をさぼっています。現在はサイトの改善に少しずつ取り組んでいまして、下のリストのようなことをやっています。

  • Google Lighthouseに指摘された事項を解決したい
  • 開発記事の「全記事」ページを作りたい
  • 開発記事のカテゴリー別へのリンクを人気順に並べたい

今日もGoogle Lighthouseの指摘事項を確認してみよう!

本日のLighthouse

作業に入る前にスクショ。今日の評価はこんな感じでした。やっぱりパフォーマンスが低いですね…。

本日のLighthouse

たださ、もうさ、「パフォーマンス」の部分、全部Googleの機能に対する指摘なんですよね。Google Lighthouseにダメと評価されるGoogleサービス。頑張れ…。

Accesibility - Low-contrast text

できるところから変更しましょう。

まずは「テキストと背景色が近くて読みにくい」と指摘されていた部分。デザイン上silverを使っているから読みにくいんだろうと思っていたら、全部grayの設定でした…。

ううん…。よし、思い切って黒くしてみましょう。

変更してみたら、もともと文字が小さいので違和感がありませんでした。よし、これでいこう。

ちなみにこちらが変更前と変更後のスクリーンショットです。

変更前

Low-contrast text 変更前

変更後。こだわるほどの違いがなかった!

Low-contrast text 変更後

今日はここまで

Performanceの部分を細かく見ていたせいであんまり進みませんでしたが、時間が来てしまったので今日はここまで!

明日もGoogle Lighthouseの指摘内容に対応していきたいと思います!

記事をシェアする

亀の子に連絡

ランキング参加中!ぽちっとしてね

F2cランキングアイコン 人気ブログランキング ブログランキング・にほんブログ村へ

広告