みやざダニエルズのIT備忘録

Lighthouseのユーザー補助を100点にしたい

By miyazaDaniels on Oct 25, 2022
Lighthouseのユーザー補助を100点にする

Lighthouseを使って自分のサイトの点数を見てみよう

Google Chromeの開発者ツールにあるLighthouseを使うと、ウェブページのパフォーマンス、アクセシビリティ(ユーザー補助)、SEO対策などウェブページの質を上げるための評価をしてくれます。

このサイトの場合、ユーザー補助はすぐに100点を目指せそうだったので改善してみました。

ユーザー補助の改善前

コントラストが低く、視認性が悪いようでした。色を変えればいいですね。 lighthouse-accessibility改善前

ユーザー補助の改善後

色を変えたら、コントラストが改善されて、ユーザー補助が100点になりました。100は気持ちがいいですね。よかった。 lighthouse-accessibility改善後

おわりに

他の項目は気が向いたら改善してみます。

Google Chromeの開発者ツールにLighthouseがあるので、気になるページの点数を見てみてはいかがでしょうか。

Recent Posts
日向美術館とVuetify

【Vuetify】v-cardの中にv-cardを入れたときに意図したmarginにならなかったのでdivでレイアウト調整した話

Nov 29, 2022
v-cardの中にv-cardを入れたらmarginがはみ出てる?暫定的にdivで調整しました..
日向美術館とmicroCMS

【microCMS】日向美術館で使用しているAPIスキーマ設定方法

Nov 27, 2022
日向美術館で作成したmicroCMSのAPIスキーマの設定方法と設定した内容をご紹介します。
microCMSとVue.jsで子供の作品を展示する

microCMSとVue.jsで子供の作品を展示する

Nov 25, 2022
子供の作品を箱にしまい込むだけにせずにウェブに載せてみました。Headless CMSであるmicroCMSを使ってみたら使いやすかったです。
Webで縦書きコンテンツ〜Safariには気を付けろ!〜に助けられた話

Webで縦書きコンテンツ〜Safariには気を付けろ!〜に助けられた話

Nov 5, 2022
縦書き文字をflexboxを使って並べたときのレイアウト崩れが直りました。
OpenBD coverage

OpenBDに登録されているISBNの数の調査をしてみた

Oct 31, 2022
本の情報をオープンにしてくれているOpenBDのAPIを使ってISBNの登録数を見てみました
Lighthouseのユーザー補助を100点にする

Lighthouseのユーザー補助を100点にしたい

Oct 25, 2022
Lighthouseのユーザー補助を100点にするためにコントラストの警告を解消しました
世界の片隅で愛を叫ぶLINE Bot

世界の片隅で愛を叫ぶLINE Bot

Oct 15, 2022
AWS Lambda、API Gatewayを使ってLINE Botで愛を伝えてみました
Google Apps Scriptで勤怠管理システム風なものを作る

Google Apps Scriptで勤怠管理システム風なものを作る

Oct 14, 2022
Google Apps Scriptで勤怠管理システム風なものを作ってみました。
AstroにGoogleアナリティクス4を導入する

Googleアナリティクス4の導入

Oct 13, 2022
AstroにGoogleアナリティクス4を入れてみました。
© Copyright 2022 by みやざダニエルズのIT備忘録. Built with ♥ by CreativeDesignsGuru.