[M]フリーランスWEB屋な私のデザイン制作環境公開！WEBデザインを完成させるまでのツールまとめました

こんにちは！みう(@miu0512)です。現在フリーランスの私がWEBデザインを行うのに使っているツールをまとめました。制作環境は人によって違いますので、一番大切なのは自分に合った環境を整えること！それでは大公開です。

iMacを購入するまでの間、WinとMacを交互に使っています。

家にあるデスクトップは27インチのWindows。ずっとWinだけで制作を行ってきたのですが、MacBook Airを購入してからMacに使いやすいツールが多いことを知り、今ではWinとMacを使い分けて作業をしています。iMac購入予定！

デザインは王道のこのツール！手放せません

昔は高価で手が出せなかったAdobeですが、今では毎月3,000円〜5,000円と手軽に使用できるようになりました。

Adobe PhotoShop

主にWEBデザインのラフを作っているソフトです。フォトショは「写真加工・補正」などに優れているツール。そのためとても綺麗なデザインをすることができます。書き出しも簡単なので、WEBデザインをするならまずフォトショを覚えておくことをおすすめします。

Adobe Illustrator

主にチラシやDMなど印刷物を作っているソフトです。イラレは「イラスト・DTP」などに優れているツール。そのため、どれだけ拡大しても綺麗でなめらかな仕上がりになります。フォトショ＋イラレがあればある程度制作物を作ることが可能。

デザインが完成したらMacでスライスしています

Slicy(Mac)

フォトショのレイヤーに「●●.png」などの名前を付けてあげるだけで、簡単にスライスが可能になる便利なツール。背景を気にせず、しかもまとめたいレイヤーはグループにして名前をつければ、その通りに画像として書き出してくれるのでオススメです。

スライスが完了したらいよいよコーディング

Sublime Text

万能なメモ帳ですが、Sublime Textの魅力は2つ。ショートカットや機能が優れていて、操作性が良いこと。そして、「Emmet」をインストールすることで、マークアップの速度が約5倍になるほど効率化出来ること。特に一番使うのは「Ctrl+D」です。

Coda(Mac)

SaSSを覚えるべく、そしてプレビュー機能は「Sublime Text」よりも優れているため、こちらもたまに使います。まだちゃんと使いこなせていないのですが、MacBook AirよりもiMacで本領発揮しそうな予感です。

HTMLマークアップが完了したらCSSで装飾

FTPツールは有名どころを使用しています

FileZilla(Win)

ファイルの転送がかなり速いWindows向けのFTPクライアント。FFFTPよりも複雑ですが、大量のページをアップしてもほとんど一瞬で転送が完了します。

Transmit(Mac)

Macで主に使っているFTPアプリ。その前はアヒルちゃん（Cyberduck）を使用していましたが、転送速度が速く、管理もしやすいのでこちらに乗り換えました。

サーバーにアップしたらブラウザデバッグ

IE・Safariは省略しています。

Firefox

私がWinで一番多く使っているブラウザ。アドオン「Firebug」でHTMLやCSSなどの細かい修正を行うのに便利です。「Firebug」は他の方のソースを解析したり、手を加えてみたりすることも可能なのでオススメ。

Google Chrome

主にMacで一番多く使っているブラウザ。なんといっても軽い！拡張機能「Keyconfig」を使うことでさらに使い勝手が良くなります。

最後の仕上げ

CSSを整えて綺麗なソースにする「CSS Beautify」を施して納品

過去記事：[M]5秒でCSSを整形するツール「CSS Beautify」で、ソース見られても恥ずかしくないCSSに！

さいごに・・・

デザインからサーバーアップまで、いかに効率よくすすめることが出来るかによって、作業スピードが変わります。色んなツールを試して、今はこの流れが一番速く効率的に仕事をすすめることが出来るフローになりました。他にもオススメなツールがあったら教えて下さい！

最後までお付き合いいだだきありがとうございます！

これからも、みう(@miu0512)を応援していただけたら嬉しいです！