任意のサイトのURLを入力する事で、そのサイトで使われている背景やテキストの色、あと使われているフォント指定を一覧にしてくれるオンラインツール。フォントについては各種見出しごととBodyについてそれぞれ一覧にしてくれます。色についてはカラーパレットで見る事ができます。この手のサイト調査ツールはもっと多機能なものもあるけど、色とタイポグラフィーだけに絞っている点が特徴。シンプルな分使いやすいです。
RGBAでの色指定と、従来のHEX（16進法）による色指定との相互の変換ツール。上段のフォームがRGBAで、下段がHEX指定となっており、どちらかを変更すると他方にも反映されるというもの。RGBAの方がアルファチャンネルがあるので便利ですが、古いファッキンIEとかではこの指定法が使えないので、石器時代のブラウザをサポートする際の変換に使えます。まぁ個人的にはそんなレガシーなしょうもないゴミを使うようなユーザーなんて切り捨てればいいと思うのですが、仕事でサポートブラウザに入るというパターンもありますしねおすし。大人の事情によるアレがコレで色々ではありますな。
:nth-childの後に続く（）内で、どう指定するとどう見えるのかをリアルタイムにテストできるオンラインツール。:nth-child便利なんでよく使いますが、ちょっとめんどくさいルーチンになると（）内の数値書く際に「これでエェんかな？」とかなる事ありますね。そういう時にここでテストすると、ページ右側に実際にどう描画されるかがサクっと表示できるので便利です。ナイスですねこれ。
Webサイトのワイヤーフレームを描くのに便利な、ブラウザ上で動作するプロトタイピングツール。Webのレイアウトに特化したPowerpointみたいなオンラインツールです。フォームパーツやテキストやボタンなどのボックスパーツ類、テーブルやグリッドなど一通りのパーツ類が揃ってるので、左側のツールバーから右のキャンバスエリアにポイポイ放り込むだけで最低限のものは完成します。デザインツールが入っていないPCでこういうの組みたい時なんかに便利ですね。
任意の画像をドラッグ＆ドロップするだけで、用意されているモバイルデバイスのディスプレイにハメコミ合成してくれるサイト。実はこれ以前にも紹介してるんですが、対応デバイスが増えたのとドメインが変わってたので改めて紹介。以前はiOSデバイスがメインだったけど、Androidデバイスが一気に増えてました。とは言ってもこのサイトで生成できる画像は主にイメージ画像的なアレなので、Apple製に比べてデザインに劣るAndroidデバイスを使った画像にどれだけの価値があるのかは微妙かもしれません。あと少ないですがラップトップの素材も用意されています。画像ならスクリーンショット以外でも対応しているので、好きな画像を放り込んで合成できます。ちょっとした素材作りに便利ですね。
背景色（左側）と文字色（右側）を指定する事で、背景の上に文字が乗った時のコントラストを確認できるオンラインツール。まぁ簡単な仕組みなんだけど、16進法でもRGBAでもHSLAでも指定でき、かつ作った色の組み合わせがWCAG 2.0的にいいのか悪いのかまで判断してくれます。作ったカラーパレットはURLに反映されるので、人に伝えるのも楽です。ちなみにこのWCAGというの、ウェブコンテンツ・アクセシビリティ・ガイドラインと言うらしいんですが、正直こういうのを気にしすぎるのもなんだかなーと思います。いやまぁ大事なんだろうけど、行政系とかこういうの好きそうだなー・・・とか思ったり。
ブラウザ上で動作する3D CSSエディター。3D CGのモデリングツールではあるんだけど、以前紹介したTinkercadとは違い出力先がCSSという点が個性的なエディター。動作するのはSafariとChromeだけなので、Webkit系のブラウザを対象としたツールという位置づけ。この2つカバーできるならほとんどのスマホに対応できますね。サイト内にはサンプルが用意されているので、まずはそれらを開くのがオススメ。出力先がCSSであるため、簡単な面と線で構成されたシンプルな3D CGモデルです。もちろんいちから作る事もでき、作ったものはHTML + CSSのソースコード一式としてリアルタイムに出力されます。またiframeを使ったembedもできるみたい。特別なプラグイン類が必要ない点もナイスです。その筋の人から見ればツールとしては低機能すぎるのかもしれませんが、ブラウザ内でこんな事までできるんだなーとしみじみと感心しました。
ズラっと並んでるスマートフォンやタブレットの中からどれかひとつを選んで、そのディスプレイ部分に任意の画像を表示させたモックアップ画像を作る事のできるサイト。各デバイスは当然ディスプレイ解像度が異なるので、あらかじめそれぞれに合ったサイズで画面用の画像を作っておく必要があります。ちなみにiPhone 5は640px * 1136px、iPhone 4 and 4Sは 640px * 960pxです。Androidは色々あり過ぎて分かりません。デバイスを選ぶとディスプレイ解像度が表示されるので、あとは「Drop files here」の部分に画面用の画像を放り込むだけでOK。生成した画像はPNGで保存する事ができ、またこんな感じで固有リンクを使った共有もできます。UIデザインする際に他のメンバーや顧客とデザイン共有する際に便利そうです。
