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サイト21個

    ナビゲーションが固定配置されたWEBサイトのまとめです。このブログもナ…

  2. WEB制作関連

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

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

  3. WEB制作関連

    タイポグラフィを生かしたWEBデザイン20個

    タイポグラフィを効果的に用いたWEBデザインのまとめです。タイポがお…

  4. WEB制作関連

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

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

  5. WEB制作関連

    MT4.2でブログ記事に関連記事一覧を表示

    サイト内回遊を高めるために有効な関連記事表示。これを自分のブログに…

  6. WEBディレクターズマニュアル

    WEBディレクターがスケジュールを引いてはいけない理由

    プロジェクトを進める際には必ずスケジュールの提出を求められると思います…

コメント

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

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

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

  1. Design Items

    クリエイティブな2012年カレンダーのまとめ
  2. WEBマーケティング

    マーケティング心理学|ザイオンス効果
  3. WEB制作関連

    レトロなデザインのWEBサイトまとめ
  4. ソーシャルメディア

    新Facebookページ対応に必ず読んでおきたい記事まとめ
  5. Design Items

    光を浴びて輝く。影を使ったアートたち
PAGE TOP
Top