SVGやJPG等の画像の最適化、JSON/JS/TS/CSSなどのフォーマット、カラーコード変換などフロントエンド開発をサポートするツールをページ移動せずに使えるWebアプリ・「Frontend Toolkit」
Frontend Toolkit Frontend ToolkitはSVGやJPG等の画像の最適化、JSON/JS/TS/CSSなどのフォーマット、カラーコード変換などフロントエンド開発をサポートするWebアプリのコレクションです。 ...
Resource - 最適化ツール
分散型のプライベートストレージを備えた、ブラウザで動作する画像圧縮ツール・「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ファイルで用意するみたいで...
任意の2つのWebサイトのパフォーマンスチェックと、その結果の比較が出来る・「dareboost」
dareboost dareboostは2つのWebサイトの表示速度等のパフォーマンスをチェックし、結果を比較、ダウンロード出来るWebサービスです。1つのWebサイトでも勿論可能ですが、比較出来るのは珍しいかも。提出してくれる結果内...
IE8でWebサイトを閲覧した際に問題の起こりそうな箇所を教えてくれるOSS・「IE8 Linter」
IE8 Linter IE8 Linterは任意のWebサイトをIE8で閲覧した際に問題の起こる可能性のある箇所を教えてくれるオープンソースのソフトウェアです。IE8のみというピンポイントなツールでは有りますが、日本におけるブラウザの...
ブラウザ上でSVGを軽量化出来るOSS・「SVGOMG」
SVGOMG SVGOMGはSVGを軽量化するNode.jsベースのツール、SVGO用のWeb GUIです。OSSとしてGithubにてソースコードが公開されています。ファイルを読み込むか、コードをペーストすれば軽量化してくれます。上...
任意のWebサイトのCSSを解析し、ステータスを表示してくれるオープンソースのソフトウェア・「CSS Stats」
CSS Stats CSS Statsは任意のWebサイトのCSSを解析してステータスを表示してくれるツールです。OSSとしてソースコードも公開されています。CSSのサイズや使用されているプロパティやセレクタの数、カラーコード、フォン...
Webサイトのパフォーマンス向上に役立ちそうなリソース集・「Performance tooling today」
Performance tooling today Performance tooling todayはWebサイトのパフォーマンスを向上させるためのリソース集です。リソースの追跡・共有が可能となっています。リソースは種類でソートする...