ウェブ制作に役立つツール・ソフト・サービス 勝手にベスト20

ウェブ制作に関するお役立ちツールをまとめて紹介します。
様々なツール・ソフト・サービスをうまく活用することで、作業効率を高めましょう。

メジャーなツールばかりですので、利用していない方は是非導入をご検討ください。

多岐にわたるジャンルのツール・ソフト・サービスをまとめてランキング付けしています。
一体どういう基準で順位付けしているのか不明瞭ですが、非常に感覚的なものです。
ランキングに対しては、あまり気にしすぎないでいただけると助かります。

ウェブ制作に関するお役立ちツールベスト20

20位 : Pearl Crescent Page Saver Basic

一瞬でキャプチャ画像が撮影できます。
ブログ記事作成時には使用機会が多いです。
ウェブデザインをメモする際にも使っています。

19位 : Placehold.it

超シンプルなダミー画像を、非常に手軽に生成出来るWebサービス。
想像以上に簡単だったため感動を覚えました。

18位 : Evernote

スニペットのメモと、気に入ったウェブデザインのクリップに使用。
ですが、使用頻度の高いスニペットのメモはテキストエディタに登録しておくべきですね。

17位 : MeasureIt

ブラウザ上でpxの長さを計測できます。
パッと長さを図りたいときに便利です。

16位 : Google Fonts

ウェブフォントです。
利用方法が非常に簡単ですので、導入したことがない方は一度お試し下さい。

15位 : Illustrator

ロゴ制作に活用します。
私はあまりイラストを多用しないため、使用頻度は多いとはいえません。

14位 : http://www.huecode.com/

Web上で視覚的に色を決め、カラーコードを取得できるサイト。
非常に使い勝手が良く気に入っています。

13位 : ColorZilla

カラーピッカーで画面上のカラーコードを取得できるアドオン。
結構な頻度で使用しています。

12位 : Dropbox

ウェブ制作業務の助けになっているわけではないですが…。
作成ファイルはすべてDropboxで管理しています。
同時進行でバックアップがとれるため、PCがぶっ壊れても大惨事にはなりません。

11位 : Google検索

まさかのランクインですが、検索して結果を得るという経験は数知れません。
ウェブ制作においても、検索エンジンは非常に重要なツールです。
「ちょっと不明点があるとすぐ検索」の癖がついてしまいました(反省すべき点でもある…)。

10位 : Font Awesome

アイコン型のウェブフォントのCDN。
ウェブアイコンが簡単に使用できます。
使用機会は非常に多いです。

9位 : XAMPP

ローカル環境にWebサーバとデータベースを構築できるソフト。
WordPressをローカルPCに導入しています。
WPテーマ制作の際、これがあるのとないのでは作業効率が段違い。

8位 : Web Developer

様々なWeb開発ツールを統合した、便利すぎるFirefoxアドオン。
とにかく様々な機能を備えています。

7位 : Dreamweaver

Webオーサリングツール・テキストエディタ。
もっと上位にすべきかとも思いましたが、不満点もそこそこある点も考慮しました。
「Sublime Text」「coda」を使ってみたいという思いもあり、この順位です。

6位 : Bootstrap

レスポンシブWebデザインを簡単にできる、CSSフレームワーク。
どんなサイトでもTwitterっぽくなってしまうという否定的意見もよく耳にしますが、グリッドシステムのみを活用すればそんなこともありません。

5位 : WordPress

オープンソースのブログCMSプラットフォーム。
無料でCMS構築ができ、カスタマイズ性も高いです。
とにかく大のお気に入りです。

4位 : jQuery

JavaScriptコードを簡単に記述するためライブラリ。
CSSの書き方と似ている点が多い点が嬉しい。
JavaScript使用機会は当然多いので、非常に助かります。

第3位 : Photoshop

画像編集・加工ソフト。
本来はフォトレタッチに優れたソフトであり、ウェブ制作に使用するのは「Fireworks」の方がいいという意見もあります。
うーん、同意しかねる。。
なんだかんだでPhotoshopの操作感だよなぁ。

第2位 : Emmet(Zen-Coding)

HTML/CSSを独自の省略記法で書いて、さっと展開するというプラグイン。
これがあるのとないのでは、作業効率が大違い。
爆速コーディングのために、絶対に導入しておきたいツールです。

第1位 : Firebug

Webページのデバッグツールです。
いろんなことができますが、やはり直感的・感覚的にCSSの修正ができるのが大助かりです。
最初であった時の感動は、凄まじい物がありました。
Firefoxで使っている時のほうが、使い勝手がいいです。
インパクトで1位に選出。

杉直樹
杉直樹 著者の杉直樹です。
"ライフクエスト"は、基本的にはジャンル多岐にわたる総合ブログです。
"人生をより豊かにする"と"社会をよりよいものにする"にマッチした記事をたくさん書いていけたらと思います。
お役に立てる記事があれば幸いです。