ブラウザでTailwindのカスタマイズテストが出来る・「Tailwind Play」
Tailwind Play Tailwind PlayはブラウザでTailwindのカスタマイズテストが出来るWebアプリです。公式サイトが公開してるみたいです。 CSSとHTMLの編集は勿論、エリアの分割や異なるモニタサイズで...
Resource - 表示確認
アクセシビリティに関するツールやリソースなどをカテゴリに分けて大量にまとめている・「a11yresources」
a11yresources a11yresourcesはアクセシビリティに関するツールやリソースなどをカテゴリに分けて大量にまとめているキュレーションサイトです。 書籍やブログ、記事などの情報やブラウザ拡張、ブックマークレットな...
レスポンシブWebデザイン表示一括確認Chromeエクステンション・「ResponsiveViewer」
ResponsiveViewer ResponsiveViewerはレスポンシブWebデザインの表示をさまざまなサイズで一括確認出来るChrome拡張です 各デバイスはモニタサイズとUAが設定されており、任意のモニタサイズおよび...
任意のWebページの表示や内容を1つのファイルで魚拓ライクに保存するOSSのブラウザ拡張・「SingleFileZ」
SingleFileZ SingleFileZは任意のWebページの表示やコンテンツを1つのファイルだけで保存する魚拓ライクなChromeエクステンションです。当ブログでもテストしましたが日本語でも問題なく、完璧に保存できました。 ...
Can I Use?のようにHTMLメールのタグ対応状況を各メールサービスで調査できる・「Can I email…」
Can I email… Can I email…は、Can I Useライクな使い方が出来るHTMLメールタグ対応状況調査ツールです。 HTMLメールで使えるタグは各メールサービスによって制限があったりなかったりして一貫性が無...
指定したWebページ内にあるリンクやボタン等のデフォルト時、ホバー時、フォーカス時のアクセシビリティチェックをしてくれる・「Button Contrast Checker」
Button Contrast Checker Button Contrast Checkerは任意のWebサイトのURLを指定すると、そのページ内にあるリンクやボタンなどのデフォルトの状態、マウスホバー時、フォーカス状態におけるカラ...
URLを指定すると自動でアクセシビリティチェックを行い、レポートを生成するオープンソースのデスクトップアプリ・「Koa11y」
Koa11y Koa11yはURLを指定すると、そのWebページのアクセシビリティチェックを行い、HTMLやCSV、MarkdownやJSON、XMLなどの形式でレポートを吐き出すオープンソースのデスクトップアプリです。基本的にはチェ...
フリーのプログラミング用フォントを直接試せる・「Programming Fonts」
Programming Fonts Programming Fontsはフリーのプログラミング用フォントをその場で直接テストできるWebアプリです。右ペインでフォントを選択、左ペインに直接コードを書いて試せる、というもの。テーマの選択...
任意のWebサイトのシンプルなスクリーンショットをフレーム付きで撮れる・「Screen Guru」
Screen Guru Screen Guruは任意のWebサイトのSSを撮影できるツールです。SSはブラウザ枠への合成もへこうして行われ、背景の有無の設定やブックマークレットの利用も可能です。よく見かけるブラウザ拡張機能のように性能...
直感的に使える高性能で無料なオンラインプロトタイピングツール・「Draftium」
Draftium Draftiumは直感的でわかりやすいプロトタイピングツールです。ブロックの追加等を行い、ブロックごとにテキストや画像等を編集するタイプ。編集ツールも非常に分かりやすく、アニメーションエフェクトなども設定可能です。ま...
任意のロゴのデザインをチェックできる・「Logo Lab」
Logo Lab Logo Labは任意のロゴデザインをチェック、テストできるWebサービスです。ロゴファイルをアップロードすると、グリッドによるバランスのチェック、グレースケールや白黒にしても機能しているかどうかのチェック、視覚障害...
様々なアプリのUIデザインのパターンを学習したり共有する・「UIPattern Hub」
UIPattern Hub UIPattern HubはWebアプリやスマフォアプリ等のUIデザインのパターンを学習、共有したり作成する為のプラットフォームです。各ページでは実際のスクリーンショットとプロトタイプライクな画像が並べられ...
Webサイトのアクセシビリティチェックに使えるカラーコントラストチェッカー・「Color Contrast Checker」
Color Contrast Checker Color Contrast Checkerは色のコントラストをチェックできるシンプルなツールです。Webアクセスビリティの教育や情報発信をするWebAIMより提供されているツールで、背景...
URL入力だけでスマフォやタブレットで閲覧した際のスクショをまとめて撮れる・「Responsive Screenshots」
Responsive Screenshots Responsive ScreenshotsはURLを入力するとそのアドレスをスマフォやタブレット、ノートやデスクトップPCで閲覧した際のスクリーンショットをまとめて撮ってくれるWebサー...
Webサイトのローンチ前に確認する項目をまとめたチェックリスト・「Web Launch Checklist」
Web Launch Checklist Web Launch ChecklistはWebサイトのローンチ前に確認する項目をまとめたチェックリストです。セキュリティやパフォーマンス、SEOやアクセスビリティなどなど、基本的な事ですが、...
AndroidやiPhone、iPad等でのデバイスで表示確認が出来る・「Sizzy」
Sizzy Sizzyはモバイルやタブレットでの表示確認が出来るWebサービスです。よくあるRWDに対応してるかどうか、みたいな幅を狭くするだけのものではなく、それぞれのUAでアクセス、狭い幅で表示してくれます。 縦横での確認も...
動作軽量で使いやすいオープンソースなイメージビューア・「ImageGlass」
ImageGlass ImageGlassは動作軽量で使いやすいイメージビューアです。OSSとしてもソースコードが公開されています。対応フォーマットはJPG、JPEG,やPNG, GIF, ICO, BMPなどやWMF、PSD、HDR...
SSの画像をアップロードするとMac ChromeやWin Firefoxなど、ブラウザのフレームに合成してくれる・「Browser Frame」
Browser Frame Browser Frameはスクリーンショットとして撮った画像をアップロードすると、ブラウザのフレームのイラストに合成してダウンロード出来るWebサービスです。ブラウザはMacのChromeやFirefox...
任意のWebページでグリッドと要素のアウトラインを表示するChromeエクステンション・「tachyons-x-ray」
tachyons-x-ray tachyons-x-rayは任意のWebページでグリッドと要素のアウトラインを表示するChromeエクステンションです。上図のように、Webページで起動させれば方眼紙のようなグリッドと要素のアウトライン...
色覚障害の方に対応したWeb制作の為のChromeエクステンション・「ChromeLens」
ChromeLens ChromeLensは色覚に異常のある方に対応出来るWebサイトの制作をサポートするChromeエクステンションです。拡張機能を追加すると、デベロッパツールにChromeLensという項目が追加されます。このタブ...
レスポンシブWebデザインにも対応できるオープンソースのプロトタイピングツール・「PrototypeBrewery.io」
PrototypeBrewery.io PrototypeBrewery.ioはRWD対応のプロトタイピングツールです。直感的に操作可能なインターフェースで独自のCSS、JavaScriptを書くことも出来ます。ビューモードでは各デバ...
WebサイトがモバイルフレンドリーかどうかをテストするGoogle製チェックツール・「Google Mobile Friendly Test」
Google Mobile Friendly Test Google Mobile Friendly Testは任意のWebサイトがモバイルフレンドリーかどうかをテストするGoogle謹製のチェックツールです。URLを入力してヒューマ...