Web制作・担当におすすめのツール16！定番から便利ツール
Web制作に役立つツールをご紹介します。業務の効率化ができるツールも多く紹介していますが、そもそもWeb制作には欠かせないツールも取り上げています。
実際にWeb制作を行う方だけでなく、システム担当やWeb担当にとっても便利なツールばかりなので、ぜひ参考にしていただければと思います。
なお、ご紹介するツールを使う際は、必ず利用規約を確認するようにしてください。
デザイン
まずはデザイン編からご紹介します。
Prott
プロトタイプの作成ツールです。画像をつなげるだけでなく、動作を付け加えることもできます。ワイヤーフレームもドラッグアンドドロップで簡単につくることができます。SlackやDropbox、Sketchなどのツールとの連携も可能です。スマホアプリ（Android、iOS）もリリースされています。
Photoshop CC
Adobeがリリースしている、写真編集ソフトです。Webデザイナーの標準的なツールになっているので、社内のWeb担当の方も使えるようになっておくと便利でしょう。Photoshopは非常に高機能なのですが、その分だけ習得するにはある程度の期間が必要になります。
http://www.adobe.com/jp/products/photoshop.html
Illustrator CC
ログやアイコンなどのベクター画像が制作ができるソフトです。Photoshopと同様、Web制作の現場では必携とも言えるツールの一つです。
https://www.adobe.com/jp/products/illustrator.html
Gridulator
Webデザインで必須のグリッドが、簡単につくれるサービスです。Photoshopでグリッドラインをつくってもいいのですが、案外時間もかかります。デザイン作業の効率化もできるので、うまく活用してください。使い方ですが、Widthとカラム数を指定するだけでグリッドが作成できます。1クリックでプレビューが見られますし、PNGファイルのダウンロードも可能です。
コーディング
HTMLやCSSなどのコーディングに使えるツールです。
Atom
プログラミング用のテキストエディタとしては、Sublime TextやVim、Codaなど様々な種類があります。中でもオススメなのが、2014年にリリースされた新進気鋭のエディタ「Atom」です。GitHubが開発したオープンソースのテキストエディタで、Web制作に特化したつくりになっています。Gitとの親和性が高いのはもちろんですが、マークダウン結果がリアルタイムで見られたり、便利なプラグインも豊富にあります。
Another HTML-lint gateway
HTMLの文法チェックをしてくれるサービスです。HTMLに文法間違いがあると、SEO内部対策の面でも不利になるので忘れずにチェックしたいもの。Another HTML-lint gatewayではかなり厳しめなチェックをしてくれます。チェック項目も250以上あり、個別にON/OFFすることもできます。残念ながらHTML5には対応していません。
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html
Spritebox
「Spritebox」は、CSSスプライトを作成してくれる無料のツールです。作成したCSSについては、LESS形式もしくはSASS形式でダウンロードすることもできます。
Online Javascript beautifier
圧縮されたJavaScriptファイルを、ワンクリックで整形してくれるオンラインツールです。JavaScriptファイルの中身を見たいことや編集したいことは案外多いので、重宝します。
SEO
アクセス分析やSEO関連のツールです。
Google Analytics
Google Analyticsは、サイトのアクセス分析をするためのツールです。アクセスや広告による効果の測定など、アクセス分析に必要な機能が豊富に備わっています。
https://www.google.com/intl/ja_JP/analytics/
Google Search Console
Googleがリリースしている、サイト担当者向けのツールです。サイトの登録や検索キーワード、サイトのエラー確認などの機能が使えます。
https://www.google.com/intl/ja/webmasters/#?modal_active=none
SimilarWeb
サイトのアクセス分析や、競合分析のできるツールです。アクセス分析ツールと言えば、上でご紹介したGoogle Analyticsが一般的です。「SimilarWeb」ではデータ収集の方法が根本的に異なるので、Google Analyticsとは異なる視点でサイトをチェックすることができます。
https://www.similar-web.jp/web-analytics.php
SEOチェキ！
サイトのSEO情報がチェックできるツールです。meta情報や重要タグ、検索順位、キーワードの出現頻度など、幅広いサイト情報が確認できます。軽量に動作してくれるので、気軽に使えることもメリットです。
その他
smush.it!
ページで使われている画像を、ワンクリックで最適化できるツールです。画像のメタデータを削除するなどの処理を施してくれます。
パスワード生成（パスワード作成）ツール
管理者アカウントやユーザー管理では、セキュリティレベルの高いパスワードを発行・使用する必要があります。「パスワード生成（パスワード作成）ツール」では強度の高いパスワードを自動生成することができます。対応している文字数は、最大で40文字となっています。
http://www.luft.co.jp/cgi/randam.php
Favicon & App Icon Generator
Favicon（ファビコン）を生成してくれるツールです。Faviconとは、ブラウザのタブに表示される小さなアイコン画像のこと。Faviconが設定されていない場合は、ブラウザのデフォルトのFaviconが表示されてしまいます。設定していないサイトも案外多いのですが、デザインの統一にもなります。ぜひ設定するようにしましょう。
http://www.favicon-generator.org/
.htaccess作成
.htaccessファイルが作成できるツールです。「.htaccess作成」はブラウザ上で項目を選択していくだけで、簡単に.htaccessファイルが作成できます。自分でつくる場合はコーディングの知識が必要なので、担当者のスキルによって運用が左右されるデメリットもあります。積極的に導入していきましょう。
http://www.htaccesseditor.com/
あとがき
Web制作の現場でよく使われているツールについてご紹介しました。Web業界は、技術の流行り廃りが激しい業界です。それに伴って、利用されるツールも年々変化しています。最新の情報をウォッチしながら、最適なツールを活用していってください。