Photoshop不要！ブラウザにPSDを重ねてコーディングする方法

フロントエンドエンジニアの岡田です。
弊社ではデザイナーとフロントエンドエンジニアで分業をしていることもあり、HTML/CSSコーディングの際にはデザインカンプ（PSD）にスクリーンショットを重ねて確認しています。
ですが、この作業、少し面倒ですよね…
今回、LayerXとBrowserSyncを導入して少しだけ快適になったので紹介します。

今までの確認方法

スクリーンショットをクリップボードへコピー（Macなら⌘ + shift + 4 + control）
スクリーンショットをPhotoshopへペーストして、不透明度を50%へ設定（もしくはレイヤーモードを「差の絶対値」に設定）
ペーストしたレイヤーをPSD上で上下左右に動かしながら、ずれているピクセル数を計算してCSSへ反映
ブラウザをリロード
1〜4の繰り返し…

f:id:lcl-engineer:20160529063102p:plain

上記の3. の作業でPSDとスクリーンショットの位置を揃えるのも面倒ですし、間違えた方向に値を増やしてしまい、さらにずれてしまった… という失敗をすることもあります。

そこでLayerX と BrowserSync を導入すると…

LayerX でブラウザにPSDを重ねることができるようになるので、

f:id:lcl-engineer:20160530200918p:plain

BrowserSyncを起動しておけば、ファイルを変更するたびにブラウザが自動でリロードされ、常にPSDとの差分チェックができます。

導入方法

LayerXインストール

LayerXのサイトからインストール f:id:lcl-engineer:20160528231518p:plain ※「Downloand LayerX 1.1.1」ボタンでダウンロードできます

BrowserSync

gulpやgrunt等のタスクランナーを使っても良いのですが、今回は使わない方法を説明します。 node.jsが必要です。

インストール

$ npm install -g browser-sync

起動

$ browser-sync start --server --files "*.html","css/*.css","js/*.js"

※起動のコマンドは、サイトルートのディレクトリで実行してください
※ --files 以下は適切なパスに変えてください
※VagrantやVirtualBox等でローカルーサーバーが存在する場合は、「--server」ではなく「--proxy」を指定します

$ browser-sync start --proxy test-domain.co.jp --files "app/views/**/*.html.*","app/assets/sass/**/*.scss","app/assets/javascripts/**/*.js"

使い方

ブラウザを開いておきます
BrowserSync も起動しておきます
LayerXを起動して、PSDファイルをドラッグ
ブラウザとPSDの位置を合わせて差分チェック

補足

LayerXで開いたPSDはロックできるので（Macの場合は⌘ + L）Chromeのデベロッパーツールなども使えます
BrowserSync起動時に表示されるExternalのURLを使うと、同じネットワーク内のスマホや他のPCからもアクセスできます
BrowserSyncの設定は、設定ファイル（bs-config.js）に保存しておくことができます。

$ browser-sync start --config bs-config.js

bs-config.js

module.exports = {
    files: ["*.html*", "css/*.css", "js/*.js"],
    server: {
        baseDir: "public",
        index: "index.html"
    },
    browser: ["firefox", "safari", "Google Chrome"]
}