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)の「完了」をクリック。これで設定完了です。

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

Photoshop CC 2017とAdobe Stockの連携で作業がさらにスピードアップ!

Adobe Stockとは?

ロイヤリティフリーの写真、グラフィック、ベクターおよびビデオが購入できるサービスです。購入プランは数種類用意されています。詳しくは公式サイトにてご確認ください。

最初Adobeの提供している素材集っていうと使えない品質のものだらけという先入観があったのですが、まったくそんなことはなくクオリティーの高い素材が多数提供されています。もちろん日本向けの素材も多数提供されているので私にとって今ではなくてはならないサービスとなっています。

私が契約しているプランは月々3,480円(年間プラン)で月に10点の素材を取得できるプランです。月に10点ダウンロードしなくても120 点まで繰り越し可能というとても良心的なサービスです。逆に10点以上購入したい場合は追加の素材を348円で購入することも可能です。安っ!

同様のサービスで人気の高い「Shutterstock」 の料金が一番安いプランで画像5点で6,000円というのを考えるとAdobe Stockのコスパ良さがわかりますね!

この記事ではどのようにPhotoshop CC 2017とAdobe Stockを連携させて作業効率をアップさせるのか私自身の実務での実例をもとに紹介したいと思います。

素材の検索、ダウンロードからドキュメントへの配置まで

まずは基本的な利用方法の解説です。

①Photoshopで任意のファイルを開きライブラリパネルを表示します。ライブラリパネルが表示されていない場合は[ウインドウ]メニューから[ライブラリ]を選択してパネルを表示させます。

②ライブラリパネルのプルダウンを選択して新規ライブラリをクリックして任意のライブラリを作成します。ライブラリは素材などのアセットを管理するフォルダのようなものです。プロジェクト名などご自身が判断しやすい名前をつけましょう。

③ライブラリパネルの検索フィールドを選択して必要な素材の名称を入力します。下のチェックボックスを選択することによって「写真」、「イラスト」、「ベクター」、「ビデオ」、「テンプレート」から絞り込むことも可能です。

④検索フィールドに入力すると候補の写真がパネル上に表示されるのでイメージに合う素材を探します。いい感じの素材をみつけたら ドキュメントにドラッグ・アンド・ドロップで配置します。(配置と同時に最初に作成したライブラリにも自動的で素材が保存されます。)

⑤まだライセンスを取得していない状態なのでAdobe Stockのウォーターマーク(透かし)が表示された状態になっています。

⑥ウォーターマーク(透かし)が表示された状態のままクライアントにチェックしてもらいOKが出たらライセンスの取得をします。NGの場合の無駄なコストを省けます。

⑦レイヤーパネルで配置した素材を選択した状態で右クリックをして「ライセンス画像」を選択します。(ライブラリパネル上の素材を選択して右クリックで「画像のライセンスを取得」でもライセンスを取得することが可能です)

⑧Adobe Stockのダイアログが表示されるので「OK」をクリックします。

⑨ドキュメント上の素材からウォーターマーク(透かし)が消えました。これでライセンスを取得したことになります。サイズや位置などもプレビュー版を元に置き換えられるので一切手を加える必要がありません。

クライアントチェックでNGが出た場合

①クライアントチェックでもしNGが出た場合、今までは素材サイトへいって再度条件を指定して一から素材の候補を探す必要がありました。しかしAdobe Stockには「類似を検索」というとても便利な機能があります。 この機能を使えば素材のテーマ、構図、トンマナを自動で判断して別案の候補写真を自動で探してくれます。

ライブラリパネル上の素材を選択して右クリックで「類似を検索」を選択します。(Stockで提供されている素材以外でもライブラリに登録した画像であれば同じように「類似を検索」機能を利用することができます)

②たったこれだけで類似の素材が表示されます。便利ですね!

③イメージに合う素材が見つかれば先ほどと同じようにドキュメントにドラッグ・アンド・ドロップで素材を配置します。楽チン〜捗る〜(^^)

Adobe StockのWebサイト上でも同じように「類似を検索」機能を利用することができます。

⑥Google 画像検索と同じように画面に画像をドラッグ・アンド・ドロップするだけです。

いかがでしたでしょうか? Adobe Stockの魅力を感じていただけたでしょうか?

いままでDearpsではスクリプトやTipsでの効率化テクニックを紹介してきましたがこういったサービスをうまく利用して作業効率化をはかることもとても重要だと考えています。時短の為には時にはお金で解決することも必要だなと(笑)

Adobe Stockをはじめて利用される方は初月は無料(画像10点)で利用することが可能です。(当記事執筆時点)
もし登録して気に入らなかったら登録から1ケ月経つ前に解約手続きをすれば解約料金も含めて費用が発生しないので試用してみる価値はあると思います。

是非この機会にAdobe Stockを試してみてはいかがでしょうか?

Adobe Stock