似たような体裁のアイテムセットを複数並べる

似たような体裁のアイテムセットを複数並べる場合、
アイテムを描く → アイテムを組み立ててアイテムセットを作る → 隣に新たなアイテムを描く → アイテムセットを組み立てて… といった作り方をしてしまうと、とにかく面倒で時間がかかりますし、数値入力や座標・サイズなどのミスが発生しやすくなってしまいます。

実際このような作業を行う場合、
アイテムを描く → アイテムを組み立ててアイテムセットを作る → アイテムセットを隣へ複製する → アイテムセット内のアイテムを編集する といった作り方をすることで、作業効率がアップし、細かなミスが減らすことができます。

デザイナーの方々は、上記のような「複製してから編集する」というフローを無意識にやってるんじゃないかと思います。

隣に複製する方法

アイテムセットを隣へ複製する場合、いくつかの方法が考えられます。アイテムセットを右隣へ複製する。という方法を例にあげてみます。

ドラッグ＆ドロップでスナップさせた複製

アイテムセットを選択したあと、一番左のアンカーポイントを掴んで、option と shiftを押しながら一番右のアンカーポイントにスナップするまでドラッグ＆ドロップする。
または
アイテムセットを選択したあと、コピペし、一番左のアンカーポイントを掴んで、元のアイテムセットの一番右のアンカーポイントにスナップするまでドラッグ＆ドロップする。

マウスをメインで操作する場合、一番メジャーな方法だと思います。しかしこの方法は、マウス操作の精度が求められることが難点です。移動する前にアンカーポイントがしっかりと掴めていないと移動距離がずれてしまいますし、そもそも左右の一番端にアンカーポイントが無い場合は正しい距離で移動することができません。スマートガイド機能を使えばある程度のことには対応できますが、アイテムセットの作りが複雑でアンカーポイントが沢山ある形状だと、スナップ先を迷ってしまうことがあります。とにかくドラッグ＆ドロップしている間、手がプルプルしちゃいますしね（笑）

また、コピペという操作が非常にネックでして、アイテムセットが複雑な作りだったり、テキストやシンボルを含んでいると、処理に時間がかかってしまい、ヘタすると Illustrator が落ちます。そのため、ぼくらはコピペをあまりしないように気をつけています。あと、アイテムセットをコピペしてしまうと、アイテムの重なり順が変わってしまうというのも問題です。アイテムセット毎に重なり順がゴソっと変わってしまうと、あとからアイテムを追加する際、アイテムの重なり順の違いでイライラしたりします。

移動ダイアログで数値を入力して複製

アイテムセットを選択したあと、アイテムセットの横幅を調べ、移動ダイアログで数値を入力し移動コピーする。

数値入力を重視している方は、こちらの方法で複製することが多いと思います。数値なら確実ですしね。ただ、その都度アイテムセットのサイズを確認して、数値を入力するのが面倒くさいです。まとめて一気に複製するのであれば変形の繰り返しをすることができますが、途中で他の作業をしてしまうと、入力した数値が変わってしまうので、その都度数値を入力しなければなりません。

方向キーを連打して複製

アイテムセットを選択したあと、一度複製し、shift + →を何度も押す。

10で割り切れるような気持ちよい数値の小さなアイテムセットであれば有効的な方法ですが、アイテムセットが大きくなればなるほど、キーを押す回数が増えてしまいます。

選択したアイテム群を隣へ移動・複製するスクリプト

で、だ。選択したアイテム群を隣へ移動・複製するスクリプトを作成しました。

複数のアイテムを選択し、このスクリプトを実行すると、選択したアイテム群を隣にまるっと移動・複製してくれます。上下左右、好きな方向に移動・複製できます。

選択した個々のアイテム毎に隣へ移動・複製することもできます。

さらに、ドキュメントの単位毎に、マージンサイズを指定することができます。ウェブだろうが印刷物だろうが安心設計。

さらにさらに、線幅と効果もサイズに含めない指定をしたり、

線幅と効果もサイズに含める指定も可能。プレビュー境界の設定を気にする必要はありません。

これらの設定はダイアログで切替え可能です。ダイアログで指定した内容は保存することができます。もし一時的に設定を変更して実行したけど、設定は保存したくない！という方のために、ダイアログを開いたまま移動・複製が行えるようにその場で実行するボタンも配置してあります。

