私がWeb制作で使っているツール（Windows環境）

今回は『私がWeb制作に使用しているツール』についてご紹介いたします。
普段どんなツールでWeb制作をしているのか、制作に携わる人は誰もが気になるところではないでしょうか？
私も他のクリエイターさんがどんなツールで制作をしているのか気になります。

私の職種としては、
Webデザイナーが作成したデザインをHTMLコーディングし、JavaScriptで動きをつけたりする「HTMLコーダー」や「フロントエンドエンジニア」が近いと思います。

開発環境は
世間的にはMac環境で制作を行っている方が多そうですが、私はWindowsで制作を行っています。

というわけで、今日はWindows環境で私が使っている制作関連のツールのご紹介をします。

Adobe Design and Web Premium CS6

大雑把に基本コレです。AdobeのCS6。
現在はCreative Cloud（CC）が主流かもしれませんが、最後のパッケージ製品ということでCS6を使っております。
最近デザイナーからあがってくるデザインがCC版だったりしてアラートが出ることがあります。いつまで使えるのでしょうか・・・心配です。

HTMLエディタ、テキストエディタ

WindowsやMacに最初から入ってるメモ帳などのツールでも制作は可能ですが、Web制作用に作られたエディタの方が何かと便利です。

Crescent Eve

HTMLやCSSに使うメインのエディタはフリーのこれを使っています。
とにかく軽くて特にカスタマイズしなくても私の使い方に合った動きをしてくれるので重宝しています。
自分好みにカスタマイズ出来るのが良いと言う人もいますが、私にとっては何もせずしっくり来るのがベスト。

HTMLやCSSの入力補完の他に、SHIFT+Enterで改行タグを打てたり、CTRL+Enterで閉じタグを打てるのが気に入っています。
タグ打ちの時に閉じタグまで自動で入れてくれるツールがありますが、私は自分で任意に打てる方が好みです。

JavaScript系のファイルで改行が無くずらずらっと書かれているファイルを開こうとすると固まってしまうのが唯一の欠点です。

Adobe Dreamweaver CS6

Macromedia時代からお世話になっています。
フォルダ越しの検索や一括置換、たまーに使うクリッカブルマップなどに使います。
ただ、多機能すぎてイマイチ軽快に動かないので、メインを務めることは無いです。

Adobe Brackets

最近ちょくちょくこれを使うようになりました。
基本的な入力補完や各種使い方の他、上下や左右にHTMLとCSSを並べてコーディング出来たりします。
Dreamweaverからコーディングに使う部分だけ抜き出したような感じです。

画像加工ツール

デザインを作成したり、切り出したり、バナーを作ったり、Web制作を行うにあたって必ず必要になる画像加工ツール。

Adobe Fireworks CS6

こちらもMacromedia時代からお世話になっています。
後述するPhotoshopも使うには使うのですが、私はデザインを作るわけではなく、出来上がっているデザインからWeb用の画像へスライスするのに使いますので、圧倒的にスライスの使い勝手が良いFireworksをメインに使っています。
イラレやフォトショで作られたデザインからパーツ毎にFireworksに持ってきてスライスをかけて切り出しを行っています。
AdobeCCになってから新バージョンの開発が打ち切られたようですが、こちらもいつまで使えるのでしょうか。私のようなFireworks信者も少なからず居るはずです。
「AdobeCCに入っているのは知ってるが、使ったことは無いな。」と言う方、スライス専用ツールとして一度使ってみてはいかがでしょうか？

Adobe Photoshop CS6

王道フォトショ。Web制作の現場において使えないと始まらないツールではありますが、デザイナーではないのでガッツリとは使っていません。
デザインデータがPhotoshopであがってくることもあるのと、文字通り写真の加工（切り抜きや色味の調整など）に使っています。
また、最近は必須とも言えるfavicon画像はPhotoshopのプラグインを使って作っています。

Adobe Illustrator CS6

王道イラレ。こちらも無くてはならないツールではありますが、これでデザインデータがあがってくることがほとんどなので「イラレデータからパーツ毎にFireworksに持ってきてスライスをあてて切り出す」の流れが私の主な使い方です。

ブラウザツール（アドオン）

