Generate Assets, Emmet, Sass/Compassを使った最速Web制作

今日は、普段Web制作をするときに使っているツールなどを全体のフローを通してご紹介したいと思います。

ざっと、

という３つにフォーカスを当てていきたいと思います。
とても最近の技術というわけでもないので、記事はたくさんあると思います。
ご紹介をさらっとしたいと思うので、お使いのエディタで導入する方法などは調べてみてください。

Generate Assets

これはPhotoshopの機能で、新しめのバージョンから導入されています。

以下の様な感じでカンプをつくって、

切り出しをしたいレイヤー名に拡張子をつけます。

メニューのここから、

するとこのように出力されます。

更新すると反映されるし、なによりスライスが苦手な人にはとてもおすすめです。
他にも@2xを自動で出力したり、Jpegの品質などを指定することができるようです。
Photoshopの機能として導入される前からslicyと呼ばれるものもあり、僕はそちらをよく使っています。

PhotoshopのGenerate機能について詳しい説明はこちら（Adobeサイト）からどうぞ。

Zen-Codingが新プロジェクトネーム「Emmet」として2013年初頭にリリースされました。
こちらのツールはコードを簡略化して書き、その場で展開することができます。

奥が深いので、いろいろな書き方があるのですが、シンプルに…。
このように書いて、

こんな感じで展開されます。

例えば複数書くリストを1行でかけたり、番号なんかは連番をつけたりといったこともできます。
Emmetにバージョンアップしてからは、ダミーテキストなんかをいれることもできます。

CSSを構造的に書くために欠かせないツールです。
.main .main-box .title
のようなものが乱立したり、カラーコードが毎回書かれていても
追記するときは非常にわかりにくくメンテナンス性が低いですよね。

入れ子にしたり変数を使ったりして書いておいて、

CSSを生成してくれる、というものです。

メリットとしては普通のCSSの書き方で書いても問題ないので、覚えた効率的な書き方だけを実践していくやりかたでも不具合がでないという点ですね。

今回は実際の制作作業を効率的にする機能をご紹介しました。

いろいろなツールが世の中にはあるものですねー。
みなさんが、自分に合うツールと巡り合えれば何よりです。

Tsukasa Nagata

株式会社ユニマル代表取締役COO。「Web制作チームのためのクリエイティブ・プラットフォーム『universions』」では、UIデザイン・開発とマーケティング、色んなところに遊びにいくのが担当。