デザイナーチームマネージャーのひろです。
最近、息子のアンパンマンのハマり具合に困惑しています。
アンパンマンが、画面に現れるやいなや大興奮。
軽い近所迷惑状態です(@_@;)
クリスマスプレゼントは、間違いなくアンパンマングッズでしょうね（笑）
さて、今回は、LIGのデザイナーが、普段からWeb制作を行うにあたり、便利に活用しているWebサービスやWebサイトを紹介したいと思います。完全保存版です！Bookmark間違いなしです！！
デザインするときに役立つWEBサービス５選
960 Grid System
横幅960px用にグリッドが引かれたpsdを何パターンかDLできるWebサービス。
http://960.gs/
Gridulator
グリッドデザインには必須のグリッドラインを手軽に作れちゃうWebサービス。
PNGを書き出せるのでとても便利です！
http://gridulator.com/
HUE/360
調和の取れた色選びを簡単にしてくれるWebサービス。
http://hue360.herokuapp.com/
0to255
簡単にグラデーションを作成してくれるWebサービス。
http://0to255.com/
Color of Book
本から色を取ってきてくれるWebサービス。
http://colorchart.jp/
HTMLコーディングに欠かせないWEBサービス３選
Liveweave
HTML5、CSS3、JavaScriptがリアルタイム編集できる便利なオンラインWebサービス。
http://liveweave.com/
Mergely
WEB上でコードの差分を比較、マージできるWebサービス。
http://mergely.com/
Another HTML-lint gateway
最も厳しいバリデーター。点数をつけてくれるが、平気で-100点とか言ってくる。
※HTML5は非対応
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html
CSSコーディングを補助してくれるサービス３選＋サンプル集
CSS3 Transitions Collection 30
CSS3のアニメーション「transition」の動作を確認できるサンプル集。
http://kudakurage.com/ipad-html5/transitions/collection.html
CSS3.0 Maker
簡単にCSSのプロパティを設定でき、ジェネレートしてくれるWebサービス。
- Border Radius
- Gradient
- Transform
- Animation
- Transition
- RGBA
- Text Shadow
- Box Shadow
- Text Rotation
- Font Face
上記が設定できる。
http://css3maker.com/
Grad2 -CSS3 Easy Gradation Editor-
簡単にCSSのグラデーションをシュミレートして書き出してくれるWebサービス。
http://grad2.ecoloniq.jp/
http://grad3.ecoloniq.jp/
Spritebox
CSSスプライト画像を簡単に生成してくれるWebサービスです。
http://www.spritebox.net/
その他、Web制作で役立つサービス８選
JPEG Minimizer
JPG、PNG画像を圧縮できるWebサービス。圧縮率を細かく変更できます。
JPG
http://media4x.com/jpeg-minimizer/
PNG
http://media4x.com/png-minimizer/
TinyPNG
PNG画像を圧縮できるWebサービス。画像によっては、60～70も圧縮できます。
http://tinypng.org/
shortcutFoo
このWebサービスを使えば、様々なアプリケーションのショートカットを暗記できるWebサービス。Git、Sublime、Photoshop、Excel、コマンドラインなどのショートカットを覚えられます！
https://www.shortcutfoo.com/
.htaccess Editor
htaccessファイルを自動生成してくれる便利なWebサービス。
http://www.htaccesseditor.com/
パスワード生成
パスワード自動生成してくれるWebサービス。「強度」や「文字数」を設定でき複数作成できます！
http://www.luft.co.jp/cgi/randam.php
favicon.ico Generator
「favicon.ico」を自動生成してくれるWebサービス。
http://www.favicon.cc/
BigWebStats
URLを入力すると、総合的にそのサイトが何点なのかをチェック＆ダメ出ししてくれるWebサービス。SEOやロードタイム、ソーシャル連携などのチェックができます！
http://www.bigwebstats.com/
Website speed test
URLを入れると、サイトのローディング時間を計測し、他サイトと比較してくれるWebサービス
http://tools.pingdom.com/fpt/
おまけ
Skitch
デレクターさんにオススメするソフト。画面キャプチャをとって、そのまま赤入れができ、「EVERNOTE」と共有できとても便利です！！
http://evernote.com/intl/jp/skitch/
Kern Type, the kerning game
デザインには重要なカーニング。そのカーニングの腕を図れるカーニングゲーム。カーニングに自身のある方は、一度試してみると良いかもしれません。
http://type.method.ac/
Online Color Challenge
色を並び替えて、正しくグラデーションを作れるかテストするWebサービス。日々の作業で疲れた時の気分転換にどうぞ！
http://www.xrite.com/online-color-test-challenge
キャリアアップ
「Studio上野でWebクリエイターを目指す！」
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
