2014年05月28日
【最新版】ウェブ制作に関するお役立ちツールベスト20
現在のウェブ制作の開発現場ではスピードが重視される。だからこそ、便利なツールを正しく利用する知識を蓄えなくてはならない。
本稿ではウェブ制作に関するお役立ちツールをまとめて紹介する。様々なツール・ソフト・サービスをうまく活用することで、作業効率を高めよう。メジャーなツールばかりなので、利用していない方は導入を検討していただきたい。
※ちなみに他にも目をつけているがまだ導入していないツールがある。が、それはランキング外とした。
目次
ウェブ制作に関するお役立ちツールベスト20
20位：Font Awesome
アイコン型のウェブフォントのCDN。ウェブアイコンを手軽に使用できる。
ウェブアイコンフォントは、画像と違って色もサイズも簡単に変更できるし、拡大してもぼやけない。ブログやウェブサイトの構築時に、助けになるだろう。
19位：Measure-it
Firefoxアドオン。ブラウザ上でpxの長さを計測できる。パッと長さを図りたいときに便利。
『MeasureIt』がアップデート後に動作しなくなってしまったため、その代替として似た名前の『Measure-it』を利用している。
18位：Google Fonts
天下のGoogle様が提供する日本語も使える無料ウェブフォントサービス。利用方法が非常に簡単で重宝している。
かつては見出しやメニューのデザインでいちいち画像を作成していたが、今ではウェブフォントがあるのでその必要がなくなった。
17位：Illustrator
ロゴ制作に活用。筆者はあまりイラストを多用しないため使用頻度は多いとはいえないが、たまに使う。
16位：ColorZilla
Firefoxアドオン。カラーピッカーで画面上のカラーコードを取得できる。結構な頻度で使用している。
15位：Web Developer
様々なウェブ開発ツールを統合した、便利すぎるFirefoxアドオン。とにかく様々な機能を備えており、なにかと役立つ。
14位：Bootstrap
レスポンシブデザインのウェブサイトを簡単に構築できるという触れ込みのCSSフレームワーク。元々Twitter社内で作られたものである。
「どんなサイトでもTwitterっぽくなってしまう」という否定的意見もよく耳にするが、グリッドシステムのみを活用すればそんなことはない。このグリッドシステムを考えた人はすごい。
13位：Dropbox
ウェブ制作業務の助けになっているというわけではないが、制作業務に関するファイルはすべてDropboxで管理している。同時進行でバックアップがとれるため、パソコンが壊れても大惨事にはならない。各種アプリの設定ファイルもDropboxで同期させれば便利だし、なにかと影で支えてくれているありがたい存在だ。
12位：検索エンジン
いままで何度疑問点を解決してくれただろう。検索して結果を得るという経験は数知れないので、まさかのランクインとした。いまでは「ちょっと不明点があるとすぐ検索」の癖がついてしまった（反省すべき事でもあるが）。
ちなみに、リアルタイムでの悩み（事象が発生したばかりの悩み）や、愚痴に近い悩みは、Twitter検索が強い。
第11位：ImageOptim
jpgやpngに対応する画像圧縮ツール（Mac用）。手軽な操作感で、画像データのファイルサイズを圧縮してくれるので便利。
10位：MORISAWA PASSPORT ONE
様々な有料フォントをパッケージ契約できるサービス。価格は1年で49,800円と少々高く感じるが、有料フォントの質は使ってみればしみじみと実感できるので出し惜しみしたくない。
9位：MAMP
ローカル環境にウェブサーバとデータベースを構築できるソフト。WordPressをローカル環境に導入するために利用している。WordPressテーマ制作の際、これがあるのとないのでは作業効率が段違い。
8位：Yummy FTP Pro
Mac専用のFTPアプリ。同期機能など便利な機能が備わっており、有料だが非常におすすめできる。
7位：Slicy
Photoshopユーザーであれば導入を検討したいスライスアプリ『Slicy』。Psdファイルをドラッグ＆ドロップするだけで、簡単に画像を書き出しできる。ウェブ制作作業を神速化してくれる。
6位：Sublime Text 3
軽量だが使い勝手のよいテキストエディタ。かゆいところに手が届いている様々なショートカットは、一度覚えたら他には戻れない。まさに「恋に落ちるエディタ」。
5位：WordPress
オープンソースのブログCMSプラットフォーム。無料でCMS構築ができ、カスタマイズ性も高い。何よりユーザーが多いので、検索エンジンで疑問点が解決するのも有り難い。
4位：jQuery
JavaScriptコードを簡単に記述するためライブラリ。CSSの書き方と似ている点が多く、jsが苦手なユーザーにも優しい。JavaScript使用機会は当然多いので、非常に助けられている。
3位：Sass
ツールというよりは概念だが、感動を覚えたこの仕組みは紹介したい。CSSに関数や変数の処理を導入し、プログラムっぽく書くことができる。
HTMLコーディングをする人の約7割がSassを使用しているらしいが、納得である。作業効率は格段にあがるだろう。
第2位：Emmet(Zen-Coding)
HTML／CSSを独自の省略記法で書いて、さっと展開するというプラグイン。これがあるのとないのでは、作業効率が大違い。爆速コーディングのために、絶対に導入しておきたいツールであると保証できる。
第1位：Photoshop
画像編集・加工ソフトであり、本来はフォトレタッチに優れたソフトであるが、ウェブ制作でも存分に使える。「Illustrator」「Fireworks」を勧める声もあり筆者も十分検討したが、Photoshopの操作感には敵わなかった。