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

キャリアアップ
「Studio上野でWebクリエイターを目指す!」

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

マネージャー/グロースハッカー/アートディレクター/デザイナーのヒロさんと申します。茨城県鹿嶋市に鎮座する日本三大神宮の一つである鹿島神宮の近くで育ちました。2児のパパであり、子育てとワイン、旅行を愛するアラフォーです。 【役職紹介 / Web受託制作マネージャー】 Web制作を行っている部署のマネージャーとして、チームリーダーの教育など、部署の目標や個人の成長にコミットし、日々奮闘しております。 Web制作だけではなく自社サービスを作ったり、オンラインだけではなく、オフラインの活動も多い部署なので、長野の地域創生プロジェクトで現地に行くことも多々あります。 今後もWebにとどまらず、「Life is Good」な取り組みを部署で行っていくそんなチームのマネージャーをやってます! 【普段やっていること】 3チームのマネジメント業、ディレクション、分析からグロースハック、アートディレクションやデザインなど、幅広く仕事をしています。

このメンバーの記事をもっと読む