WEB

LIGデザイナーオススメの便利なWEBサービス・ツール&サイトまとめ

LIGデザイナーオススメの便利なWEBサービス・ツール&サイトまとめ

デザイナーチームマネージャーのひろです。

最近、息子のアンパンマンのハマり具合に困惑しています。
アンパンマンが、画面に現れるやいなや大興奮。
軽い近所迷惑状態です(@_@;)
クリスマスプレゼントは、間違いなくアンパンマングッズでしょうね(笑)

さて、今回は、LIGのデザイナーが、普段からWeb制作を行うにあたり、便利に活用しているWebサービスやWebサイトを紹介したいと思います。完全保存版です!Bookmark間違いなしです!!

デザインするときに役立つWEBサービス5選

デザイン

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サービス3選

HTML

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コーディングを補助してくれるサービス3選+サンプル集

Style Sheet

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制作で役立つサービス8選

Others

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」と共有できとても便利です!!

Kern Type, the kerning game

デザインには重要なカーニング。そのカーニングの腕を図れるカーニングゲーム。カーニングに自身のある方は、一度試してみると良いかもしれません。

http://type.method.ac/

Online Color Challenge

色を並び替えて、正しくグラデーションを作れるかテストするWebサービス。日々の作業で疲れた時の気分転換にどうぞ!

http://www.xrite.com/online-color-test-challenge

この記事を書いた人

ヒロさん
ヒロさん アートディレクター 2013年入社
マネージャー/グロースハッカー/アートディレクター/デザイナーのヒロさんと申します。茨城県鹿嶋市に鎮座する日本三大神宮の一つである鹿島神宮の近くで育ちました。2児のパパであり、子育てとワイン、旅行を愛するアラフォーです。