便利なジェネレータやチェックツールなど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ツールでも高機能なものが多いので上手く活用して効率的に制作できるようにしたいですね。
Twitter 人気のつぶやき 3/19〜3/25 2011
WebクリエイターボックスのTwitter: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今…