表示確認

Webデザイン補助

AndroidやiPhone、iPad等でのデバイスで表示確認が出来る・「Sizzy」

ソフトウェア

動作軽量で使いやすいオープンソースなイメージビューア・「ImageGlass」

ジェネレーター

SSの画像をアップロードするとMac ChromeやWin Firefoxなど、ブラウザのフレームに合成してくれる・「Browser Frame」

Ads
Webデザイン補助

任意のWebページでグリッドと要素のアウトラインを表示するChromeエクステンション・「tachyons-x-ray」

ソフトウェア

色覚障害の方に対応したWeb制作の為のChromeエクステンション・「ChromeLens」

ソフトウェア

レスポンシブWebデザインにも対応できるオープンソースのプロトタイピングツール・「PrototypeBrewery.io」

最適化ツール

WebサイトがモバイルフレンドリーかどうかをテストするGoogle製チェックツール・「Google Mobile Friendly Test」

その他

GithubやBitBucketでホストされている任意のHTMLファイルをプレビューするブックマークレット・「HTMLPreview」

最適化ツール

任意の2つのWebサイトのパフォーマンスチェックと、その結果の比較が出来る・「dareboost」

その他

色覚異常の方向けに作られた、Webサイトにカラーフィルターを適応させて認識しやすくするChromeエクステンション・「Color Enhancer」

ジェネレーター

App Store用のスクリーンショットを作成出来る・「App Store Screenshot Builder」

ソフトウェア

文字色と背景色のコントラストが適切かどうかをチェックしてくれる・「colorable」

その他

ヤコブ・ニールセンの10のヒューリスティックに基いたユーザビリティチェックを行う為のChromeエクステンション・「UX CHECK」

その他

任意のWebサイトのスコアレポートを提出してくれる調査ツール・「Nibbler」

Webデザイン補助

書いたHTMLを任意のデバイスでリアルタイムプレビュー出来る・「snap tomato」

ソフトウェア

スクリーンショットやスクリーンキャストを撮り、自動でWebにアップロードするツール・「ShareX」

ソフトウェア

リアルタイムプレビューが可能なOSSのSass/CSSエディタ・「Takana」

Webデザイン補助

RWDにも対応の、Webサイトにコメントを入れて共有出来るWebサービス・「coment.me」

Webデザイン補助

紙に描いたモックアップを撮影して実機で動作テスト出来る・「POP」

ソフトウェア

IEの開発バージョンを公開している・「IE Developer Channel」

Webデザイン補助

RWD施行時に使える、デバイス毎のモニターサイズを視覚的に把握できるチートシート・「Responsive Web Design Cheat Sheet」

プログラミング補助

.NETのコードスニペットをオンラインで動作テストできる・「.NET Fiddle」