覚えておくとちょっと便利なオンラインサービスたち

できることなら、なるべく手間をかけずに少しでもよいものを作りたい・・・。仕事でWeb制作をしていれば特に、質は言うまでもなく作業効率を高めることも大事になってきます。

今回のエントリーはWeb制作に携わる人の日々の仕事をちょっぴり楽にし、アウトプットをちょっぴりよいものにしてくれる便利なオンラインサービスたちをまとめてみます。
比較的有名なものが多いですが、もしも知らないものがあったらチェックしてみてください。

画像・JavaScript圧縮

ページの読み込みを少しでも早くしたいなら、ファイルサイズを小さくするに越したことはありません。画像やJavaScriptは本番アップ前に圧縮して軽くしてしまいましょう。

smush.it!

画像のファイルサイズを圧縮してくれるサイトです。Firefoxのアドオンを使えば、表示しているサイトの画像をまとめて圧縮してくれます。フォルダごと画像をアップロードして圧縮できる機能があれば最高なのに。

Online YUI Compressor

YUI Compressorをオンラインで実行できるサイト。YUI Compressorは本来コマンドラインツールなので、コマンドラインの苦手なデザイナーにとってはすごくうれしいサイト。 YUI Compressor Online という同様のサイトもあります。

CSSを圧縮するツールなんてのもありますが、CSSは画像やJavaScriptに比べると後から弄ることも多いので、僕は圧縮ツールは使っていません。CSSハックの記述部分がきちんと圧縮されるかどうかも心配だし。
JavaScriptとCSSを圧縮・軽量化するオンラインツール集 | コリス にはJavaScript圧縮ツールのほかにCSS圧縮ツールもたくさんまとめられていますので、CSS圧縮ツールに興味がある人はチェックしてみるとよいでしょう。

HTML・CSS Validator

HTMLやCSSが文法的に完璧である必要はないと思うけれど、IMGにalt属性を付け忘れるなどのケアレスミスはValidatorでチェックすることでより確実に減らすことができます。
また、新米デザイナー／マークアップエンジニアはValidatorを利用することで、HTML・CSSについてより理解を深めることができると思います。

Another HTML-lint gateway

HTMLのValidationサービス。事細かに文法間違いをチェックしてくれて、かつ日本語なのがうれしいです。

The W3C Markup Validation Service

言わずと知れたW3CのHTML Validationサービス。ケアレスミスのチェック用に。

The W3C CSS Validation Service

こちらも言わずと知れたW3CのCSS Validationサービス。OperaやSafari向けにCSSハックを使うとCSS 2.1ではValidにできません。あくまでもケアレスミスのチェック用。

スクリーンショット

マイナーなブラウザ（OS）での表示確認を行いたいときに。海外のサービスだと日本語がちょっと苦手だったりするけど、軽い確認用にはなると思います。

BrowserShots

Macはもちろん、LinuxやBSDのブラウザまで網羅したスクリーンショットサービスです。

BrowsrCamp

無料版はMac Safariのみだけど、Macを持っていない人には便利かも。でも、WindowsにもSafariが出た今となってはそれほど貴重なサービスではないですね。

単位換算

文字サイズやマージンをemで記述する際、pxからemへ単位を換算してくれるサイトを利用すると便利。

EM Calculator

pxをemに変換してくれるサイトです。これは便利。

PXtoEM.com

こちらもpxをemに変換してくれるサイト。

配色ツール

デザイン制作時、配色に困ったときに配色ツールを使うと参考になるかもしれません。思いもよらない配色を提示してくれるかも？

ColorBlender.com

キーカラーを一色決めると、他に5色のサブカラーを提示してくれます。

kuler

Adobeによるカラーテーマの共有・作成サイトです。アップロードした写真から配色を作成してくれる機能もあります。

ストックフォト

あんまりお金がなくても（無料でも）使える定番のストックフォトサービスを2つご紹介。

