Photoshopのデザインデータをエンジニアに引き継ぐ際に利用したいハンドオフツール「Zeplin」の使い方|Dearps

ogp

Webサイトやアプリを制作する際にデザインとコーディングを分業化している会社さんは多いと思います。

その場合よく課題にあがるのがデザイナーとエンジニア間の連携について。
デザインカンプとコーディングされた仕上がりの差を極力なくすためにデザイナー側でマージン、フォント、カラーなどを細かく指定したコーディングガイド(以下ガイド)を作成するのですが、これがけっこう面倒な作業で時間もかかります。

これデザイナーにとって過去のスライス作業並みにモチベーションが下がります↓↓↓

この面倒なガイド作成を猛烈楽にするサービス「Zeplin」を紹介します。

Photoshopからプラグインを使用してZeplinにデザインデータをアップすることにより自動でコーディング ガイドが作成されます。これを他メンバーと共有することにより招待されたメンバーはPhotoshopがなくてもブラウザ上から要素のサイズやマージン、カラー、フォントといったコーディングに必要な情報を取得できるようになります。さらには画像書き出し、スタイルガイドの作成、コメントなど様々な機能が用意されています。

Zeplinは先日公開されたAdobe XDの最新アップデートでも連携が発表されるなど注目度の高いハンドオフツールです。Bracketsavocodeなど他のハンドオフツールも試しましたがZeplinが機能、操作性共にNo.1だと思ったので今回紹介させていただきます。

ZEPLINの使い方

1)まずZEPLINのサイトから会員登録をします。

zeplin会員登録

2)自分のOSのアプリをダウンロードします。

OSを選択

3)ダウンロードしたZeplinのアイコンをアプリケーションフォルダに移動します。

アプリインストール

4)アプリケーションフォルダ内のZeplinをダブルクリックして立ち上げます。ログイン画面が表示されるのでメアドかユーザー名とパスワードを入力してログインします。

ログイン画面

5)以上でインストールが完了です。

ZEPLINインストール完了

1)Zeplinメニュー/Photoshop Integration/install Pluginを選択してPhotoshopにZeplinのプラグインをインストールします。

ZEPLINプラグインをインストール

2)Photoshopを起動(起動した状態の場合は再起動)してウインドウメニュー/エクステンション/Zeplinを選択してZeplinパネルを表示しします。

PhotoshopでZEPLINパネルを表示

3)Zeplinアプリを開きます。最初はプロジェクトが何もない状態なので新しいプロジェクトを作成します。

新しいプロジェクトを作成

4)作成するプロジェクトタイプを選択します。今回はデスクトップサイトなのでWebを選択します。

プロジェクトタイプを選択

5)まずプロジェクト名を入力します。

プロジェクト名を入力

6)Photoshopでデザインカンプを開きZeplinにアップロードするアートボードを選択します。アートボードを使用していない場合はレイヤーパネル上ですべてのレイヤーを選択した状態でレイヤーメニュー/新規/レイヤーからのアートボードを選択してアートボードを作成します。

アートボードを選択

サンプルで作成したデザインカンプはこちらからダウンロードできるのでテスト用にお使いください。

7)ZeplinパネルのExportボタンをクリックします。

2_7

8)アップロードするプロジェクトを選択してインポートボタンをクリックします。

インポート

9)等倍でデザインしている場合はそのまま1xにチェックを入れた状態でChooseボタンをクリックします。アップロードが開始されます。(2倍で作成している場合は2xをチェックします。)

upload

10)アップロードが完了するとZeplinアプリが表示されます。プロジェクトをダブルクリックするとプロジェクトが開きます。

アップロード完了

画面一覧

Projects

プロジェクトの一覧が表示されます。無料版は1プロジェクトに限定されます。

projects

Dashboard

ダッシュボードにはプロジェクトの画面一覧が表示されます。(サンプルは1つのアートボードのみアップしていますが複数のアートボードをアップすることが可能です)
この画面からメンバーを招待することができます。

Dashboard

Styleguide

プロジェクトに使用されている汎用的な色情報(Color Palette)やフォント情報(Font Book)を登録するとこの画面でスタイルガイドとして表示されます。

