便利なジェネレータやチェックツールなどWEBサイトを制作する際に重宝するいろいろなWEBツールを工程別にご紹介します。

デザイン

Stripe Generator

背景画像に利用できる様々なストライプ画像を生成できます。

bgMaker

ピクセルを塗りながら背景画像を作成することができます。

Gridulato

横幅とカラム数から数パターンのグリッドを計算。ガイド画像もダウンロードできます。

マークアップ

TAG index

HTMLタグやCSSがインデックスされていて検索することも可能。

zen-coding

コーディングをスピードアップするプラグイン。操作イメージは以下を見てみてください。「zen-coding」で検索しても様々な情報がでてきます。

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.

PROCSSER

難読化されたCSSでもコードを整形してくれるツール。汚く書いてしまったCSSもきれいに整形してくれます。

Spritebaker

CSS Spriteを利用するためのコードを生成してくれるツール

Spritebox

使用したい背景画像を読み込んで範囲を指定するとCSS Spriteにするためのコードを生成してくれるツール

Font comparer

WEBフォントを見比べて、気に入ったものがあればダウンロードもできるツール。

Grid Layout Generator

指定したグリッドのHTMLとCSSを生成してくれるツール。

テスト

IE TESTER

バージョンごとのIEの見え方を再現してくれるアプリケーション。

Tools

ページの読み込み速度を計測してくれるツール。

Stella

こちらもページの読み込み速度を計測してくれるツール。

The W3C Markup Validation Service

W3C提供の(X)HTMLのチェックツール。

XENU

リンクや画像などのリンク切れをチェックできるフリーソフトでJavaScriptのリンクもチェックできます。

リンクチェッカー

URLを指定すると内部リンクをたどってサイト全体のリンク切れをチェックできます。

Adobe BrowserLab

ブラウザごとの見え方をチェックできるツール。画像を重ねて見え方の違いを見比べることもできます。

運用

Markup

ブ
ックマークレットとして利用することで公開中のサイトに書きこんで、URLを発行できます。

Google Analytics

言わずと知れたアクセス解析ツールです。

Google PageRank Checker

ツールバーを入れずに気になるGoogleのページランクを知ることができます。

SEOチェキ

検索順位やリンク数などSEOに重要な項目をチェックできます。

最近はフリーのWEBツールでも高機能なものが多いので上手く活用して効率的に制作できるようにしたいですね。