お前は今までひいたガイドの本数をおぼえているのか？
デザイナーならこれまでの人生で数え切れないほどのガイドをひいてきたはず。
LPデザイン、アプリのUIデザイン、スプライト画像……
Photoshopのルーラーと座標をにらみながらドラッグ、ドラッグ、ドラッグ……
私は現職の業務の都合で、クライアントが用意したデザインデータからしょっちゅうこういうスプライトを作るのですが
これがまあとてもめんどくさいです。
単純に数字を並べるだけなら自動化もできるのですが、案件ごとにフォントもサイズも自由で、それぞれ左右のマージンが異なっていたりします。
これと同じ作業を、私だけでなくフロントエンドエンジニアが行うことがあります。
デザインデータはクライアントが用意してくれてるわけなので、デザイナーを挟まずに実装を担当するエンジニアが作ってしまったほうが、社内の制作フローとしてもスピードアップできます。
ところがもともとPhotoshopを10年も20年も触ってるデザイナーとちがって、「スプライトを作るだけ」の作業もエンジニアにとってはどうも苦手でやりたくない人は多いんですね。
Photoshopをいじる＝デザイナーの仕事
という認識もそれに拍車をかけていて、わざわざデザイナーにやらせようとします。
しかしデザイナーからしてみると、自分が作ったわけでもないよそのデータから、「スプライトを作るだけ」の作業を抜き出してタスク化されると無駄に感じます。
そのオペレーション、デザイナーのリソース使うほどのことか？
お互いの職種の領域のちょうど重なり合うところにあるこの作業、５分で終わる作業を相手に振ってデータをやりとりする時間マジで無駄なんですよね。
なんで画像作るのが仕事のデザイナーがこのくらいもやってくれないんだろう。
なんでフロントエンドエンジニアはフロントエンドを担っているくせにこのくらいもやってくれないんだろう。
お互い、相手がやればいいと思っています。
エクステンションを使う
前置きが長すぎましたが、最近、私が「5分でできることを甘えるな」と思っているのが間違いで、そもそも彼らにとってはこの作業が５分で終わらないのだということに気づきました。
彼らは、「npm i」で何をしているのかわからないプラグインをぽいぽい入れることには抵抗がなく、車輪の再発明を悪手と考えています。
ところが、Adobeのソフトで単調な作業を繰り返すことについては「デザイナーが手を動かせば済む」という思考で、そのほかのソリューションを探すことには興味が無かったのです。
- アクション機能
- 自動処理（バッチ）機能
- エクステンション
といった、効率化のための機能で短縮できる作業を、手動でちまちまとやっていることを知りました。
っていうかデザイナーの中でもこれらの機能を知らずに愚直にちまちまやっている人も実は多いんじゃないかと思い始めました。
そこで今回は（やっと本題です）、個人的にもっとも使用頻度が高いガイド系エクステンションをひとつご紹介したいと思います。
Griddify: a Tiny Photoshop Panel for Guides and Grids
このGriddifyはその名の通りグリッド（ガイド）をひけるGriddify機能をワークスペースのウインドウに表示できるエクステンションです。
上記リンクから、ご利用のPhotoshopバージョンに合わせて、それぞれCS6／CCのインストール方法に従ってインストールします。
私はCCなのでZXPInstallerのインストールから行いました。
Adobeの長い歴史の中で、超絶べんりだったDreamweaver用のエクステンションが使えなくなって苦渋を味わったこともありましたが、今後はCC以外未対応というエクステンションが増えてくるのでしょうね。
Griddifyの使用例
さてインストールしたらさっそく使っていきましょう。
レイヤーパネルなどと同じ手順で、
「ウィンドウ」→「エクステンション」→「Griddify」
と選択します。
するとこのようなウィンドウが現れます。
今回は左の600×500のカンバスを使って試していきます。
まずは上段の「Griddify」を使ってみます。
これは入力した数値のpxごとにガイドをひいてくれる機能です。
左の入力フォームに「50」と入力し、「Griddify」をクリックすると…
(∩´∀｀)∩ﾜｰｲ
ちょうかんたんですね！
ちなみに半角スペースで区切って複数の数値を入れると、その順序でガイドをひいてくれます。ためしに「100 20 10」と入力すると…
(∩´∀｀)∩ﾜｰｲ
右にある矢印ボタンは、ガイドをひいていく方向を指定しています。
右を向いている時は左から右へ向かって縦のガイドをひいていきます。
下を向かせると、このように上から下へと横のガイドをひくことができます。
すごいのはここからで、選択範囲を用意してGriddiryを使うと、なんと選択範囲の中の距離を測ってガイドをひいてくれます。
次に、2段めの「Divide」をためしてみましょう。
これは指定した数値でカンバスを等分してくれる機能です。
「5」と入力して「Divide」をクリックすると…
5等分のガイドをひいてくれました！
ボタンを押すと縱橫の切替のほか、縦横一括で等分してくれる設定もできます。
もちろん、Griddifyと同じく選択範囲を等分したガイドをひくことも可能！
そして最後は下段にある「Wrap」です。
あ〜だいたい「class=”wrapper”」とか「class=”content”」とかつけられちゃうあの領域だ〜
これも縦横一括、半角スペース区切りの指定が可能です。
しかもこの数値、マイナスの値も指定できるんですね〜φ(ﾟДﾟ )ﾌﾑﾌﾑ…
いまのところそんなに使いみちが思いつかないやつです。
うまく組み合わせてサクッとガイドをひいてしまいましょう！
今回はPhotoshop用のエクステンションを紹介しましたが、Illustrator用だとGOROLIB DESIGNさんがめちゃめちゃ豊富なスクリプトを用意されているのでこちらもひととおり舐めると仕事が爆速でできるようになりますよ！