スタイルガイド

(Tab Menu 1)Information

デザインカンプに関する情報が表示されます。

 Information

(Tab Menu 2)Colors

デザインカンプに使用されている色情報が表示されます。

Colors

(Tab Menu 3)Assets

Photoshop側で書き出し設定をするとここに書き出し画像が表示されます。詳しくは画像の書き出し設定をご覧ください。

Assets

(Tab Menu 4)Notes

コメントの一覧が表示されます。コメントの方法はコメント入力をご覧ください。

Comment

プロジェクトのデザインカンプを開いた状態で情報を知りたいパーツをクリックします。するとサイズやマージン、CSS情報などが表示されます。

要素の確認方法

1)Photoshopのレイヤーパネルで書き出すレイヤーまたはレイヤーグループを選択します。次にZeplinパネルを表示して「Mark as asset」ボタンをクリックします。するとレイヤー名の頭に-e-という文字列が追加されます。

4_3_1_assets

2)書き出すパーツすべてに書き出し設定ができたらアップするアートボードを選択した状態でZeplinパネルのExportボタンをクリックします。

4_3_2_assets

3)パネルの画面が切り替わるのでアップするプロジェクトを選択して「Replace screens with the same name」にチェックを入れた状態でInportボタンをクリックします。(同名画面を上書き保存する)

4_3_3_assets

4)Zeplinでアップしたデザインカンプを開きAssetsタブを開き、さきほど書き出し設定をおこなったパーツのサムネイルが表示されていることを確認します。この画面から直接Web用画像を書き出すことができます。

4_3_4_assets

5)All assetsボタンをクリックすると書き出しファイル名の命名規則を設定することができます。レイヤー名のままにする場合はOriginalを選択します。

4_3_5_assets

1)コメントを入力する場合はコメントしたい箇所にカーソルを合わせてcommnd + クリックします。入力フィールドが表示されるのでコメントを入力してPostをクリックします。

4_4_1_notes

2)Notesタブを表示すればコメントの一覧を表示することができます。

4_4_2_notes

Dashboard画面のInviteボタンをクリックすると招待者のメールアドレス入力フィールドが表示されるので入力して招待します。

招待者にZeplinから招待メールが送信され招待者はメンバーに加わりプロジェクトを閲覧やコメントができるようになります。

3_Inviite

汎用的なフォント情報や色情報は登録することによってスタイルガイドに記載することができます。登録するにはパーツを選択した状態で表示された情報の右側にあるアイコンをクリックしてチェックをいれます。フォント情報は[Aa]アイコン。色情報は[水滴]アイコン。

styleguide

Colorsタブからも色情報を登録することができます。

要素の情報の確認

登録された情報がスタイルガイドにまとめられて表示されます。

4_5_3_styleguide

以上がZeplinのご紹介でした。今回デザイナーとエンジニアとの連携ということでZeplinを紹介しましたがコメント機能などを活用してディレクターとのやりとりにも活用できるアプリケーションです。デザイナーxエンジニアxディレクターとの連携でお悩みの方は是非お試しいただければと思います。

Web用画像のカラープロファイルの埋め込みについて

ogp

みなさんはWeb用に画像を書き出す際、カラープロファイルってどうしていますか?

カラープロファイルとはざっくりいうとWebサイトを見る人の環境による画像の色の違いを極力なくして同じ色で表示させるためのデータです。

私の場合は基本カラープロファイルは埋め込まないのですが色が重要な写真にはsRGBのカラープロファイルを埋め込むようにしています。その理由は以下の通りです。

まずはこちらのページをご覧ください→カラープロファイルテストページ

大抵の方の場合は下記画像のようにカラープロファイルが埋め込まれている画像も埋め込まれていない画像も同じように表示されているかと思います。

chrome

しかし一部の方の環境によってはデザイナーが意図していない状態で表示されているかもしれません。

safari(Version6〜)やChrome(Version61〜)ではカラープロファイルが埋め込まれていない画像はsRGBとみなして表示するので問題ないのですがFirefox(Version58現在)が曲者です。広色域ディスプレイ+Firefoxの組み合わせで見ると下記のような感じで表示されます。(こちらの画像はイメージです。sRGB画像で擬似的に表現するために加工しています)

