WEB制作関連

WEB制作者なら必ず知っておきたいWEBツール21選

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

デザイン

Stripe Generator

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

wtool_01.jpg

bgMaker

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

wtool_02.jpg

Gridulato

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

wtool_03.jpg

マークアップ

TAG index

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

wtool_04.jpg

zen-coding

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

wtool_05.jpg

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.

PROCSSER

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

wtool_06.jpg

Spritebaker

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

wtool_07.jpg

Spritebox

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

wtool_08.jpg

Font comparer

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

wtool_09.jpg

Grid Layout Generator

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

wtool_10.jpg

テスト

IE TESTER

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

wtool_11.jpg

Tools

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

Stella

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

wtool_13.jpg

The W3C Markup Validation Service

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

wtool_14.jpg

XENU

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

wtool_15.jpg

リンクチェッカー

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

wtool_16.jpg

Adobe BrowserLab

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

wtool_17.jpg

運用

Markup


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

wtool_18.jpg

Google Analytics

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

wtool_19.jpg

Google PageRank Checker

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

wtool_20.jpg

SEOチェキ

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

wtool_21.jpg

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

関連記事

  1. WEB制作関連

    気持ちもあがる!デザインの美しいEコマースサイト25個

    ネットで買い物というと商品を決めたら一番安いお店を探して・・・というの…

  2. WEB制作関連

    味覚も視覚も刺激する飲食店のWEBサイト33個

    いろいろなジャンルの飲食店のWEBサイトのまとめです。&nbs…

  3. WEB制作関連

    やっぱりカッコいい。デザイン事務所のWEBサイト30個

    「紺屋の白袴」という言葉もありますが、デザインを提案するならまずは自ら…

  4. WEB制作関連

    ユニークなレイアウトのWEBサイト40個

    自由なレイアウトで独特の世界観を表現しているWEBサイトのまとめを紹介…

  5. WEB制作関連

    HTMLメールのプレビュー方法 -Thunderbird編-

    HTMLメールを作ったんですが、どうやってプレビューすればいいの?…

  6. WEB制作関連

    ペーパープロトタイピングのすすめ

    みなさんはWEBサイトの画面設計をする時に何を利用するでしょうか。…

コメント

  1. Twitter 人気のつぶやき 3/19〜3/25 2011

    WebクリエイターボックスのTwitter: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今…

  1. この記事へのトラックバックはありません。

  1. Design Items

    鯉が泳ぐカーペットって?
  2. WEB制作関連

    Webサイトをレイヤーに分けて保存できる「Page Layers」
  3. Design Items

    真っ白な紙に世界を作り上げた「The Ice Book」
  4. WEB制作関連

    デザイナーなら必ず知っておきたい国内素材サイト22選
  5. WEB制作関連

    ユーザビリティを向上させる25の高品質なアイコンセット
PAGE TOP
Top