読者です 読者をやめる 読者になる 読者になる

Webデザイナーなら知っておきたいおすすめWebツール10選

もい! こんばんはデザイナーの宮下です。(:D)┓ペコ
今年のはじめに[ FLAT ] Designの小野さんのブログ記事で
ぼくのさいきょうツール を見てすごく参考になった覚えがあります。

小野さんほどではないですが、自分もWebデザイナーとして、普段使ってるWebツール、
主にオンラインツールを紹介したいなぁと思います!!

とはいえWebツールといっても、たくさんありますよね。
ジェネレータ、コンバータ、チェッカー、シミュレータ、アナライザー etc..
一気に紹介するのはしんどいので今回はざっくりジェネレータとコンバータ周りを
厳選して10個紹介したいと思います!

Flat Surface Shader

http://matthew.wagerfield.com/flat-surface-shader/

フラットなポリゴン画像ジェネレータです。
色やデザイン、サイズ等細かく指定可能でpngsvgでエクスポートできます。

Frame

http://frame.lab25.co.uk/

↑こんな感じのいい感じの写真に任意の画像をはめ込み合成してくれるサービスです。
iPhoneMacなど、テンプレート画像にアプリのスクショなどを合成して使えます!

fontello

最近結構使うアイコンフォントジェネレータです!
iPhone6 Plusで@3xの画像が必要になってきたり、Retinaディスプレイを搭載したiMacが発表されたりと 高画質化の波がきてアイコンフォントやSVGが再注目されてますよね。
  
fontelloは自分でIllustrator等で作ったベクター画像をSVGで書き出してアップロードすることで あらかじめ用意されているアイコン以外にオリジナルのフォントアイコンを作成することも可能です。
似たサービスには IcoMoonがあります。

Ceaser - CSS Easing Animation Tool

http://matthewlein.com/ceaser/

Ceaser(CSS Easer)はCSSのtransitionプロパティのアニメーションを簡単に作成できるジェネレータです。
自分でハンドルをいじって cubic-bezier(ベジェ関数)のアニメーションを作って動きを確認できます

Bounce.js

Bounce.jsは↑上の画像のようなバウンスアニメーションを作成できるジェネレータです。
あらかじめ用意されているいろんなアニメーションや、自分でアニメーションを設定して簡単にコードに落としこむことが出来ます!

lorempixel

http://lorempixel.com/

ダミー画像を生成してくれるサービスです。
http://lorempixel.com/横幅サイズ/縦幅サイズ/ をimgタグのsrcで指定してやれば

こんな感じで任意のサイズの画像を指定できます。 かつこのサービスの特徴としてジャンル指定が出来ます!
ブラウザを更新してみるとわかりますが、上の画像はスポーツの画像がランダムで変わるようになってます。
動物やファッション系など指定したジャンルの画像を返してくれるので単色のダミー画像と違いサービスのイメージがつきやすくていいですね。

mapbuilder

「ぼくのさいきょうツール」でも紹介されていましたが、Google Mapの各種設定を簡単に出来るビルダーです!
サイトに埋め込むGoogle Mapのコードをさくっと作れます。

gridulator

http://gridulator.com/

gridulatorはグリッドジェネレータです。
 横幅とカラム数を指定すると、カラムと溝のサイズをいい感じに計算してくれて画像でダウンロードすることができます。
 最近は、リキッドのデザインすること少なくなりましたがまだまだ現役です。

Compressor.io

https://compressor.io/

基本的に画像圧縮はJPEG miniとPNG miniを使ってるんですが、Comporessor.ioは
JPEGPNGに加え、SVGとGIFの圧縮にも対応しています。
 ちゃちゃっとサイト上で画像を圧縮したい時にCompressor.ioを覚えておくと便利です。

Makeappicon

http://makeappicon.com/

Makeappiconは1つの画像からiPhoneAndroidアプリアイコン用の画像数十枚を一発で作ってくれるツールです。
Photoshop用のアクションなんかもありますが、iPhoneAndroidをフォルダ分けしてくれたりと何かと便利なのですごく重宝してます。

おまけ

最後にこういう系のツールをどうやって探しているかというお話ですが、基本デザイン系のブログや 知り合いから教えてもらうことが多いです。
あとは The Toolbox みたいなツールまとめサイトをたまに見て、知らないツールをいじいじしてみたりもします。
あと今回紹介したツールを含め、KipptにWebツールまとめておいたのでこのまとめで物足りないと感じた方はご覧ください!w
ではでは!!(:D)┓ペコ