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

    無料で使えるワイヤーフレーム作成ツールまとめ

    ワイヤーフレームやモックアップを作成する際に利用できるWEBツールのま…

  2. WEB制作関連

    jQueryを利用した演出がかっこいいWEBサイト50個

    多くのプラグインが開発され、様々に活用されているjQueryですが、サ…

  3. WEB制作関連

    404エラーページ作成のススメ

    通常サイトにアクセスしていてページが削除されていたり、タイプミスなどで…

  4. WEB制作関連

    色とWEBデザイン -あか編-

    色別WEBデザインのまとめです。今回のテーマは「赤」です。&n…

  5. WEB制作関連

    「jQuery逆引きマニュアル 」の読者モニターをやってみた vol.01

    「jQuery逆引きマニュアル Webデザインの現場で役立つ基本と実践…

  6. WEB制作関連

    紙のテクスチャが素敵なWEBデザイン35個

    紙のテクスチャを用いたWEBデザインのまとめです。…

コメント

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

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

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

  1. 話題・トレンド

    エスカレーター効果を体感できるおもしろCM
  2. 話題・トレンド

    ブブゼラを救え!再利用コンテストが開催されたらしい。
  3. WEBマーケティング

    マーケティング心理学|テンションリダクション
  4. 話題・トレンド

    2011年の振り返りと2012年の展望を考えてみた。
  5. WEB制作関連

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