使うアプリが何であれ、レイアウトやデザインを扱っていれば整列は毎日することでしょう。
したたか企画ではこれまで、次のような手段で整列の生産性を向上させてきました。
- Adobe Illustratorで整列・分布を全部ショートカットで操れるよう、丸ごと整列機能を作った
- Adobe XDでもキーオブジェクトに整列・分布できるよう、丸ごと整列機能を作った
- Figmaでもキーオブジェクトに整列・分布できるよう、丸ごと整列機能を作った
そして現在Adobe Expressを使うようになり、またしても本体機能として存在しないキーオブジェクトに整列・分布をしたくなっています。
そこでまた丸ごと機能を作りました。最後に選択したアイテムをキーオブジェクトとして扱い、整列や分布を実行するAdobe Express用add-on、Singari（しんがり） を紹介します。
目次
Singariって何？
Adobe Expressに専用パネルを追加し、選択したアイテムをキーオブジェクトに合わせて整列・分布するadd-onです。このadd-onは、最後に選択したアイテムをキーオブジェクトとして扱います。設定でその整列基準・分布基準を「親」または「選択アイテム全体」に変えることも可能です。
ほかのAdobeアプリではプラグインやスクリプトなどと呼びますが、Adobe Expressではそういった拡張機能をadd-onと呼びます。Adobe ExpressはWebアプリであり、Singariもそのプラットフォーム上で動きます。環境を選ばずWebブラウザさえあれば動くので、とてもお手軽です。
ちなみに殿（しんがり）とは、軍事用語で後退する部隊の中で最後尾の箇所を担当する部隊をさし、転じて隊列や順番の最後尾を意味します。最後に選択したアイテムを特別に扱う動作から、この名前をつけました。
※普段の法則だと名前は Singari for Adobe Express になるところですが、長いためただの Singari にしました。
どうやってインストールするの？
ここにありますので、リンク経由で取得してください。
現在まだ公開審査中のため、Adobe Express内部の検索で見つけることはできません。上記リンクをご利用ください。
また、利用できるのは開発版（Dev）です。デザインや機能は変更される可能性があります。
使いかたは？
基本的にパネルを使って操作します。左側タブのAdd-onsを選び、Singariを選択してパネルを開いてください。Singariを選ぶ場所は左側ですが、パネルが現れるのは右側です。
整列（Align）・分布（Distribute）
Adobe Expressのアートボード上で複数のアイテムを選択し、Singariパネルで左揃えなど実行したい項目のアイコンボタンを押すだけです。最後に選択された1つのアイテムをキーオブジェクトとして整列・分布が実行されます。
下記のようにすると簡単にキーオブジェクトを指定できます。
- 一旦整列・分布対象のアイテムをすべて選択する
- キーオブジェクトにしたいアイテムの選択を外し、もう1度選択する
分布ではパネルで間隔を指定できます。初期設定は間隔0です。
リファレンス
Singariパネルには次のような機能があります。
基本の整列
| Align left | 水平方向左へ整列 |
|---|---|
| Align horizontal center | 水平方向中央へ整列 |
| Align right | 水平方向右へ整列 |
| Align top | 垂直方向上へ整列 |
| Align vertical center | 垂直方向中央へ整列 |
| Align bottom | 垂直方向下へ整列 |
2段階整列
1回の実行で縦横両方指定できます。
| Align top left | 垂直方向上、水平方向左へ整列 |
|---|---|
| Align top middle | 垂直方向上、水平方向中央へ整列 |
| Align top right | 垂直方向上、水平方向右へ整列 |
| Align middle left | 垂直方向中央、水平方向左へ整列 |
| Align center | 垂直方向中央、水平方向中央へ整列 |
| Align middle right | 垂直方向中央、水平方向右へ整列 |
| Align bottom left | 垂直方向下、水平方向左へ整列 |
| Align bottom middle | 垂直方向下、水平方向中央へ整列 |
| Align bottom right | 垂直方向下、水平方向右へ整列 |
オブジェクトの分布
| Distribute left | 水平方向左に分布 |
|---|---|
| Distribute horizontal centers | 水平方向中央に分布 |
| Distribute right | 水平方向右に分布 |
| Distribute top | 垂直方向上に分布 |
| Distribute vertical centers | 垂直方向中央に分布 |
| Distribute bottom | 垂直方向下に分布 |
等間隔に分布
| Distribute horizontal space | 水平方向等間隔に分布 |
|---|---|
| Distribute vertical space | 垂直方向等間隔に分布 |
Relative to (整列基準)
| Key object | 整列基準をキーオブジェクトにする |
|---|---|
| Parent | 整列基準をアイテムの親にする。おもにグループやアートボードの領域に対して整列・分布するのに使用 |
| Selection | 整列基準を選択アイテム全体にする。おもに特定のキーオブジェクトを指定しない状態で整列・分布したいときに使用 |
Snap to pixel grid
ONにすると、整列・分布でアイテムが動くとき、小数点以下の端数がないキリのいい座標に移動します。
Sync multiple items (Align)
ONにすると、アイテム同士の間隔を保ったまま整列します。この設定は整列だけに影響します。
Offset (Distribute)
分布間隔を指定します。この設定は分布のみに影響します。
作者に感謝を伝えたい！
Buy me a coffeeは、クレジットカード払いなどでクリエイターにコーヒーをおごれるサービスです。ツール・情報が役に立った！ 感謝の気持ちを表現したい！ というかた、おごっていただけましたら嬉しいです☕️
これでまた少し仕事が速くなりました。今日もさっさと仕事を切り上げて好きなことをしましょう！
このサイトで配布しているスクリプトやその他のファイルを、無断で転載・配布・販売することを禁じます。
それらの使用により生じたあらゆる損害について、私どもは責任を負いません。
スクリプトやファイルのダウンロードを行った時点で、上記の規定に同意したとみなします。
