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

2015/11/19 サイト制作, 技術系 投稿者:竹内

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

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

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

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

Adobe Design and Web Premium CS6

img_tool01

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

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

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

Crescent Eve

img_tool02

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

HTMLやCSSの入力補完の他に、SHIFT+Enterで改行タグを打てたり、CTRL+Enterで閉じタグを打てるのが気に入っています。
タグ打ちの時に閉じタグまで自動で入れてくれるツールがありますが、私は自分で任意に打てる方が好みです。
JavaScript系のファイルで改行が無くずらずらっと書かれているファイルを開こうとすると固まってしまうのが唯一の欠点です。

Adobe Dreamweaver CS6

img_tool03

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

Adobe Brackets

img_tool04

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

画像加工ツール

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

Adobe Fireworks CS6

img_tool05

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

Adobe Photoshop CS6

img_tool06

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

Adobe Illustrator CS6

img_tool07

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

ブラウザツール(アドオン)

デバッグツール Firebug

img_tool08

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

スクリーンショット Fireshot

img_tool09

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

IE11 開発者ツール

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

FTP・SCPツール

FileZilla

img_tool10

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

WinSCP

img_tool11

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

圧縮・解凍ツール

CubeICE

img_tool12

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」などで作業効率を上げる方向に持っていければと考えています。

カレンダー

      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728     
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
1234567
891011121314
15161718192021
22232425262728
29      
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
      1
2345678
9101112131415
16171819202122
232425262728 
       
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
     12
3456789
10111213141516
17181920212223
2425262728  
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       

カテゴリー

PRODUCE ネディアプロデュース
群馬データセンター
群馬の法人ITサポートサービス Wide Net[ワイドネット]
ワイドオフィス
イヤホンのブランドでハイクラスを誇る | n+um(エニューム)