もい！ こんばんはデザイナーの宮下です。(：D)┓ﾍﾟｺ
今年のはじめに[ FLAT ] Designの小野さんのブログ記事で
ぼくのさいきょうツール を見てすごく参考になった覚えがあります。
小野さんほどではないですが、自分もWebデザイナーとして、普段使ってるWebツール、
主にオンラインツールを紹介したいなぁと思います！！
とはいえWebツールといっても、たくさんありますよね。
ジェネレータ、コンバータ、チェッカー、シミュレータ、アナライザー etc..
一気に紹介するのはしんどいので今回はざっくりジェネレータとコンバータ周りを
厳選して10個紹介したいと思います！
Flat Surface Shader
Frame
fontello
最近結構使うアイコンフォントジェネレータです！
iPhone6 Plusで@3xの画像が必要になってきたり、Retinaディスプレイを搭載したiMacが発表されたりと
高画質化の波がきてアイコンフォントやSVGが再注目されてますよね。
fontelloは自分でIllustrator等で作ったベクター画像をSVGで書き出してアップロードすることで
あらかじめ用意されているアイコン以外にオリジナルのフォントアイコンを作成することも可能です。
似たサービスには IcoMoonがあります。
Ceaser - CSS Easing Animation Tool
Ceaser(CSS Easer)はCSSのtransitionプロパティのアニメーションを簡単に作成できるジェネレータです。
自分でハンドルをいじって cubic-bezier(ベジェ関数)のアニメーションを作って動きを確認できます
Bounce.js
Bounce.jsは↑上の画像のようなバウンスアニメーションを作成できるジェネレータです。
あらかじめ用意されているいろんなアニメーションや、自分でアニメーションを設定して簡単にコードに落としこむことが出来ます！
lorempixel
ダミー画像を生成してくれるサービスです。
http://lorempixel.com/横幅サイズ/縦幅サイズ/ をimgタグのsrcで指定してやれば
こんな感じで任意のサイズの画像を指定できます。 かつこのサービスの特徴としてジャンル指定が出来ます！
ブラウザを更新してみるとわかりますが、上の画像はスポーツの画像がランダムで変わるようになってます。
動物やファッション系など指定したジャンルの画像を返してくれるので単色のダミー画像と違いサービスのイメージがつきやすくていいですね。
mapbuilder
gridulator
gridulatorはグリッドジェネレータです。
横幅とカラム数を指定すると、カラムと溝のサイズをいい感じに計算してくれて画像でダウンロードすることができます。
最近は、リキッドのデザインすること少なくなりましたがまだまだ現役です。
Compressor.io
基本的に画像圧縮はJPEG miniとPNG miniを使ってるんですが、Comporessor.ioは
JPEGとPNGに加え、SVGとGIFの圧縮にも対応しています。
ちゃちゃっとサイト上で画像を圧縮したい時にCompressor.ioを覚えておくと便利です。
Makeappicon
Makeappiconは1つの画像からiPhoneやAndroidアプリアイコン用の画像数十枚を一発で作ってくれるツールです。
Photoshop用のアクションなんかもありますが、iPhoneやAndroidをフォルダ分けしてくれたりと何かと便利なのですごく重宝してます。
おまけ
最後にこういう系のツールをどうやって探しているかというお話ですが、基本デザイン系のブログや 知り合いから教えてもらうことが多いです。あとは The Toolbox みたいなツールまとめサイトをたまに見て、知らないツールをいじいじしてみたりもします。
あと今回紹介したツールを含め、KipptにWebツールまとめておいたのでこのまとめで物足りないと感じた方はご覧ください！w
ではでは！！(：D)┓ﾍﾟｺ
