illustrator（イラストレーター）使うなら入れるべきスクリプト「Adjust Items」
2016/10/08
Illustrator(イラストレーター)でWeb制作するとだいたい嫌がられる
僕は普段様々なものをデザインする機会があります。最近一番多いのはWebサイト、その次に様々な紙媒体、加えて店舗のガラス面に貼付するフィルムもありますし、デジタルサイネージの画像もあります。簡単なものならムービーを作ることも多いです。その際、制作物によって色々なツールを使うのはアプリケーションの操作を覚えることが必要なので、極力避けたいのが本音です。
僕はDTPを主業務としてやってきた過去もあって、Adobe Illustratorでデザインすることが非常に多いのですが、最近機会の一番多いWebサイトは同じくAdobeのPhotoshopが事実上のデファクトスタンダードとなっています。それには様々な理由があるのですが、過去を紐解いてみればやはり1ピクセルの問題というものがあります。
最近でこそピクセルパーフェクトなデザインは必要なのか、という議論も生まれたりしますが、昔はキチッと1画面でレイアウトを組んだデザインばかりで、最小単位が1pxであるPhotoshopそれに都合が良かったのだろうと考えています。
また最近は少し前までのスタンダードだったFireworksに代わってSketchというアプリケーションも登場していますが、データの受け渡しの多いこの業界においてはまだ浸透しているとは言えない状態です。
その中でもIllustratorは、そのスライス機能の弱さや自由度の高さから、構築を担当してくれるひとに嫌な顔をされることが多いです。
ワイヤーフレームを引くのにはサクサクできるしとても良いと思っていますが、なにせ高額だし、そもそもワイヤーフレームであれば他のソフトで十分だとも思います。
ただ僕にとって一番手を早く動かせるアプリケーションがIllustratorなのは間違いないので、自分の効率化を考えるとできればそのままイラレでデザインさせて欲しいのです。そのために、構築を担当する方に嫌がられないデータを作るためにどうすればいいかという情報は常に探しているのです。
Adjust Itemsって？
そんな時、SNSを見ていたらある情報が目に止まりました。それが「Adjust Items by Dialog」についてのポストでした。
なんだろうと思ってみてみると、イラストレーターのオブジェクトを簡単に整数化できるといったものでした。これはと思って早速試したところ、なかなか使い勝手も良く、綺麗なデータをつくるのに役に立ちそうな感じです。スクリプトをショートカットで呼び出すためのアプリと同時に使えば、さらに簡単になりそう。
インストールと使い方について書いていきます。
インストールする
Adjust Items by Dialogをインストールする
まずはAdjust Items by Dialogのページに行きます。
画面下の緑のボタン「Adjust Items by Dialog」をクリックしてダウンロードして下さい。
その後ダウンロードしたファイルを展開すると以下のファイルが入っています。
- 3flab-adjust_items_by_dialog.jsx
- 3flab-adjust_items.jsx
- readme.txt
これらのうち.jsxとついたスクリプトファイルを、アプリケーション > Adobe Illustrator CC 2015 > Presets > ja_JP > スクリプト に入れます。
ScriptKeyAIをインストールする
次に、いちいちこのスクリプトを呼び出すのにメニューバーからスクリプト、3flab-adjust_itemsを選ぶのは面倒なので、3flab-adjust_items.jsxを呼び出すアプリケーション「ScriptKeyAI」をインストールします。
ダウンロードをクリックして、「ScriptKeyAi 2.1.1」の「download」をクリックしてファイルをダウンロードします。
ダウンロードされたファイルを展開すると「ScriptKeyAi_211_Cocoa.dmg」というファイルができ自動で開きますので、その中にある「ScriptKeyAi.app」をアプリケーションフォルダにコピーします。
以上でインストールは終了です。
使ってみる
Adjust Items by Dialogのページを見ると、以下の様な記述があります。
3flab-adjust_items_by_dialog_2.jsx は、ダイアログで調整する数値の設定をし、実行するするスクリプトです。オブジェクトを選択していない状態で実行すれば、数値の設定だけを変更することができます。3flab-adjust_items_2.jsx は、数値を設定するダイアログを表示せずに、3flab-adjust_items_by_dialog_2.jsx で設定した数値を元に直接実行する簡易スクリプトです。必ず 3flab-adjust_items_by_dialog_2.jsx でお好みの数値を設定してからご使用ください。
ファイル名が似ているのでちょっとわかりにくいのですが、「by_dialog」と付いたものは設定用のスクリプト、「3flab-adjust_items.jsx」は実行用のスクリプトとなっています。
Adjust Itemsの設定をする
まずはillustratorで新規ファイルをつくります。その後 スクリプト > 3flab-adjust_items_by_dialogと選択します。
すると、設定用ウインドウが開きます。
その設定用ウインドウで最小の値を設定します。0.5なら0.5刻み、1なら1刻みの整数となります。10にすれば10刻みとなります。その際ウインドウ右上の「入力数値を統一」を利用すると設定が楽になります。
まずはこれでAdjust Items by Dialogの設定は終了です。
ScriptKeyAiの設定をする
次に数値を整数化(小数点も設定できますが)するスクリプトである、「3flab-adjust_items.jsx」を呼び出すショートカットを設定します。
先ほどダウンロードした「ScriprKeyAi」を起動します。
するとウインドウが表示されますので左上の「＋」ボタンをクリックします。ここで呼び出すスクリプトを指定し、ショートカットを設定します。
ScriprKeyAiのリストに「3flab-adjust_items.jsx」が表示されます。
表示された「3flab-adjust_items.jsx」をクリックして、ウインドウの上の方にあるショートカット選択ボタンで、任意のショートカットを設定します。今回は「⌘ + Shift + x」にしました。
実際に使ってみる
さて実際にショートカットからスクリプトを呼び出してオブジェクトを整数化してみます。
まずは「ScriprKeyAi」が立ち上がっている状態でIllustratorの新規ファイルを開き、適当に矩形をつくります。その際変形ウインドウで句形の大きさ等が小数点になっていることを確認します。
そして次に先ほど設定したショートカット「⌘ + Shift + x」を押下します。すると、句形の大きさや位置などがすべて整数化されたのが分かると思います。(今回はわかりやすいように10刻みに設定してあります。)
使い方は以上です。
Adjust Itemsを使えばみんな幸せになれる
Web制作は数値の最小単位が常に1pxです。しかしIllustratorというアプリケーションの性質上どうしても1px以下の小数点が発生してしまう場合があります。かなり気をつけている僕も、たまに小数点以下のオブジェクトを作ってしまい、修正作業をしなければいけないことがあります。
また、いままで他のデザイナーが作った色々なデータを触ってきたけど、小数点が適当なデータはかなり多い印象です。
可能な限りすべて整数で作ってあるデータは触っていて気持ちがいいですし、作業の効率化にもつながりますので、イラレ使いのひとは「Adjust Items by Dialog」をどんどん使って幸せになりましょう。
気に入っていただけたらシェアしていただけますと、とても嬉しいですm(_ _)m