jackmiwamiwa devblog

フロントエンドをメインに行ったことをまとめていくサイトになります。

デザインカンプの再現率をあげる&スピードをあげる為に役立つツール一覧など

目的

制作案件だとだいたいphotoshopの再現がメインになるので、効率よく行う。 エンジニア一人でデザインの再現性を効率よく確認できるようにする。(再現性の戻しを少しでも減らす。) エンジニア・デザイナー(もしくはディレクター)との認識のずれをを減らす。

ツール系

Mapture

Maptureを使うと再現率を求めるときにやりやすい。

スクリーンショット 2019-02-06 13.40.53.png (129.0 kB)

使い方

  • cmd + shift + mの3つのキーを押すと一番上に画像が出てくる。

  • phtoshopのウィンドウサイズを pcなら 100% or 200% spなら 50% or 100% にしておく。(Retinaディスプレイなどで状態が変わるため)

  • ドラッグで要素を合わせる

  • 画像内でスクロールすると透明度を変えることができる。

長所

  • phothoshop内とかでも要素の大きさや要素の隙間を取得できるけどline-heightとかで微妙にmarginのサイズが変わるので、要素を重ねながら行うことでその微妙な違いを考慮しながら行うことができる。
  • ショートカットキーで行うので、アプリを毎回立ち上げなくてもよい。

短所

  • cmd + shift + mのショートカットキーを使うので、 chromeのデバイス切り替えなどのcmd + shift + mを使うショートカットが死ぬ。。

PixelSnap

スクリーンショット 2019-02-28 20.49.43.png (139.0 kB)

ブラウザの要素などの幅を簡単に測ってくれるもの。

無料ではない(19ドル)

使い方

  1. cmd + shift + f で起動(ショートカットキーは変更可能 。)
  2. マウスを要素の間とかに乗せると要素間の間の隙間を取得。
  3. ドラッグすると要素の大きさを取得してくれる。

長所

  • ブラウザ・photoshopなどいろいろなものに使うことができる。
  • ショートカットキーを自分で設定できるので、他のショートカットキーと被らない。
  • 要素の大きさなどが簡単にわかる

短所

  • 色で判定しているので、同じ色の間隔を測るのは難しい。

QuickRes

スクリーンショット 2019-03-10 1.47.47.png (763.1 kB)

macbookのディスプレイサイズを変えてくれるやつ。 (デフォルトや無料アプリもいくつかあるけど、13inchで横幅が1920pxに変更できるものがこれしかなかったので、、)

使い方

  1. アプリを起動すると、上に IMG_8237-768x576.jpg (4.6 kB) のように表示されるので、そこをクリックする。 (または、 alt + command + Rをクリック。)
  2. クリック(もしくはショートカット)すると設定したサイズに変更される。

設定など

アイコンを右クリック > 設定 > Profileからいける。 設定できる一覧は スクリーンショット 2019-03-10 1.57.47.png (93.1 kB)

長所

  • macbookのみでいろいろなサイズの検証を行うことができる。(ブラウザの検証ツールでもできるけど)。
  • 単純にmacbookの作業領域を大きくできる。
  • ショートカットについてもデフォルトから変更できるので、他と重ならない。

短所

  • ディスプレイサイズを2560pxとかにすると文字が小さくて見えない。

photoshop

TextExportToCSV

photoshopのテキストの情報をcsv形式で出力を行なってくれるやつ。 社員詳細ページなどテキストが欲しいときに役立つ。

取得してくれる情報については

- 文字
- 使っているフォント
- 文字サイズ
- 文字色

を取得することができる。

使い方

  1. TextExportToCSVをダウンロード
  2. /Applications/Adobe Photoshop CC 2019/Presets/Scripts にダウンロードしたものを配置 ※ Adobe Photoshop CC 2019 の部分については自分のphotoshopのバージョンなど参照
  3. photoshopファイル/スクリプト/ から使うものを選択(ショートカット覚えさせるとやりやすい。) (うまく反応しないときはphotoshopを再起動すると反応するかも。。。!)
  4. ウィンドウが出てくるので、名前・保存場所を登録する
  5. 完了すると スクリーンショット 2019-02-07 14.53.11.png (24.5 kB) のように出る。
  6. csvファイルを開くとの情報を取得してくれる。 (photoshopのレイヤーごとというよりは全体で取得が行われる。)

