Web制作のプロが仕事で使っているツール10選【現役Web担が解説】

Web制作をする際には様々な便利ツールを駆使する事で効率よくサイト制作を行う事ができます。

ですが、実際のWeb制作の現場でどのようなツールを使っているのかは働いてみて先輩から教えてもらったり、もしくはWebのスクールで学んだりする事で早くインプットできます。

他にもググる事でたくさんのツールは出てきますが、一体どのツールを使えば良いのかってくらい色々な種類なWeb制作ツールがでてきますよね。

そこで今回はプロが実際にWeb制作で使っているツールを厳選して紹介したいと思います。

とりあえずここに書いてあるツールがあれば問題ないです！

Web制作のツールってたくさんあるけど一体どのツールを使えば良いのだろう・・？
プロが使っているWeb制作のツールを参考にしたい。

こんな疑問に答えます。

本記事の内容

Web制作のプロが実際に使っているツールを紹介します。

Web制作のプロが仕事で使っているツール○選

Web制作のプロが仕事で使っているツール○選

今回はWeb制作を行う際に使用する基本的なツールを厳選して10個紹介します。

この10個のツールを使うことでWeb制作は出来ます。

新規でWeb制作を行う際に必要なツールと既存のWebサイトを更新・リニューアルする時で、
アクセス解析ツールのは使い分けますが、念の為リストに入れています。

1　MacまたはWindwsのPC

まずは基本中の基本なのですが、Web制作にはPCが必要です。

デザイナーやエンジニアはMacを好んで活用する人が多いですが、自分にあったPCを使用するでOKです。

企業に勤めると使えるPCにWindows縛り等の制限が発生するパターンもありますので、どちらも使えるようになっておくと損は無いです。

僕もデスクトップPCはWindowsで、ノートPCはMacbookを使っています。

たまにショートカットの操作に対して混乱することがありますが、慣れてしまえば大したことないです。

デザインツールをインストールする場合は、ある程度スペックの高いPCとを選んでおくと良いです。
コアI5以上あると、デザインソフトが快適に使えると思います。

2　Google Chrome＆Edge

ブラウザは基本的にGoogleChromeを活用します。

使用されているシェアが多いと言う事と、開発者ツールによるデバックや開発の効率性が高い為です。

基本的にGoogleChromeとEdge・IE11の検証ができる環境であればWeb制作環境としては問題ないです。

GoogleChromeと同じくらいユーザーシェアがあるマイクロソフトのEdgeやIEはMacユーザーであってもインストールしておきたいブラウザですね。（動作検証で活用）

Chromeで表示崩れが起きていなくてもIE11で意図せぬ表示くずれや挙動を起こすことは多々ありますので気をつけたいところです。

3　Officeソフト

Officeソフトは鉄板で活用します。

エクセル・パワーポイントはマストで使用していますね。

指示書やワイヤーフレームをエクセルやパワーポイントで作るディレクターは今でも多くいます。

その他、見積書や請求書をワードで作る場合もありますし、その他アクセス解析やデザイン趣旨の資料作成でも必ず活用しますので、インスールしておきましょう。

4　アクセス解析ツール

アクセス解析ツールは、新規でサイトを作成する場合はサイトにタグを導入する形で使用します。
サイトが公開された後にアクセスログを使ってサイト分析をする為ですね。

広告運用やヒートマップ等の複数計測タグを活用する場合はタグマネージャーというのを活用するパターンがあります。

既存サイトをリニューアルしたり、改善する場合はアクセス解析ルーツを使用して課題抽出から行います。

サイト分析を行い、ボトルネックを洗い出して、サイトのどの部分を改善すれば、良いのかを見つけ出す事ができます。

例：ECサイトのコンバージョンをアップしたい。→　TOPページで離脱している人が多い→TOPページから商品ページへ誘導する導線が弱い→　商品の提案を強める情報設計・デザインにする必要がある（仮設）

等の課題発見と仮設構築で役立ちます。