firefox

彩度が高く(設定による)、人物の場合は大抵赤ら顔になってしまいます。ごく少数のユーザーとはいえ化粧品の宣伝用画像だったりしたら致命的ですよね。某有名化粧品メーカーの画像もカラープロファイルが埋め込まれていないので広色域ディスプレイお持ちの方はサイトをFirefoxとsafariで比較するとよくわかると思います。

書き出し画像にカラープロファイルを埋め込む事でこの大きな差異を防ぐことが出来ます。

写真以外にカラープロファイルを埋め込む場合は注意が必要です。カラープロファイルテストページの左側の青の部分ですが背景をCSSで青(#218dd9)にしてそのなかに同じ青(#218dd9)で色付けしたロゴ画像を配置しています。

上の画像のように広色域ディスプレイ+Firefoxのような組み合わせの場合、画像部分にカラープロファイルを入れるとCSS部分は彩度高めで表示されて画像部分はsRGBで表示されるので差異が生じてしまいます。最初に「基本カラープロファイルは埋め込まない」と書きましたがこのような理由から写真以外はプロファイルを埋め込まないようにしています。

img

写真にカラープロファイルを埋め込むには 「書き出し形式」や「Web用に保存(従来)」を使って書き出します。保存ダイアログで「sRGBに変換」と「カラープロファイルの埋め込み」にチェックを入れて保存します。

cap

ちなみに「画像アセット」で書き出された画像はカラープロファイルが埋め込まれません。

01

自分はWeb用画像を書き出す場合ほぼ画像アセットで書き出しているので不便でどうにかできないかということで書き出された複数の画像に対して簡単にsRGBのカラープロファイルを埋め込む事が出来るTipsを開発しました。

複数の画像に対してあっという間にカラープロファイルを埋め込む方法について

カラープロファイル(sRGB)埋め込み用データ一式をダウンロード

DOWNLOAD

(1) ダウンロードしたzipファイルを解凍して「スクリプトフォルダ」内の「Dearps_sRGB_jpg.jsx」と「Dearps_sRGB_png.jsx」をPhotoshopのスクリプトフォルダに移動します。
MacOS X: /アプリケーション/Adobe Photoshop□/Presets/Scripts

(2)Photoshopを再起動します。

(3)カラープロファイルを埋め込みたい画像ファイル(フォルダでもOK)を選択して「ドロップレット」フォルダの中の「sRGB_jpg.app」もしくは「sRGB_png.app」にドラック&ドロップします。
(jpgの場合→「sRGB_jpg.app」、pngの場合→「sRGB_png.app」)

03

すると元データにカラープロファイル「sRGB IEC61966-2.1」が埋め込まれた状態で上書き保存されます。(上書き保存なので必要に応じて要バックアップ)

ちなみにドロップレットはどこに保存しておいてもOKです。

是非お試しください。

Photoshopでの整列を超絶スピーディにする「移動」 エクステンションを作ったよ(無料) | Dearps

ogp

Photoshopでレイヤーを選択範囲を基準に移動したい場合、例えばこんな感じで↓

1
「上端揃え」+「水平方向中央揃え」といった形で2つの整列の組み合わせをすることが多いと思います。更に厳密に言えば最初に「カンバス全体に選択範囲を作成」して「移動ツール」に持ち替えてといったフローも必要です。

しかし今回配布するエクステンションを使えば↓のように1クリックでレイヤーを移動することができます。

2

・カンバスを基準にする場合はそのまま「移動」エクステンションのボタンをクリック。

・選択範囲を基準にする場合は選択範囲を作成して「移動」エクステンションのボタンをクリック。

・数値を指定してオブジェクトを移動したい場合は右側の「水平移動」または「垂直移動」をクリックします。するとダイアログが表示されるので移動する数値を入力して移動をクリック。

3

「移動」のインストール方法について

「移動」エクステンションをダウンロード

DOWNLOAD

ダウンロードしたzipファイルを解凍します。

解凍されたフォルダ「Move」を下記ディレクトリに移動します。

【Mac OS】 Library/Application Support/Adobe/CEP/extensions

ライブラリ(Library)は通常表示されないのでaltキーを押しながらFinderメニュー/移動を開くと下記画像のようにライブラリが表示されます。

Photoshopを再起動します。

メニュー[ウインドウ]/[エクステンション]/[移動]を選択します。
以上で「移動」パネルが表示されて利用できる状態になります。

Adobe MAX Japan フォローアップ

photo

「Adobe MAX Japan」— 2017年11月28日(火)パシフィコ横浜
ベテランほど知らずに損してるPhotoshop[MAX Special]

Adobe MAX Japan Photshopセッションにて鷹野雅弘(スイッチ)さんと登壇させていただきました。ご来場いただいた方はありがとうございました!
私のパートでお話させていただいたエクステンションなどのURLをお知らせします。
またセッション中に使用したWebサイトのサンプルデータとセッションで紹介したBootcomp3の重要機能だけに絞ったコンパクト版をMAX Editionとして作成したので配布させていただきます。
ぜひご利用ください!
max

「フォローアップデータ」をダウンロード

DOWNLOAD

画像アセット用リネーム エクステンション「Asset Renamer」
http://dearps.lovwar.com/2017/11/03/asset-renamer/
Bootcomp3.0
http://dearps.lovwar.com/bootcomp/

Creative Cloud ライブラリとは?
https://helpx.adobe.com/jp/creative-cloud/how-to/creative-cloud-libraries.html

Adobe Stock
https://stock.adobe.com/jp/

Webデザイン効率化エクステンション「Bootcomp 3」リリース

Bootcomp3

Webサイトのデザインをもっと効率的に、もっと早く。

本日Bootcomp3を公開しました。アップデート内容は下記になります。

①ぶっこみ機能(&リネーム機能)を追加

大量の画像をあっというまに配置して最適なサイズに自動でリサイズすることができます。
②水平垂直移動機能を追加
レイヤーまたはレイヤーグループを数値を指定して移動することができます。

他細かなバグを修正しています。

ダウンロードは「Bootcomp」の特設サイトから。

画像アセット用リネーム エクステンション「Asset Renamer」 CC 2018対応

mv

Photoshop CCからレイヤーまたはレイヤーグループの名前にファイル形式の拡張子(.jpg/.png/.gif)を追加することで自動で画像アセットが生成され、ソースの PSD ファイルと同じサブフォルダーに保存されるようになりました。

このリネームの作業を効率化させるために今までAdobeが公式に提供している「Adobe Layer Namer」を使用していたのですがPhotoshop CC 2018にアップデートしたら使用できなくなってしまいました。

なので急遽「Asset Renamer」というエクステンションを作成したので配布させていただきます。

「Asset Renamer」のインストール方法について

「Asset Renamer」をダウンロード

DOWNLOAD

ダウンロードしたzipファイルを解凍します。

解凍されたフォルダ「AssetRenamer」を下記ディレクトリに移動します。

【Mac OS】 Library/Application Support/Adobe/CEP/extensions

ライブラリ(Library)は通常表示されないのでaltキーを押しながらFinderメニュー/移動を開くと下記画像のようにライブラリが表示されます。

Photoshopを再起動します。

メニュー[ウインドウ]/[エクステンション]/[Asset Renamer]を選択します。
以上で「Asset Renamer」パネルが表示されて利用できる状態になります。

「Asset Renamer」の使用方法について

リネームしたいレイヤーまたはレイヤーグループを選択(複数可)して生成したい画像種類のボタンをクリック。

02

(1)1xで書き出す(8,24,32はPNG形式)

(2)1xと2xで書き出す

(3)2xでデザインデータを作成している場合に使用

下部の項目はjpg形式で書き出す際に使用。(50,80,100は画質)

Adobe Photoshop CC 2018がリリースされました。

cap

多くの機能が追加されましたが自分的に良いなと思ったのは下記の2つの機能です。
・レイヤーのコピー&ペースト
・プレーンテキストとして貼り付ける

新機能詳細は下記リンク先にてご確認ください。
新機能の概要 | Photoshop CC 2018 (Adobe 公式サイト)

アップデート方法は下記手順にて。
1)デスクトップ右上のCreative Cloudアイコンをクリック
2)Appsタブをクリック
3)Photoshop CCのアップデートをクリック
cap2

