logo

back DIARY

最近流行りのウェブ開発系ツールまとめ(主にデザイン)

2013年08月22日

最近、ウェブデザイン周りの優良ツールがたくさん出てきていて、しかもちゃっかりみんな買っちゃうしアドオン系のソフトウェア界隈にも良い流れを感じるこのごろ。今回は、ぼくが買ったツールのうちこれは手放せないなとおもったものをピックアップしてアフィリンク付きでゲス顔で紹介したいと思います。主にMacです。

マークアップ系

Slicy

PSDファイルから画像素材が出力できるアプリ。PSDファイルを読み込ませるだけでほとんど自由自在に画像素材を書き出せます。使い方はPhotoshopのレイヤーやフォルダに.pngなどの拡張子をつけておくだけ。

マークアップするときの画像書き出し作業が全然億劫じゃなくなったのが一番嬉しい。一度読み込ませると、あとはPSDが更新されたら自動で書きだす機能なんかもあります。スマホのRetina用に半分の画像も一緒に書き出せたり、MacのRetina用に二倍の画像も一緒に書き出せます。もはやこれなしのマークアップはやれないレベル。 slicy

CSS Hat

PhotoshopのレイヤースタイルをCSSにして出力してくれるプラグイン。CS6以降のPhotoshopでもこういったCSSで書き出し機能は標準でついていたり、サードパーティ製のプラグインもあったりしますが、これらがまだ実務レベルとは言えないなかこのCSS Hatだけはかなり頼れる精度で出力してくれます。レイヤースタイルの再現のほか、文字サイズ・カラー・書体、シェイプの要素のサイズ・角丸の大きさも出力してくれるのが地味に嬉しい。ボタンやフォームなどCSSで再現するようなマークアップが爆速になります。

マークアップエンジニアも楽になるし、デザイナーも細かいレイヤースタイルを確実に再現してもらえるしだれも損をしない。素晴らしい。 CSS Hat

Codekit

LessやSassなどのコンパイルを簡単に設定できるアプリ。いまや定番となりつつあるCSS拡張メタ言語ですが、易しいUIで設定できるのでとても便利。Compass対応やライブプレビューなど、できることも多いです。 Codekit

デザイン全般系

Ember

デザインクリップやデザインにつかう画像素材をまとめておけるアプリ。ウェブサイトのスクショや素材管理がかなり楽になります。Emberについてはこちらでも紹介させていただきましたので詳しくはそちらで。 Ember

Skala Preview

Photoshopの画面をリアルタイムにスマホ・タブレットで確認できるアプリ。スマホのデザインって実機で頻繁に確認しないとすぐにトチ狂ったようなデザインになるので、いちいち保存してDropboxにあげて…みたいな作業がまるで短縮できるのが素晴らしいです。ただちょっとフォトショの動作が重くなるのが玉にキズ。 スマホ確認がここまでシームレスにできるのは素晴らしいです。

その他

Coda2

とても優秀なエディタ。サイトごとにディレクトリやFTPなどの情報を管理できたり、サーバー上のファイルを直接いじれたり、スニペット管理がとても便利。なによりUIが直感的でわかりやすいです。サイトやスニペットがiCloudで同期できるのも素晴らしい。Codaからのアップデートで少し重くなってしまっていたり、Sublime Textとかも出てきてますが、いまでもぼくはこれが一番好き。

あと、ターミナルがCoda上で開けるのも便利で、ターミナルタブを開いて一瞬でrails sできるのがいいです。あとgitやsubvarsionも設定できるみたいですがぼくはあんまり使ってません。 Coda2

Parallels Desktop

無料じゃない仮想デスクトップアプリ。正直実務でVirtual Desktopを使っている人はかなり損をしてると思ってしまうほど。無料のものと比べるびっくりするくらいサクサクで、フルスクリーンで使えるので全くストレスなくWindowsの確認ができます。

Parallels Desktop

まとめ

特に最近はすごい勢いでこういった便利なツールがでてきていて、僕自身だいたい2000円くらいでもわりと買うことに抵抗を覚えなくなってきているのもあってかなり市場として成長してきているのを感じます。この勢いでもっと革新的で便利なツールがでてきて欲しいですね!

シェアしてね

2013年08月22日

, , , , , , , , , , , , , , , ,

top TOP
自己紹介
picture
KEISUKE TSUKAYOSHI

UX Designer / UI Designer.

株式会社Fablicでフリマアプリ"FRIL"などの事業サービスのプロダクトマネジメントやデザインを担当しています。

実績など詳しくはこちら

copyrights(c) Keisuke Tsukayoshi.