デバッグツール Firebug

Firefoxのアドオンとして使用するデバッグツールです。各種ブラウザに標準でデバッグツールがありますが、なんだかんだでこれが一番わかりやすいと思います。

スクリーンショット Fireshot

こちらもFirefoxのアドオンです。画面の外側の領域も含めてスクリーンショットを撮るツールです。

IE11 開発者ツール

IE11上で「F12キー」を押すと出てきます。主に旧IE系の表示確認に用います。

FTP・SCPツール

FileZilla

FTPのアップロード、ダウンロードツールにはFileZillaを使っています。
FFFTPを使っていた時期が長かったのですが、いろいろ問題があったり、MacでもWindowsでも両方使えるツールということで乗り換えました。
アップデートが比較的頻繁で安心できそうってのも最近は乗り換えて良かったなと感じます。

WinSCP

上記FileZillaがあればほとんど事足りてしまうのですが、例えば
「テスト環境と本番環境でアップロード用ツールを使い分ける」ことにより、本番環境へテスト用データやファイルをあげてしまうといった重大なミスを未然に防ぐ事ができると思います。
同じようなミスを経験したことのある方、是非アップロードツールの使い分けをお試し下さい。

圧縮・解凍ツール

CubeICE

WebデザイナーはMacで制作を行っている方がほとんどで、Mac環境で制作したデータをzip圧縮してファイル転送サービスで送る事が多いと思います。
そのようなデータを私のようにWindows環境でデザインデータを開こうとすると文字化けが起きたり、不要なファイルが生成されたり不都合があります。
特にIllustratorデータに組み込まれる画像ファイルが日本語名だったりすると文字化けが起こってまともにデータが開きません。
そんなMac・Windows間のデータのやり取りで使えるのがこのCubeICEです。Mac側は今まで通りで特に気にすることも無く、zipを解凍するWindows側だけがこちらのツールで解凍するだけです。
Mac使いのデザイナーに配慮するWindows使いの真摯な対応の構図です。

その他オンラインサービス

diffツール

HTMLやCSSなどのファイルを更新する際、現行ファイルと前回更新したファイルを確認して、それにならって新たに更新を行うということがあります。
「どこをどう更新したのか」を知るために、2つのファイルの更新されている箇所（異なっている箇所）を確認するのに使うのがdiffツールです。
Google先生に「diff　ツール」などと検索すればオンラインdiffツールがいっぱいでてきます。

画像圧縮サービス

現行サイトをスマホ対応するとき、PC用の画像をスマホでも流用しますので画像ファイルサイズが大きいとページの表示速度が遅くなってしまいます。
一般的にページ表示に2秒かかってしまうと閲覧者は出て行ってしまうと言われているので、なるべく画像データは軽くしたいところです。
そんな時にWeb上で画像の劣化を抑えた状態で圧縮してくれるサービスがあります。
こちらも検索してみるといろいろ出てくるので調べてみてください。
フォルダごと一気にやってくれるところもありますので何かと重宝します。

ベクターデータ作成サービス

「画像ファイル自体はあるのにイラレデータが無くて大きな画像が作れない。」といったことがたまにあります。
ロゴやシンプルな画像であれば簡単にベクターデータにしてくれて、大きな画像が使えるようになります。
形や加工元データによってはイマイチな仕上がりになることもあるので、そこから更に自分で加工を行う必要はあると思います。

最後に

改めてこうやって自分の使っているツールを並べてみると、とりたてて珍しくもなくありきたりなツールばかりだなと感じました。
ありきたりであるからこそ、ネット上で基本的な使い方や便利な使い方が溢れており、開発がしやすいとも言えます。

やはりAdobe系のツールに頼ることが多く、Microsoft Office、AdobeCC（CS）系はビジネスの世界ではデファクトスタンダードなのだなと改めて実感しました。

最近はHTML5とCSS3、jQuery、レスポンシブデザイン（スマホ対応）に慣れてきて、徐々に使いこなしつつあるかなと思っています。
今はSEOやアクセス解析を勉強・実践中ではありますが、今後のエンジニアとしての技術面では「Sass」や「Emmet」などで作業効率を上げる方向に持っていければと考えています。