任意のWebサイトのスピードテストを行い、問題点をビジュアル等で細かく教えてくれる・「DebugBear Website Speed Test」
DebugBear Website Speed Test DebugBear Website Speed Testは任意のWebサイトのスピードテストを行い、問題点をビジュアル等で細かく教えてくれるテストツールです。正式にはFree ...
Resource - 最適化ツール
任意のWebサイトで画像が最適化されているかを調べるCloudflare製のチェックツール・「Image Optimization Test」
Image Optimization Test Image Optimization Testは任意のWebサイトで画像が最適化されているかを調べるチェックツールです。 CDNでお馴染みのCloudflare製となっており、チェ...
任意のWebサイトのCore Web Vitalsをチェックし、評価する超軽量なパフォーマンスチェックWebアプリ・「Core Web Vitals Checker」
Core Web Vitals Checker Core Web Vitals Checkerは任意のWebサイトのCore Web Vitalsをチェックし、評価する超軽量なパフォーマンスチェックWebアプリです。 PageS...
任意のWebサイトのCSSを解析して詳細なデータを提供してくれるWebアプリ・「ANALYZE CSS」
ANALYZE CSS ANALYZE CSSは任意のWebサイトのCSSを解析して詳細なデータを提供してくれるWebアプリです。URLだけでなく直接CSSのコードを入力する事も可能です。 提出される詳細データは非常に細かく、行...
Core Web Vitals改善の為のWebサイトパフォーマンス測定ツール・「SpeedVitals」
SpeedVitals SpeedVitalsはCore Web Vitals改善の為のWebサイトパフォーマンス測定ツールです。 GoogleのPageSpeed Insightsと同様にWebサイトのURLを入力すると、その...
SVGやJPG等の画像の最適化、JSON/JS/TS/CSSなどのフォーマット、カラーコード変換などフロントエンド開発をサポートするツールをページ移動せずに使えるWebアプリ・「Frontend Toolkit」
Frontend Toolkit Frontend ToolkitはSVGやJPG等の画像の最適化、JSON/JS/TS/CSSなどのフォーマット、カラーコード変換などフロントエンド開発をサポートするWebアプリのコレクションです。 ...
分散型のプライベートストレージを備えた、ブラウザで動作する画像圧縮ツール・「Compress.Studio」
Compress.Studio Compress.Studioはブラウザで動作する画像圧縮ツールです。jpg、jpeg、png等に対応しています Blockstackと連携させる事で圧縮した画像をプライベートなストレージに暗号化...
指定したWebページ内にあるリンクやボタン等のデフォルト時、ホバー時、フォーカス時のアクセシビリティチェックをしてくれる・「Button Contrast Checker」
Button Contrast Checker Button Contrast Checkerは任意のWebサイトのURLを指定すると、そのページ内にあるリンクやボタンなどのデフォルトの状態、マウスホバー時、フォーカス状態におけるカラ...
任意のロゴのデザインをチェックできる・「Logo Lab」
Logo Lab Logo Labは任意のロゴデザインをチェック、テストできるWebサービスです。ロゴファイルをアップロードすると、グリッドによるバランスのチェック、グレースケールや白黒にしても機能しているかどうかのチェック、視覚障害...
Webサイトのパフォーマンス向上に役立ちそうなツールや情報をまとめている・「Progressive Tooling」
Progressive Tooling Progressive ToolingはWebサイトのパフォーマンス向上に役立ちそうなツールやリソースを収集しているプロジェクトサイトです。アクセシビリティやスピード、ファイルサイズ最適化の為の...
Webサイトのアクセシビリティチェックに使えるカラーコントラストチェッカー・「Color Contrast Checker」
Color Contrast Checker Color Contrast Checkerは色のコントラストをチェックできるシンプルなツールです。Webアクセスビリティの教育や情報発信をするWebAIMより提供されているツールで、背景...
PNGファイルを軽量化する・「UPNG」
UPNG UPNGはPNGファイルを軽量化するためのツールです。アップロードすると即軽量化してくれる高速さが特徴で、軽量化後のクオリティも設定できます。画質のクオリティを下げれば（劣化させれば）より軽量化できます。プレビューも出してく...
HTMLやCSS、JavaScriptのコードを綺麗に整形してくれる・「DirtyMarkup」
DirtyMarkup DirtyMarkupはHTML/CSS/JavaScriptのコード整形ツールです。従来のフォーマッター同様にある程度の調整機能も付いています。また、本ツールはAPIも公開しており、今のところは無料で利用可能...
JSONデータのバリデーションやコンバート、整形等が出来る・「JSON Formatter」
JSON Formatter JSON FormatterはJSONコードのバリデーションや整形、圧縮、XMLやCSVのコンバート等が可能なWebツールです。シンプルで使いやすい印象でした。保存も出来るみたいですね。他にもこの手のツー...
WCAG 2.0やSection508を基準に任意のWebサイトのアクセシビリティチェックをしてくれる・「Tenon.io」
Tenon.io Tenon.ioはWCAG 2.0やsection508.gov(参照：リハビリテーション法第508条)で設定されたアクセシビリティのガイドライン基準に準じてチェックしてくれるシンプルなツールです。WebサイトのUR...
Webのフォームをチェック、評価してくれるフォーム最適化ツール・「FormLinter」
FormLinter FormLinterはWebフォームをチェック、評価してくれるフォーム最適化ツールです。URLを指定すると、そのページ内にあるフォームを調べて課題点や問題点があれば表示、AやA+、Bなどで評価してくれる、みたいな...
各画像フォーマットをjpegにコンバートすると同時に軽量化もしてくれる・「Jpeg.io」
Jpeg.io Jpeg.ioはgifやpng、svg、psdなどのフォーマットのファイルをアップロードするだけでjpegに変換し、ついでに画像の軽量化(最適化)も行うWebサービスです。軽量化の際の劣化は自分の見た限りでは確認出来ま...
色覚障害の方に対応したWeb制作の為のChromeエクステンション・「ChromeLens」
ChromeLens ChromeLensは色覚に異常のある方に対応出来るWebサイトの制作をサポートするChromeエクステンションです。拡張機能を追加すると、デベロッパツールにChromeLensという項目が追加されます。このタブ...
Webページのパフォーマンスチェックの結果をヒートマップで表示するブックマークレット・「Perfmap」
Perfmap PerfmapはWebページのパフォーマンスチェックの結果をヒートマップで表示してくれるブックマークレットです。リソースが表示されるタイミングをResource Timing APIでチェック、それぞれに表示されるまで...
Web制作者向けのツールを多数揃えている・「Dans Tools」
Dans Tools Dans ToolsはWeb制作者向けのオンラインツールを複数揃えて公開しているWebサイトです。JavaScriptやCSS、JSONの圧縮や整形、ファイルのコンバーター、diffツール、.htaccessのコ...
WebサイトがモバイルフレンドリーかどうかをテストするGoogle製チェックツール・「Google Mobile Friendly Test」
Google Mobile Friendly Test Google Mobile Friendly Testは任意のWebサイトがモバイルフレンドリーかどうかをテストするGoogle謹製のチェックツールです。URLを入力してヒューマ...
独自ルールにも対応したJavaScriptの構文チェックツール・「ESLint」
ESLint ESLintは独自ルールの設定も可能なJavaScript lintツールです。JSHintの機能に加え、独自ルールの設定、解析、構文チェックを行うことが出来ます。独自ルールはJSONかYAMLファイルで用意するみたいで...