このバージョンアップでデバイスプレビュー機能が廃止されました。
Preview CCよく使う方は要注意です。
(最新版にアップデートするとCC 2017は消えますがCreative Cloud デスクトップアプリケーションからCC 2017を再インストールすることによって共存が可能になります。)

選択範囲をシェイプに変換するスクリプト

選択範囲をシェイプに変換するスクリプトを作成しました。

更新:2017.7.10
シェイプ変換後に属性パネルで幅、高さ、角丸を変更できるように改良しました。
「単位:px」でご利用ください。

スクリプトの利用手順について

選択範囲をシェイプに変換スクリプトをダウンロード

DOWNLOAD

(1) ダウンロードしたzipファイルを解凍して「Dearps_選択範囲をシェイプに変換.jsx」をPhotoshopのスクリプトフォルダに移動します。
Windows: C:¥Program Files¥Adobe¥Adobe Photoshop□¥プリセット¥スクリプト
MacOS X: /アプリケーション/Adobe Photoshop□/Presets/Scripts

(2)Photoshopを再起動してファイルを開き、選択ツールで選択範囲を作成します。

(3) [ファイル] / [スクリプト]から「Dearps_選択範囲をシェイプに変換.jsx」を選択すると選択範囲がシェイプに変換されます。

私はこのスクリプトにショートカット(command+U)を設定しています。
またファイルメニュー[選択範囲]/[選択範囲を変形]にも(command+Shift+T)を設定することによりさらに作業の効率化がはかれます。

