デザインカンプからコーディングで重宝するツール

デザインカンプと1pxも違わないコーディングを行うには細かな確認が必要になります。
そんな時に役立つツールの紹介です。ただし、MAC専用です。

LayerX

psd形式を含めた画像ファイルを透明化してコーディングしたページと重ね合わせるとその違いが一目で確認できます。
そんな時に便利なツールが「LayerX」です。操作は簡単でショートカットキーで位置合わせなどを行うだけです。
Gulp + Browser-Syncなどで同期させておけば効率的にカンプとの誤差も解決できるでしょう。

LayerXのページへ

この領域に画像ファイルをドラッグ アンド ドロップします。

重ねた例。　ズレてますね。

Helium

HeliumはLayerX　の逆で、表示したページを透明化するものです。これも便利に使えそうですね。

Heliumのページへ

メニューバーから「Location」→「Open Web URL」からURLを入力します。

メニューバーから「Appearance」→「Translucency」→「Enabled」で透明化できます。

まずは使ってみましょう。