読者です 読者をやめる 読者になる 読者になる

LCL エンジニアブログ

夜行バス比較なび・格安移動を運営する 株式会社LCLのエンジニアブログ

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

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

今までの確認方法

  1. スクリーンショットをクリップボードへコピー(Macなら⌘ + shift + 4 + control)
  2. スクリーンショットをPhotoshopへペーストして、不透明度を50%へ設定(もしくはレイヤーモードを「差の絶対値」に設定)
  3. ペーストしたレイヤーをPSD上で上下左右に動かしながら、ずれているピクセル数を計算してCSSへ反映
  4. ブラウザをリロード
  5. 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"

使い方

  1. ブラウザを開いておきます
  2. BrowserSync も起動しておきます
  3. LayerXを起動して、PSDファイルをドラッグ f:id:lcl-engineer:20160530201337p:plain
  4. ブラウザと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"]
}

まとめ

スクリーンショットを撮ってPSDで重ねる…を繰り返さなくてすむのは、けっこう快適です。 まだ使い始めたばかりなので今後課題が出てくるかもしれませんが、その際にはまた共有します。