DIFF 差分確認レイヤー作成スクリプト

今回は差分を確認できるレイヤーを作成するスクリプトのご紹介です。

まずはこちらの動画をご覧ください。

この動画のようにレタッチの比較に使用する以外にも、Webサイトのデザインカンプをエンジニアに渡した後に修正が発生した場合、このスクリプトで差分確認レイヤーを作成してから修正をおこなえば「修正箇所は一番上のレイヤー表示して確認してね」っていう一言だけで済みます。

チームで共同作業を行う場合にも使えますね。

スクリプトの利用手順について

差分確認レイヤー作成スクリプトをダウンロード

DOWNLOAD

ダウンロードしたzipファイルを解凍して「差分確認レイヤー作成.jsx」をPhotoshopのスクリプトフォルダに移動します。
Windows: C:¥Program Files¥Adobe¥Adobe Photoshop□¥プリセット¥スクリプト
MacOS X: /アプリケーション/Adobe Photoshop□/Presets/Scripts

①ファイルを開いた状態で[ファイル]メニュー/[スクリプト]/[Dearps_差分確認レイヤーを作成]を選択してスクリプトを実行します。

②最上部に「差分確認レイヤー」が作成されます。レイヤー名には自動で日時が

③修正作業を行います。サンプルでは赤枠の部分を変更します。

④文字と写真を変更しました。

⑤差分確認レイヤーを表示させます。
すると差異がある部分が下の画像の様に表示されます。

⑥修正前の状態を見たい場合は描画モードを通常にします。

ファイルを開くたびに差分確認レイヤーを作成したい場合の設定方法

複数のファイルを修正するときなど毎回スクリプトを実行するのが面倒だったり、忘れたりしてしまうことがあるのでファイルを開いたら必ずこのスクリプトが実行するように設定してしまえば楽ちんです。

①[ファイル]メニュー/[スクリプト]/[スクリプトイベントマネージャー]を選択します。

②(1)にチェックを入れる。 (2)のプルダウンメニューから「ドキュメントを開く」を選択する。(3)の プルダウンメニューの「参照」を選択して「Dearps_差分確認レイヤーの作成.jsx」を指定する。

③(4)の「追加」をクリックして(5)の「完了」をクリック。これで設定完了です。

これでファイルを開くたびに差分確認レイヤーが作成されます。