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

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

ざっと、

  • Generate Assets
  • Emmet
  • Sass/Compass

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

Generate Assets

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

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

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

メニューのここから、
tumblr_inline_n6dm3cU3uk1syzas3

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

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

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

Emmet

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

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

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

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

Sass/Compass

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

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

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

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

まとめ

tumblr_inline_n6dm68BtU51syzas3

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

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

フォローして続編をチェック

@universionsをフォロー