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