メモ

条件はわからないけれどもエラーになる時がある。

条件候補 特殊なフォントを使っていて読み込みを行うことができない。

Count Words and Characters

photoshopで選択した範囲の文字数を教えてくれるやつ。 ほとんど使わないけどどのくらいの文字量があるのかを調べる時に使うくらい。

ダウンロードページ

実行

photoshopファイル/スクリプト/Count Words and Characters から実行させる。 これもショートカットキーを設定することができるので、ショートカットキーを覚えさせておくと楽に使える。

Ink

要素とかをphotoshop上に記載してくれる優れもの! 要素の大きさ・選択範囲のどちらも使うことができるので大きさを知りたいときに大活躍する。

スクリーンショット 2019-02-12 13.17.06.png (25.5 kB)

使い方

  1. Inkページからダウンロード。
  2. Ink内にあるPhotoshop CC 2015+/Ink.zip を解凍。
  3. /Users/pt2000/Library/Application Support/Adobe/CEP/extensionsに解凍したInkフォルダを格納。(extensionsCEPは自分でディレクトリ作らないといけない気がする) ※ pt2000 は自分のpc名
  4. photoshopを再起動する。
  5. photoshop内のウィンドウ/エクステンション/Inkからレイヤーを開く。
  6. 開くと画像のようなレイヤーが開く。 スクリーンショット 2019-02-12 13.28.21.png (17.0 kB)
  7. 赤い部分について左から。 要素の横幅要素の縦幅要素の縦・横幅選択範囲の縦幅選択範囲の横幅選択範囲の縦・横幅、を取得する。
  8. 選択とか行えば要素が取得される。

長所

  • 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/

指定した間隔とかでガイドラインを引いてくれるもの。 個人的には使わないけど一応記載。 (公式の動画?に詳しい使い方とかはあり)

使い方

スクリーンショット 2019-02-13 15.15.40.png (183.9 kB) ZXPInstallerってやつをインストールしていい感じにやればダウンロードはできるはず

chomre系

StyleURL

chromeのdevelopツールのcssの編集をわかりやすくしてくれるやつ。 相手もStyleURLを入れていればスタイルの状態を共有することも可能。

公式の動画

長所

  • 脳死chromeのdevelopツールを触っているときにどの要素を触ったのか忘れずにすむ。
  • 自分と相手の両方がStyleURLをいれていればurlとかで状態の共有を行うこともできるので、相手に伝えるときに反映後の画像を送らなくても良い。 (エンジニア → デザイナー orディレクター もしくはその逆とかのFBKがやりやすい。)

短所

  • 相手がStyleURLをいれていない状態でスタイル反映状態のurl送っても何も変わらないので、FBKしてもらう人とかにもいれてもらう必要あり。

Page Ruler Redux

alt + pのショートカットキーでchrome上の選択範囲の大きさを測ることができるもの。

unnamed.png (34.9 kB)

画像のような状態になり、範囲を選択するとその部分の width, height などを取得できる。

長所

  • 要素の微妙な隙間とかの幅も取得してくれる
  • 別の要素の位置を調べる(ちゃんと一直線上にあるかなど)ことにも使うことができる。

短所

  • ちゃんと合わせないと微妙にずれたりする(数pxだから細かいこと気にしないなら全然大丈夫)。

VisBug

要素をクリックするだけで、使っているクラスやcssの効果などを調べることができるもの。 developツールとか使わないで要素を簡単に調べたいときにオススメ。

使い方

スクリーンショット 2019-02-14 16.58.45.png (32.0 kB)

ほんの一部のみ

  • スクリーンショット 2019-02-14 17.03.32.png (4.5 kB) 要素のガイドが表示され、クリックすると要素取得、もう一度クリックすると同じものを取得してくれる。

  • スクリーンショット 2019-02-14 17.05.07.png (5.5 kB) 要素の配置を自由に変更できる。(動画ではテキストと画像の位置を変更してみる。)

  • スクリーンショット 2019-02-14 17.08.35.png (4.2 kB) テキストの情報とかをいろいろ変更できる。 スクリーンショット 2019-02-14 17.10.37.png (54.7 kB)

全体的にもっと細かく知りたいならここに詳しく書いてあります。