こんなエントリーは去年末か年明けに書いておけ！って思いますが、blogを書く練習としてまとめます。
これから列挙するツールを使う事により、去年は手を動かす事の楽しさを再確認。 いままでダルかった作業が楽になるだけではなく、HTMLをキレイに書けたり構造を考えるようになったりと一石二鳥。
SASS and Compass
全俺が感動し、咽び泣くほど無くてはならない存在となったHtmlコーディングの革命児。 なぜすぐに導入しなかったのかと過去の自分に言いたいぐらい！
いまさら解説はいらないと思いますので、お世話になったサイトをご紹介いたします。
- CSS書くならCompass使った方がいいよ。SASS使ってる人なら特に。
- Sprite画像でもう悩まない？！SassとCompassで速攻Sprite画像を作る方法に感動！ | バンクーバーのうぇぶ屋
- CompassでCSSスプライト[to-R]
- CompassでCSSスプライト（Retina対応） | clear sky source
- パフォーマンスからみるSass/Compass 第2回：CompassによるCSS Sprite | MOL
Slicy
【Webデザイナー・コーダー向け】震えるほど便利なPSDスライスツール「Slicy」で書きましたが、本当に便利。
Slicyを使うまでは、Fireworksの切り抜きが最強だと思っていましたがPSDでも何でもかかってこい！って感じです。 本当に感動するので、騙されたと思って使ってみてください。
CSS3Ps
Fireworks CS5.1からある「Fireworks CSS3 Mobile Pack」の様な機能をPhotoshopでも使えるようにするプラグインです。
CSS3Ps - free cloud based photoshop plugin that converts layers to CSS3 styles.
選択したレイヤーの幅や高さグラデーション、ボックスシャドウ、角丸、テキストシャドウなどをCSSのコードにしてくれます。また、SASS / SCSSへの対応も！！
これでまたコードを書く時間がさらに短縮！
LiveReload 2
作業ディレクトリを指定しておき編集するhtmlファイルにJSのコードを1行張っておくと、保存する度に自動的にリロードを行ってくれる素敵ツールです。
SASSの監視・コンパイルもしてくれるので、手間が2個も3個も減ってハッピー！
これもコーディングには無くてはならないツールの一つです。
Prototypes
業務でも大活躍！画像だけでiPhoneアプリの簡易モックが作れるアプリです。
FireworksやPhotoshopで画像をつくりPrototypesに取り込んでリンク付けするだけで、画面遷移が実機を使って確認する事ができます。
UI検証や提案時の武器として効果大！
値段の割にはiPhone5の画面サイズに対応していなかったりしますが、それでも大変お世話になったアプリのひとつ！
まとめ
たいぶhtmlコーダー・ディレクターさん向けになってしまいました。
お金がかかるツールも多いですがその分楽になるはずなので、導入を全力でお勧めしたいツールばかりです。
今年もおせわになります！