実際に現場で使用しているアクセス解析ツールは下記２点です。

・Google Analytics
・Adobe Analytics

5　プロトタイピングツール

プロトタイピングツールもここ最近のWeb業界では当たり前のように使用されています。
使用頻度が高いツールは下記３点ですね。

・Adobe XD
・Sketch
・Figma

利用シェアが高いのはAdobeXDかなと思います。

プロトタイピングツールは、ワイヤーフレームもつくれますし、サイトの導線設計を行う際に画面遷移をブラウザ上で確認出来ます。

その際にユーザビッリティを考慮した情報設計になっているか、またはデザインになっているかなどの確認もできる万能ツールです。

主にUI・UXデザインやアプリ開発などでもXDを使用して画面デザインや導線設計・UIパーツ作成を行ったりします。

6　Adobe Photoshop

PhotoshopもWeb制作の現場では必須ツールです。
Webデザインを行う際に使用します。

具体的には主に下記のような用途で活用しています。

・サイトデザイン作成（TOPページデザイン・下層ページデザイン）
・バナー作成
・写真加工

Adobeのソフトを安く購入するなら、『たのまな』がおすすめ！

7　Adobe Illustrator

Illustratorもサイト制作では使用します。
主にベクターデータを作る際に活躍します。

具体的には下記のような時に使用しています。

・ロゴ作成
・サイトで使用するアイコン作成
・イラスト作成
・SVGファイル作成
・バナー作成（文字加工等）

8　マークアップ用テキストエディタ

コーディングを行う時に活用するのがエディタです。
Adobe　Dreamweaverというエディタを使用する人もいますが、
プロのコーダーやエンジニアになってくるとDreamweaverより軽量な
Sublime TextやATOM、Visual Studio Codeを使用している人が多いです。

プラグインも豊富で自分用にカスタマイズしやすいのがメリットですね。

おすすめエディタ

・Sublime Text
・ATOM
・Visual Studio Code

9　FTPSツール

FTPSは編集したファイルを、サーバーにアップロードする際に使用します。
このツールがないと、CMSなどを使用していない場合は少々面倒です。

ここでおすすめしたいのは編集したファイルを暗号化して転送してくれる下記のツールです。
転送ファイルに対するセキュリティ対策のニーズに対応しています。

・WinSCP
・FileZilla

10　CMS

CMSの導入を行うパターンもWeb制作では増えています。
このCMSは導入は少々プログラミングスキルが必要になってきます。

WeBサイトを更新しやすくする為に管理画面で制御できる仕組みです。
Officeソフトのようなインターフェースで文字を入力できたり、画像やその他データのアップロードも簡単にできます。
誰でもWebサイトが簡単に更新できるようになっています。

よく使われるCMSパッケージ

・Movable Type（ムーバブル・タイプ）
・WordPress
・ShareWith
・Adobe Experience Manager

企業によってはフルスクラッチでCMSを用意するところも多いです。

その他

その他でいうとデザイナーによってはペンタブを活用する人もいます。
今はアイパッドを書くことができますが、まだまだペンタブを活用するデザイナーはたくさんいます。

created by Rinker

Apple(アップル)

【Amazon.co.jp限定】ワコム液タブ液晶ペンタブレット Wacom Cintiq 16 FHD ブラックアマゾンオリジナルデータ特典付き DTK1660K1D

created by Rinker

Wacom(ワコム)

【Amazon.co.jp限定】ワコムペンタブレットペンタブ Wacom Intuos Pro Sサイズアマゾンオリジナルデータ特典付き PTH460K1D

created by Rinker

Wacom(ワコム)

いかがでしたでしょうか。
今回は実際にWeb制作を仕事にしている僕の目線で、現場で使用しているWeb制作ツールを紹介しました。
10個のツールを紹介しましたが、どれもWeb制作では基本となるツールなので抑えておきましょう。

Web制作のプロが仕事で使っているツール10選【現役Web担が解説】