ブログ
blog

【定期更新】ウェブ制作に関するお役立ちツールベスト20

この記事は2018年3月に更新されました。

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

メジャーなツールばかりなので利用していない方は導入を検討されたい。ちなみに目をつけているのにまだ導入していないツールはあるが、それはランキング外とした。

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

20位 : Font Awesome


アイコン型のウェブフォントのCDN。ウェブアイコンが簡単に使用できる。

19位 : Measure-it


Firefoxアドオン。ブラウザ上でpxの長さを計測できる。パッと長さを図りたいときに便利。

『MeasureIt』がアップデート後に動作しなくなってしまったため、その代替として似た名前の『Measure-it』を利用。

18位 : Google Fonts


利用方法が非常に簡単なウェブフォントサービス。今では見出しやメニューのデザインでいちいち画像を作成する必要がなくなった。

17位 : Illustrator


ロゴ制作に活用。筆者はあまりイラストを多用しないため使用頻度は多いとはいえないが、たまに使う。

16位 : ColorZilla


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

15位 : Web Developer


様々なウェブ開発ツールを統合した、便利すぎるFirefoxアドオン。とにかく様々な機能を備えておりなにかと役立つ。

14位 : Bootstrap


レスポンシブデザインのウェブサイトを簡単に構築できるという触れ込みのCSSフレームワーク。「どんなサイトでもTwitterっぽくなってしまう」という否定的意見もよく耳にするが、グリッドシステムのみを活用すればそんなことはない。このグリッドシステムを考えた人はすごい。

13位 : Dropbox


ウェブ制作業務の助けになっているというわけではないが、制作業務に関するファイルはすべてDropboxで管理している。同時進行でバックアップがとれるため、PCが壊れても大惨事にはならない。各種アプリの設定ファイルもDropboxで同期させれば便利だし、なにかと影で支えてくれている存在だ。

12位 : 検索エンジン


いままで何度疑問点を解決してくれただろうか。検索して結果を得るという経験は数知れないので、まさかのランクインとした。いまでは「ちょっと不明点があるとすぐ検索」の癖がついてしまった(反省すべき点でもあるのだが)。

ちなみに、リアルタイム(事象が発生したばかり)での悩みや愚痴に近い悩みはTwitter検索が強い。

第11位 : ImageOptim


jpgやpngに対応する画像圧縮ツール。手軽な操作感で、画像データのファイルサイズを圧縮してくれるので便利だ。

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の操作感には敵わなかった。

ページの先頭へ