iStockphoto

定番中の定番。有料ですが、かなり安く質の高い画像を買うことができます。

StockXchng

無料の画像素材提供サービス。質はあまりよくないけど、ちょっとした素材としては充分。

ロゴ素材

企業ロゴが支給されないなんて本来ありえないんだけれども、デザインカンプ制作時などに役に立つかも。あとはCDとかDVDとかの規格ロゴなんかが手に入らないときに。

Vector Logo Database

企業や団体のロゴデータをベクター形式でダウンロードできるサイトです。

ロゴタンク

こちらも企業や団体のロゴデータをベクター形式でダウンロードできるサイト。日本語。

アイコン検索

Webデザインに彩りを添えてくれるアイコン。最近はハイクオリティなフリー素材が多くて嬉しい限り。ただし、使用時にはライセンスを要チェックです。

Iconfinder

フリーのアイコン画像を検索してくれるサイト。検索結果のサムネイルが大きくて見やすい。

iconleft.com

こちらは大量のアイコン画像を検索してくれます。ライセンスもひと目でチェックできます。

メニュージェネレーター

グローバルナビゲーションメニューをオンラインで作ってくれるジェネレーターです。便利そうに見えて、あんまり実用性はないかも。

CSS Menu Builder

ナビゲーションメニューの他にパン屑リストのデザインも作ってくれるサイトです。

IzzyMenu

いろんなメニューデザインが用意されていて、かなり細かくデザインを作り込めるサイトです。

画像ジェネレーター

Webページのアクセントになる画像を作成してくれるジェネレーターたちです。自分で画像の作れないディレクターやプログラマにとっては重宝するサイトかもしれません。

Ajaxload

ロード中を表すグルグルまわるアイコン（GIFアニメ）を作成してくれるサイトです。サイズやデザインなど、選択肢が豊富にあります。

Background Image Maker

ストライプやドット、グラデーションなど、シンプルな背景画像を作成してくれるサイトです。

BgPatterns

背景のパターンを作成してくれるサイトです。あんまり凝ったものは作れないけど。

Favicon Generator

手持ちの画像をアップロードしてファビコンを作成してくれるサイトです。

Stripe Generator

昨今見かけなくなりつつあるシマシマ模様を作成してくれるジェネレーターです。

Vector Magic

アップロードした画像をベクター形式に変換してくれるサイト。想像以上にきれいに変換できてビックリ。

Web 2.0 Badges

Web 2.0っぽいバッヂ画像を作成してくれるサイトです。ボタン画像を作成してくれる Fresh Generator もあります。残念なことに文字に日本語を入力できないみたい。

その他便利なサービス

.htaccess Editor

ベーシック認証やリダイレクトなどを行いとときに.htaccessファイルに記述する内容を作成してくれます。けっこう便利かも。

Beanstalk

オンラインのサブバージョンリポジトリ。100MBまでは無料で使えます。

Designers Toolbox: OS Form Elements

Webブラウザの枠やフォームエレメントのPSDファイルをダウンロードできます。

Jottings.com

JavaScriptで暗号化されたメールアドレスを生成してくれるサイトです。詳しくは プレスリリースページ制作のための10のTips を参照のこと。

Internet Archive

リニューアルされる前のあのサイトをもう一度見たい、というときのために。

W3C Link Checker

W3Cのリンクチェックサービス。あくまでもリンク切れをチェックするだけなので、正しいリンクへ飛んでいるかどうかは結局ひとつひとつ確認するしかありませんが。

簡単オンラインRSSメーカー

静的なサイトで自力でRSSを作らなきゃいけないときに便利かも。RSS 1.0しか作れないみたいだけど。

特殊文字リファレンス

オンラインサービスとはちょっと違うけど、僕は「&」や「©」などの特殊文字を記述するときはここからコピペしてます。

以上、覚えておくとちょっと便利なオンラインサービスたちでした。