ウェブデザイナーの為の便利なオンラインツール 7選

ウェブのデザインをしていると、何かをつくる度にこんなツールがあったらなぁ と思うことが度々あります。 WDLでそんなツールの特集をしていましたので紹介します。自分もためしてみて検証をしましたが、全て良いツールです。少し前にもあったようなツールが多かったのですが、かゆいところに手が届いてますね。

0 to 255

このツールは同じ色の濃淡を調べることができます。ボタンなどを作る時に、ホーバーした時の同じ色で少し明るい色を探したい時とかに便利です。CSS3のグラデーションでボタンを作るときに非常に便利でした。開始点と終了点の色を簡単に探すことができます。

Frame Box

自分のノートにスケッチをして、あとはワイヤーフレームをつくるだけってという人に向けたツール。このツールは自分のチームにメールでワイヤーフレームのURLを送ってシェアすることができます。あとで手直しすることもできます。

jsFiddle

JSが使える人向け。１つの画面の中で自分のjsが動いているかどうかの確認をできるツール。jQuery1.5にも既に対応をしている。このコード動くのかなーとか思う人は素早く確認できるこのツールはいい。エディタでタブを行ったり来たりする必要はない。

wordmark.it

自分のパソコンに入っているフォントでテキストの見栄えを一覧でチェックできます。たとえば、デザインエディタツールでバナー作成の際とか、CSSのウェブフォントを利用する際には非常に便利なツールです。いちいち、フォントの種類を変えてチェックする必要がなくなりますね。

ProCSSor

これはCSSをコンパクトにしたり成形したりすることが便利なツール。とりあえず、頑張ってガリガリ書いたらソースが汚れちゃった。っていう人はこれに CSSのソースを アップロードもしくは直接貼り付けてあとは好みにあわせて成形ができます。失敗しても大丈夫なようにバックアップも用意してくれます。

Spritebox

CSS スプライトを作成する際に便利なツールですね。実際に画像が方眼紙の背景画像の上にでてきます。また拡大もできますので微調整などもできます。

デザイナーにとって便利なオンラインツールだけを集めてみました。是非試してみてください仕事の効率があがりますよ。