ホーム > サイト構築情報 > Web制作・担当におすすめのツール16!定番から便利ツール

Web制作・担当におすすめのツール16!定番から便利ツール

Web制作・担当におすすめのツール16!定番から便利ツールのアイキャッチ

Web制作に役立つツールをご紹介します。業務の効率化ができるツールも多く紹介していますが、そもそもWeb制作には欠かせないツールも取り上げています。

実際にWeb制作を行う方だけでなく、システム担当やWeb担当にとっても便利なツールばかりなので、ぜひ参考にしていただければと思います。

なお、ご紹介するツールを使う際は、必ず利用規約を確認するようにしてください。

デザイン

まずはデザイン編からご紹介します。

Prott

Prott

プロトタイプの作成ツールです。画像をつなげるだけでなく、動作を付け加えることもできます。ワイヤーフレームもドラッグアンドドロップで簡単につくることができます。SlackやDropbox、Sketchなどのツールとの連携も可能です。スマホアプリ(Android、iOS)もリリースされています。

https://prottapp.com/ja/

Photoshop CC

Photoshop CC

Adobeがリリースしている、写真編集ソフトです。Webデザイナーの標準的なツールになっているので、社内のWeb担当の方も使えるようになっておくと便利でしょう。Photoshopは非常に高機能なのですが、その分だけ習得するにはある程度の期間が必要になります。

http://www.adobe.com/jp/products/photoshop.html

Illustrator CC

Illustrator CC

ログやアイコンなどのベクター画像が制作ができるソフトです。Photoshopと同様、Web制作の現場では必携とも言えるツールの一つです。

https://www.adobe.com/jp/products/illustrator.html

Gridulator

Gridulator

Webデザインで必須のグリッドが、簡単につくれるサービスです。Photoshopでグリッドラインをつくってもいいのですが、案外時間もかかります。デザイン作業の効率化もできるので、うまく活用してください。使い方ですが、Widthとカラム数を指定するだけでグリッドが作成できます。1クリックでプレビューが見られますし、PNGファイルのダウンロードも可能です。

http://gridulator.com/

コーディング

HTMLやCSSなどのコーディングに使えるツールです。

Atom

Atom

プログラミング用のテキストエディタとしては、Sublime TextやVim、Codaなど様々な種類があります。中でもオススメなのが、2014年にリリースされた新進気鋭のエディタ「Atom」です。GitHubが開発したオープンソースのテキストエディタで、Web制作に特化したつくりになっています。Gitとの親和性が高いのはもちろんですが、マークダウン結果がリアルタイムで見られたり、便利なプラグインも豊富にあります。

https://atom.io/

Another HTML-lint gateway

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

「Spritebox」は、CSSスプライトを作成してくれる無料のツールです。作成したCSSについては、LESS形式もしくはSASS形式でダウンロードすることもできます。

http://www.spritebox.net/

Online Javascript beautifier

Online Javascript beautifier

圧縮されたJavaScriptファイルを、ワンクリックで整形してくれるオンラインツールです。JavaScriptファイルの中身を見たいことや編集したいことは案外多いので、重宝します。

http://jsbeautifier.org/

SEO

アクセス分析やSEO関連のツールです。

Google Analytics

Google Analytics

Google Analyticsは、サイトのアクセス分析をするためのツールです。アクセスや広告による効果の測定など、アクセス分析に必要な機能が豊富に備わっています。

https://www.google.com/intl/ja_JP/analytics/

Google Search Console

Google Search Console

Googleがリリースしている、サイト担当者向けのツールです。サイトの登録や検索キーワード、サイトのエラー確認などの機能が使えます。

https://www.google.com/intl/ja/webmasters/#?modal_active=none

SimilarWeb

SimilarWeb

サイトのアクセス分析や、競合分析のできるツールです。アクセス分析ツールと言えば、上でご紹介したGoogle Analyticsが一般的です。「SimilarWeb」ではデータ収集の方法が根本的に異なるので、Google Analyticsとは異なる視点でサイトをチェックすることができます。

https://www.similar-web.jp/web-analytics.php

SEOチェキ!

SEOチェキ!

サイトのSEO情報がチェックできるツールです。meta情報や重要タグ、検索順位、キーワードの出現頻度など、幅広いサイト情報が確認できます。軽量に動作してくれるので、気軽に使えることもメリットです。

http://seocheki.net/

その他

smush.it!

smush.it!

ページで使われている画像を、ワンクリックで最適化できるツールです。画像のメタデータを削除するなどの処理を施してくれます。

http://www.imgopt.com/

パスワード生成(パスワード作成)ツール

パスワード生成(パスワード作成)ツール

管理者アカウントやユーザー管理では、セキュリティレベルの高いパスワードを発行・使用する必要があります。「パスワード生成(パスワード作成)ツール」では強度の高いパスワードを自動生成することができます。対応している文字数は、最大で40文字となっています。

http://www.luft.co.jp/cgi/randam.php

Favicon & App Icon Generator

Favicon & App Icon Generator

Favicon(ファビコン)を生成してくれるツールです。Faviconとは、ブラウザのタブに表示される小さなアイコン画像のこと。Faviconが設定されていない場合は、ブラウザのデフォルトのFaviconが表示されてしまいます。設定していないサイトも案外多いのですが、デザインの統一にもなります。ぜひ設定するようにしましょう。

http://www.favicon-generator.org/

.htaccess作成

.htaccess作成

.htaccessファイルが作成できるツールです。「.htaccess作成」はブラウザ上で項目を選択していくだけで、簡単に.htaccessファイルが作成できます。自分でつくる場合はコーディングの知識が必要なので、担当者のスキルによって運用が左右されるデメリットもあります。積極的に導入していきましょう。

http://www.htaccesseditor.com/

あとがき

Web制作の現場でよく使われているツールについてご紹介しました。Web業界は、技術の流行り廃りが激しい業界です。それに伴って、利用されるツールも年々変化しています。最新の情報をウォッチしながら、最適なツールを活用していってください。