投稿日：2016年11月22日

帰山です

adobeのCreative Cloudに「Creative Cloud エクストラクト」という機能があります。
Creative Cloudについては私も正直きちんとわかっているわけではないので説明出来ませんが。adobeのアカウントを持っていれば無料でもいくつかの機能が利用できます。
その中の一つがエクストラクトです。

簡単に言えばフォトショップで作ったウェブサイトのデザインをコーディング用のデータとして使いやすく表示させてくれる機能です。

Creative CloudというCloud上のフォルダにＷＥＢサイトのデザインカンプ用のpsdファイルなどを入れておけば、それを開いてそこからデザインのcssなどを表示してくれたり、テキストをコピーしたり、画像を保存できたりします。
これまでデザインカンプ画像からコーディングする場合はフォトショップを開き、そこでcssを読んだり画像を保存したりということは出来ましたが、どれもひと手間かかっていました。それがエクストラクトだと画像をクリックしながら、簡単に素早くそういった作業が行えます。
特に便利なのは、デザインカンプでは要素と要素の間の幅や高さのpxは選択ツールなどでいちいち測らなければいけなかったのですが、エクストラクトでは少しの操作で要素の寸法や周囲の要素との距離などを出してくれます。

これが無いとコーディング出来ない、というくらい便利です。

ＷＥＢサイトコーディングに役立つツールはいくつもありますが、このような感じの劇的に便利なツールをもっと探して使いこなせれば……と思います。
とりあえず今もっと使いこなしたいと思っているのはchromeのデベロッパーツールです、なかなか高機能で使いこなせばかなりの便利ツールです。