Webデベロッパー、デザイナーのためのオンラインツールをまとめた記事。50のツールが、特にカテゴリ分けされずに紹介されてます。CSS関連のジェネレーターやJS、カラーピッカー、SVG関連ツール、ヴァリデーター、メディアクエリのジェネレーター、アイコン素材、CSSフレームワーク、UIやデザイン作例などのギャラリー、テクスチャ素材、グリッドビルダーなどがあります。様々なツールがごちゃっと紹介されてますが、結構有用なものが多い気がします。制作作業の効率化などに役立ちそうです。
レスポンシブレイアウトのサイトで指定したブレイクポイントの動作確認を、ピクセル単位で正確にテストできるサイト。まずはサイト上部にテストしたいサイトのURLを突っ込みます。ちなみにこれはローカルのサイトでもテストできるそうです。URLを突っ込むとサイトがロードされるので、あとはWidthとHeightに数値を入れる事で動作確認が行えます。「こまけぇこたぁいいんだよ！ ブラウザウィンドウドラッグすりゃいいじゃねぇか！」と言われると確かにそうなんですが、ピクセル単位でテストしたいという神経質な方や、ブレイクポイントが2つ以上あるサイトで厳密にテストしたい場合なんかにいいですね。ちなみにこのブログはレスポンシブレイアウトではありません。テーマはすでにできているんだけど、細かい事情でなかなか公開できなくて・・・。
HSL色空間によるカラー作成ツール。HSL色空間についてはこちらを参照。まぁアレですね、Photoshopで言う「色相・彩度」ツールで出てくるアレです。色相・彩度・輝度の3つのスライダーを使って色を作るやつです。1番目は色の種類、2番目は色の強さ、3番目は色の明るさを指定できます。加えて4番目はアルファ値（透明度）が指定できるので、半透明な色も作成可能。作った色は画面左にあるカラーパレットに反映され、作ったカラーを人に伝えたい場合はURLを教えるだけでOK。またページ下部には、作成した色のHEX指定、RGBA指定、HSLA指定の3種類の数値がリアルタイムに反映されます。サクっと色作って共有できる点がナイスです。
任意のカラーを入力し、できたカラーを他人とサクっと共有できるサイト。カラーはHEX指定（16進法）でもRGBA指定でも可。RGBAの場合はアルファ値についてもちゃんと反映してくれます。カラーは何個でも作る事ができ、他者と共有する際はページのURLを送るだけでOK。TwitterやFacebookなどへの投稿もできます。サイトやロゴデザインの際、色の組み合わせなどを相談する際に便利かも。ちなみにトップページ内でロゴをクリックすると、様々なWebサービスのカラーパレット例を見る事ができます。
CSS3で定義されたnth-child擬似クラスのテスター。これ系のテストツールは他にも以前紹介した:nth Testerとかがあるけど、こっちのツールの方が多機能な感じがします。nth-child(xx)のカッコ内の数値を変更できるのはもちろん、リスト内のアイテムの数やカラムの数についてもカスタムできます。例えばアイテム20個、カラム3つの時に一番左に来るアイテムだけにクラスを適用したい時など、目で見て判断する事ができます。コーディングのお供にとってもナイスなオンラインツール。
PSDファイルのバリデートをしてくれるオンラインツール。サイト内にPSDファイルを放り込むだけでチェックしてくれます。「PSDでバリデーションってなんじゃい？」と思ったんですが、まぁようするにレイヤー名とかレイヤーグループに名前付いてるかとか、グリッド引いてあるかとか、非表示になってるレイヤーに無駄にデカい画像が入ったままになってるか、ソレ系のツッコみをしてくれるツールです。1人でデザイン物作ってるならそのへん特に気にする必要もないかもしれないけど、チームで仕事してる場合にはそのへん丁寧に仕事した方が結局は効率イイですからね。便利なんだけどある程度大きいファイルサイズだとバリデートしてくれないようです。そこだけちょっと残念。
画像のURLを指定、もしくはアップロードする事で、対象の画像の様々な情報を教えてくれるオンラインツール。ためしにURL突っ込んでみました。出てくる情報は、JPGイメージであるなら何％の品質で保存されたか（圧縮率ではなく品質なので、数字が大きい方が綺麗）、サイズ、カラーモード、オリジナル画像の表示など。もし画像に残っていれば、詳細なEXIF情報も得られます（撮影したカメラの機種やセッティングなど）。だいたいがPhotoshopで得られる情報ではあるんだけど、手元にソレ系のツールがない場合などに使えそうです。
レスポンシブレイアウトでサイトを作った際に、各ブレイクポイントの指定結果を一括で確認できるオンラインツール。ブックマークレットとして配布されているので、ブラウザのブックマークに追加して使います。調べたいサイトを表示してブックマークを実行すると、対象サイトにいくつのブレイクポイントが指定されているか、それぞれWidth何ピクセルに指定されているか、各レイアウトでどのように表示されるのかを1ページで確認できます。いやこれ素晴らしいですね。いちいちブラウザウィンドウを縮めたり広げたりする必要がなくて確認の手間が省けそうです。早速Safariのブックマークに突っ込んでおきました。
