デザインカンプの再現率をあげる&スピードをあげる為に役立つツール一覧など
目的
制作案件だとだいたいphotoshopの再現がメインになるので、効率よく行う。 エンジニア一人でデザインの再現性を効率よく確認できるようにする。(再現性の戻しを少しでも減らす。) エンジニア・デザイナー(もしくはディレクター)との認識のずれをを減らす。
ツール系
Mapture
Maptureを使うと再現率を求めるときにやりやすい。
使い方
cmd + shift + m
の3つのキーを押すと一番上に画像が出てくる。phtoshopのウィンドウサイズを pcなら
100%
or200%
spなら50%
or100%
にしておく。(Retinaディスプレイなどで状態が変わるため)ドラッグで要素を合わせる
画像内でスクロールすると透明度を変えることができる。
長所
- phothoshop内とかでも要素の大きさや要素の隙間を取得できるけど
line-height
とかで微妙にmargin
のサイズが変わるので、要素を重ねながら行うことでその微妙な違いを考慮しながら行うことができる。 - ショートカットキーで行うので、アプリを毎回立ち上げなくてもよい。
短所
PixelSnap
ブラウザの要素などの幅を簡単に測ってくれるもの。
無料ではない(19ドル)
使い方
cmd + shift + f
で起動(ショートカットキーは変更可能 。)- マウスを要素の間とかに乗せると要素間の間の隙間を取得。
- ドラッグすると要素の大きさを取得してくれる。
長所
- ブラウザ・photoshopなどいろいろなものに使うことができる。
- ショートカットキーを自分で設定できるので、他のショートカットキーと被らない。
- 要素の大きさなどが簡単にわかる
短所
- 色で判定しているので、同じ色の間隔を測るのは難しい。
QuickRes
macbookのディスプレイサイズを変えてくれるやつ。 (デフォルトや無料アプリもいくつかあるけど、13inchで横幅が1920pxに変更できるものがこれしかなかったので、、)
使い方
- アプリを起動すると、上に
のように表示されるので、そこをクリックする。
(または、
alt + command + R
をクリック。) - クリック(もしくはショートカット)すると設定したサイズに変更される。
設定など
アイコンを右クリック > 設定 > Profileからいける。 設定できる一覧は
長所
- macbookのみでいろいろなサイズの検証を行うことができる。(ブラウザの検証ツールでもできるけど)。
- 単純にmacbookの作業領域を大きくできる。
- ショートカットについてもデフォルトから変更できるので、他と重ならない。
短所
- ディスプレイサイズを2560pxとかにすると文字が小さくて見えない。
photoshop系
TextExportToCSV
photoshopのテキストの情報をcsv形式で出力を行なってくれるやつ。 社員詳細ページなどテキストが欲しいときに役立つ。
取得してくれる情報については
- 文字 - 使っているフォント - 文字サイズ - 文字色
を取得することができる。
使い方
- TextExportToCSVをダウンロード
/Applications/Adobe Photoshop CC 2019/Presets/Scripts
にダウンロードしたものを配置 ※Adobe Photoshop CC 2019
の部分については自分のphotoshopのバージョンなど参照- photoshopの
ファイル/スクリプト/
から使うものを選択(ショートカット覚えさせるとやりやすい。) (うまく反応しないときはphotoshopを再起動すると反応するかも。。。!) - ウィンドウが出てくるので、名前・保存場所を登録する
- 完了すると のように出る。
- csvファイルを開くとの情報を取得してくれる。 (photoshopのレイヤーごとというよりは全体で取得が行われる。)
メモ
条件はわからないけれどもエラーになる時がある。
条件候補 特殊なフォントを使っていて読み込みを行うことができない。
Count Words and Characters
photoshopで選択した範囲の文字数を教えてくれるやつ。 ほとんど使わないけどどのくらいの文字量があるのかを調べる時に使うくらい。
実行
photoshopのファイル/スクリプト/Count Words and Characters
から実行させる。
これもショートカットキーを設定することができるので、ショートカットキーを覚えさせておくと楽に使える。
Ink
要素とかをphotoshop上に記載してくれる優れもの! 要素の大きさ・選択範囲のどちらも使うことができるので大きさを知りたいときに大活躍する。
使い方
- Inkページからダウンロード。
- Ink内にある
Photoshop CC 2015+/Ink.zip
を解凍。 /Users/pt2000/Library/Application Support/Adobe/CEP/extensions
に解凍したInk
フォルダを格納。(extensions
かCEP
は自分でディレクトリ作らないといけない気がする) ※pt2000
は自分のpc名- photoshopを再起動する。
- photoshop内の
ウィンドウ/エクステンション/Ink
からレイヤーを開く。 - 開くと画像のようなレイヤーが開く。
- 赤い部分について左から。
要素の横幅
、要素の縦幅
、要素の縦・横幅
、選択範囲の縦幅
、選択範囲の横幅
、選択範囲の縦・横幅
、を取得する。 - 選択とか行えば要素が取得される。
長所
- photoshopの属性とかでも要素の幅は取得することができるけど、レイヤー上に直接描いてくれるのでわかりやすい!
- レイヤーで一括管理してくれるので、邪魔だったら簡単に消せる。
Size-Marks-PS
Ink
とほぼ同様選択範囲のpxを表してくれるもの。
選択範囲の大きさをショートカットキーを使って見たいならSize-Marks-PSのほうがオススメ。
使い方
1.Size-Marks-PSをダウンロード。(Size Marks.jsxbin
がダウンロードされる)
2. ダウンロードしてきたやつを/Applications/Adobe Photoshop CC 2019/Presets/Scripts
へ入れる
3. photoshopを再起動して、選択範囲を作りファイル/スクリプト/Size Marks
を実行すると選択範囲のpxを取得することができる
長所
- ショートカットキーで要素の大きさを取得することができるので楽。
短所
- 選択範囲の長い方のpxを取得するので、適当に選択すると少し違う場所の幅が表示される。
- 一度に縦・横の両方の幅の取得ができない。
- Inkみたいにフォルダでひとまとまりにしてくれない。(レイヤーは一番上にあるので、手動とかでまとめることはできる)
- テキストの色とかが描画色になるので、脳死でさわっていると色がわからなくなる。(逆に色を変えたいときは簡単に変えられそう)
Griddify
ページ : http://gelobi.org/griddify/
指定した間隔とかでガイドラインを引いてくれるもの。 個人的には使わないけど一応記載。 (公式の動画?に詳しい使い方とかはあり)
使い方
ZXPInstallerってやつをインストールしていい感じにやればダウンロードはできるはず
chomre系
StyleURL
chromeのdevelopツールのcssの編集をわかりやすくしてくれるやつ。 相手もStyleURLを入れていればスタイルの状態を共有することも可能。
公式の動画
長所
- 脳死でchromeのdevelopツールを触っているときにどの要素を触ったのか忘れずにすむ。
- 自分と相手の両方がStyleURLをいれていればurlとかで状態の共有を行うこともできるので、相手に伝えるときに反映後の画像を送らなくても良い。 (エンジニア → デザイナー orディレクター もしくはその逆とかのFBKがやりやすい。)
短所
Page Ruler Redux
alt + p
のショートカットキーでchrome上の選択範囲の大きさを測ることができるもの。
画像のような状態になり、範囲を選択するとその部分の width
, height
などを取得できる。
長所
- 要素の微妙な隙間とかの幅も取得してくれる
- 別の要素の位置を調べる(ちゃんと一直線上にあるかなど)ことにも使うことができる。
短所
- ちゃんと合わせないと微妙にずれたりする(数pxだから細かいこと気にしないなら全然大丈夫)。
VisBug
要素をクリックするだけで、使っているクラスやcssの効果などを調べることができるもの。 developツールとか使わないで要素を簡単に調べたいときにオススメ。
使い方
ほんの一部のみ
要素のガイドが表示され、クリックすると要素取得、もう一度クリックすると同じものを取得してくれる。
要素の配置を自由に変更できる。(動画ではテキストと画像の位置を変更してみる。)
テキストの情報とかをいろいろ変更できる。
全体的にもっと細かく知りたいならここに詳しく書いてあります。