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制作関連

    インストールされたフォントを一覧できる「wordmark.it」

    自分のPCにインストールされているフォントをブラウザ上で一覧できるWE…

  2. WEB制作関連

    デザイナーなら必ず知っておきたい国内素材サイト22選

    デザインにはかかせない写真やイラスト、動画などの素材サイトのまとめです…

  3. WEB制作関連

    色とWEBデザイン -むらさき編-

    色はデザインをする上で重要な役割を担いますが、それぞれの色には多くの人…

  4. WEB制作関連

    パララックス効果で奥行きを魅せるWEBサイトまとめ

    パララックス効果とは視差効果ともいい、平面で重なり合う画像を異なる速さ…

  5. WEB制作関連

    思わず買いたくなるECサイトのデザイン30選

    ECサイトのデザインの際に参考にしたいWEBサイトのまとめです。…

  6. WEB制作関連

    EVERNOTEの新機能「Site Memory」実装編

    EVERNOTEからリリースされた新機能「Site Memory」を早…

コメント

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

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

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

  1. WEB制作関連

    ユーザビリティを向上させる25の高品質なアイコンセット
  2. WEB制作関連

    WEB制作者必見。便利なワイヤーフレーム作成ツールまとめ
  3. 話題・トレンド

    近未来空間を実現した「ドバイメトロ」がすごい。
  4. LifeHack・仕事術

    SugarSyncでオフィス環境をクラウド化
  5. WEB制作関連

    スクリーンショットを利用したWEBデザイン30個
PAGE TOP
Top