ダイアログを表示し設定が変更できるスクリプトの他に、上下左右それぞれ移動・複製をダイアログを表示せずに即実行するスクリプトも用意しました。これら即実行する8個のスクリプトも、ダイアログで設定した内容が反映されるようにしてあります。

ぼくらは、これら8個のスクリプトに、ショートカットを割り振って使用しています。

• 上隣移動 control + ↑
• 下隣移動 control + ↓
• 左隣移動 control + ←
• 右隣移動 control + →
• 上隣複製 control + option + ↑
• 下隣複製 control + option + ↓
• 左隣複製 control + option + ←
• 右隣複製 control + option + →

たぶん、Illustrator スクリプトの中で三階ラボが一番使用しているスクリプトだと思います（笑）

ちなみに、このスクリプトを使えば、ドット絵なんかも簡単に描けますよー。

以上、アイテムセットの「サイズ」が主体の隣へ移動・複製する方法でしたが、次は「数値」主体のお話です。

案件の作業内容によって異なる数値

ありがたいことに、三階ラボではいろいろな業種のお仕事をやらせていただいています。ロゴやアイコン、ウェブやアプリケーションのUI、テレビ、アニメ、映像、印刷物などなど… 感謝感謝です（更なるお仕事お待ちしております！）。弊社ではこれらのデザイン作業を行うとき、案件ごとに Illustrator のドキュメントを作り、デザイン案や画面構成などをアートボードで管理しています。

例えば iPad アプリのUIデザインの場合は、1024 px x 768 px のアートボードを横に 76 px 間隔で、縦に 132 px 間隔で並べています。この並べ方には理由がありまして、選択したアイテムを右のアートボードに複製するとき、1100 px というわかりやすい数値（1024 + 76 = 1100）で移動できるからです。

A4縦サイズの印刷物の場合は、210 mm x 297 mm のアートボードを横に 40 mm 間隔で、縦に 43 mm 間隔で並べています。移動距離は横 250 mm、縦 340 mm といった案配です。

※「アートボードを選択して同じ位置にペーストすればいいじゃん」という意見もあると思いますが、先に説明した通り、コピペによる Illustrator 落ちや、重なり順が変わってしまうのを避けるため、極力コピペせずに、移動で複製するようにしています。
また、三階ラボでは、アートボード用グループアイテムによってアートボードを作成・管理しています。アートボードを増やす場合は、アートボード用グループアイテムを横に複製し、アートボード作成スクリプトを実行しています。そのため、入力しやすい数値というのがとても重要になってきます。

このように、作業内容（ドキュメント）によって、移動させる距離が変わってきます。ウェブの場合は更にPC用、スマホ用といった種類によっても移動距離がかわってくるでしょう。
しかし、案件ごとに移動する数値を覚えるのは大変ですよね。ウェブなんかは横幅がマチマチですしね。

ドキュメント毎に数値を保存しその数値を元に移動・複製するスクリプト

で、だ。これらの移動距離を Illustrator のドキュメント毎に記憶させちゃおう。ってのが次のスクリプトです。

このスクリプトは、ドキュメント毎に数値を保存し、その数値を元に、移動・複製させることができます。保存した数値は //script というレイヤー内のパスアイテムで管理します。このパスアイテムのサイズが保存した移動距離になります。直接パスアイテムのサイズを変更し、移動距離を変えることも可能です。数値は4つまで記憶できますので、アートボードの距離以外にも、頻繁に使う数値を設定しておくと便利です。

隣接移動複製スクリプトと同様に、ダイアログを表示したまま即実行できるボタンを用意しました。 また、ダイアログを表示せずに実行できる8個のスクリプトもありますので、ショートカットを割り振れば、気軽にガシガシ使うことができます。

ぼくらは、こんな感じでショートカットを割り振って使用しています。

• 上指定数値移動 control + shift + ↑
• 下指定数値移動 control + shift + ↓
• 左指定数値移動 control + shift + ←
• 右指定数値移動 control + shift + →
• 上指定数値複製 control + shift + option + ↑
• 下指定数値複製 control + shift + option + ↓
• 左指定数値複製 control + shift + option + ←
• 右指定数値複製 control + shift + option + →