ブログ

【解決】XDでメモをアートボードと一緒に移動したい!

XDプラグインKizuna アイキャッチ図版

Adobe XDでデザインを共有するとき,エンジニアやコーダーにメモを残したいことがあります。例えば,データを見ただけでは判断しにくいデザイナーの意図を言葉や絵で補完するときなどです。

メモ書きにはAdobe XDの共有機能/コメントを利用するなどさまざまな実現方法があります。対象アートボード付近のペーストボードに,テキストや画像を置くのもわかりやすくて良いでしょう。特に操作しなくても,書類を開けば目に入るのは大きな利点です。

しかしこの方法では,アートボードを動かしてもメモ用アイテムは一緒についてきません。毎回自力でちまちまアイテムを選択して近くに寄せることになります。せっかくの軽量高速アプリが泣きますね。

そこで今回は,ペーストボード上に置いたアイテムとアートボードを関連付け,一緒に動かせるようにするAdobe XD用プラグイン Kizuna を紹介します。

続きを読む

【解決】ファイルを書き出す前に画像のリンク切れを確認したい!

ファイルを書き出す前に画像のリンク切れを確認したい! アイキャッチ図版

Illustrator 2022(v26)からリンク画像の扱いが変わりました。それ以前のバージョンではリンク先が行方不明な画像は何も表示されませんでしたが,2022(v26)では低解像度サムネイルが必ず付きます(Illustrator 2020方式で保存した場合。参考:Illustrator2020形式ファイルフォーマットとは | Automation Skill)。

PDFなどを書き出した際は,低解像度サムネイルが見えている状態になります。リンク画像がなくても何があるかわかるようになりました。親切です。

しかしこの仕様はリンク切れを気づきにくくしてしまいました。低解像度でもまあまあ綺麗なので,異常を見逃すのです。

もし保存や書き出しの際にリンク切れを警告してくれたら,ミスを防げそうですね。ただIllustratorでは,保存や書き出しの動作を感知して警告を入れるのは難しいようです。

そこで今回は,Illustratorで画像のリンク切れを確認したあと,特定のメニューを実行するスクリプトを紹介します。

別名で保存や書き出しなど,通常のキーボードショートカットをこのスクリプトで置き換えると,特定のメニュー実行前にリンク切れ確認処理が入るという作戦です。

残念ながら手動でメニューを選んだときは発動しません。それで十分役に立つと思うかたのみご利用ください。

続きを読む

【解決】Chrome翻訳の言語をショートカットで切り替えたい!

Chrome翻訳言語トグルスクリプト アイキャッチ図版

Google Chromeでは,内容を丸ごと翻訳しながらページを開けます。英語で書かれたWebサイトを日本語で読みたいときに便利です。

ページ内の見ている部分その場で原文と日本語訳を切り替えられるので,視点が迷子になりません。両方の言語を行ったり来たりしやすく,理解が早くなります。

ところが言語を変えるには,小さな翻訳アイコンをクリックして,出てきたウインドウ上でさらに英語・日本語などを選ぶ必要があります。何回も繰り返すのはきついですね。

そこで今回は,Chrome翻訳の言語を交互に切り替える(トグルする)スクリプトを紹介します。Keyboard Maestroでスクリプトにショートカットを割り振り,キーボード操作を実現する作戦です。

今回はmacOS専用です。Windowsユーザーのかたはすみません。

本質的な部分はAppleScriptなので,Keyboard MaestroはBetterTouchToolやAlfredなど別のアプリで代替できます。

続きを読む

【履歴】infoVector 1.4.0

infoVector 1.4.0 アイキャッチ図版

アートボードに置いた特定の形式のテキストを,日本語/英語でXMP(IPTC)メタデータに書き込み,ai・eps・jpg・pngファイルとして書き出すIllustrator用ドロップレットinfoVector 1.4.0のページです。2.0.0で仕様が変わったため,旧バージョンの情報を残しておきます。

続きを読む

【解決】元データを消さずいつもの設定でPDFを書き出したい!

PDF複製書き出しスクリプト アイキャッチ図版

IllustratorファイルのPDF書き出しに[別名で保存]を使用すると,作業中の書類はPDFに変わります。元データがai/epsファイルでもPDFです。

もし書き出しオプションで[Illustrator の編集機能を保持]をOFFにしていた場合,書類を閉じた瞬間に編集可能な元データは消え去ります。大変なことですね。

そんな悲劇を避けるため,次の策が推奨されています。

  • [複製を保存]を利用する
  • [別名で保存]でPDFを書き出したあと書類を閉じるアクションを利用する

ただこれらは,ファイル名の「のコピー」を毎回削除する必要がある,使用しているIllustratorすべてのバージョンにアクションを設定しておかなければいけない,などいった理由でなかなか自分に定着しません。正しいけど面倒臭いことはすぐやらなくなるのが人間というものです。

そこで今回は,開いている書類と同じフォルダ・名前で,プリセット名を指定してPDFを複製書き出しするIllustratorスクリプトを紹介します。

続きを読む

【解決】ストックイラストのタグ付けと画像書き出しを一気に済ませたい!

infoVector アイキャッチ図版

ストックイラストのタグ付けが面倒というのは,制作者なら共通の悩みでしょう。アップロードするサイトが少なければコピー&ペーストでも何とかなりますが,増やすとその分負担も重くなってしまいます。

チャンスを広げるためには何とか販売先を多くしたいものです。

解決策として,ファイルへのメタデータ情報埋め込みが普及しています。IPTC情報やXMPメタデータなど呼び名はさまざまですが,する内容は同じです。Adobe Bridgeを利用して説明やタグの情報をファイルに入力すると,ストックイラストサイトのアップローダーがそれを自動で読む流れです。

しかしこの方法だと,次のような問題がありました。

  • 英語タグにするサイトと日本語タグにするサイトがあり,対応している画像の種類もまちまちで,大量の画像それぞれに情報を埋め込まなくてはいけない
  • PIXTAとpngの組み合わせだと説明(コメント)を正しく認識しない
  • iStock(DeepMeta),123RFが情報を何も認識しない
  • 日本語情報を埋め込むと,Adobe StockとPIXTAで文字化けする

Illustratorで数種類の画像を自動で書き出し,同時に適切な情報をメタデータに埋め込んで,さらに各社アップローダーがそれを正しく認識してくれたらありがたいですよね。

今回紹介するのはまさにそのためのIllustratorスクリプト,infoVector(インフォベクター)です。

続きを読む

【まとめ】XDプラグインCommono 地味な自動化詰め合わせ

XD一般的操作自動化プラグイン アイキャッチ図版

Adobe XDについて,次のような願いを見かけました。

  • テキストを中央揃えにする,塗りをOFFにするといった地味な操作をショートカットにしたい
  • パスの方向を反転したい
  • コンポーネントを解除したとき中身がバラバラになってしまうが,グループに入った状態にしたい

これらは一般的な操作なので,プラグイン制作により比較的簡単に実現できます。しかしAdobe XD用のプラグインを公開するには,プログラムを書くだけでなくアイコンをデザインしたりイメージ画像を作ったり,何かと手間がかかります。個々にリリースするのは大変すぎるのです。

そこで今回は,行揃えの変更など,一般的で地味な操作の自動化を寄せ集めた1つのAdobe XD用プラグインにしました。それが今回紹介するCommonoです。

続きを読む

【解決】XDでも線幅と効果を拡大・縮小したい!

XD線幅・効果拡大プラグイン アイキャッチ図版

Adobe XDでは,パスや四角形などのシェイプを拡大・縮小するとき,もとの線の太さを変えずに維持します。角丸の半径やシャドウ(内側)/ドロップシャドウの距離・ぼかしの数値も同様です。そのため,SVGアイコンなどベクター素材をリサイズすると見た目が変わってしまいます。

グラフィック操作はIllustrator,プロトタイピングはAdobe XDと分担するのが基本的な使いかたでしょう。IllustratorでグラフィックをCCライブラリに登録し,Adobe XDで[リンクを配置]すれば線幅・効果は比率に応じて変更してくれます。

しかし実際のところ,Adobe XDとIllustratorを行ったり来たりするのは面倒です。また,すでにXDのオブジェクトになっているものをCCライブラリに登録しても,線幅が変わらない形式になります。やはりXDで直接できたら嬉しいですね。

そこで今回は,選択アイテムのサイズと線幅・効果を,拡大率を指定して拡大・縮小するAdobe XD用プラグインTransformSessionを紹介します。

続きを読む

【解決】オートフィル感覚でアイテムを複製移動したい!

オートフィル風複製移動 アイキャッチ図版

以前の記事【解決】Illustratorにもオートフィルがほしい!により,選択した2つのテキストフレームの距離でアイテムを複製移動し,数値をオートフィルできるようになりました。

スクリプト実行にショートカットを割り振れば,ショートカットを連打するだけで一定間隔での複製と数値の打ち替えができます。便利ですね。

しかし作業をしていると「パスとかグループとか一定間隔で複製移動だけしてくれないか? 数値はオートフィルしなくていいから」と思うことがあります。リピートグリッドがあれば解決しそうですが,連打でできる爽快感も良いものです。

そこで今回は,選択した2つのアイテムの距離でアイテムを複製移動するIllustratorスクリプトを紹介します。

続きを読む

【解決】スウォッチのグローバルを一気にオフにしたい!

グローバルスウォッチOFF アイキャッチ図版

Illustratorでは,塗りや線に色のついたアイテムを選択し[使用したカラーを追加]を実行すると,色を一気にスウォッチに登録できます。

この方法で追加したスウォッチはグローバルカラーです。アイテムに色を適用した後一括で変更しやすく,書籍の章テーマカラーなどで重宝します。ただ,そのような特別な意味を持たせない単なる色の場合は,グローバルをオフにしたくなるでしょう。

通常の手順の場合,対象のスウォッチのオプションを開き,グローバルのチェックを外す動作を延々と繰り返すことになります。指が痛くなってしまいますね。

そこで今回は,スウォッチパネルで選択しているカラーのグローバルを一括でオフにするIllustratorスクリプトを紹介します。

続きを読む

【解決】原寸でコンタクトシートを作りたい!

InDesignで自動原寸コンタクトシート生成 アイキャッチ図版

イラストや図版を制作していると,しばしば作った画像の名前とプレビューの一覧(コンタクトシート)が必要になります。おもに自分で出来を確認する,依頼者に校正してもらうなどの目的で紙やPDFを用意することが多いでしょう。

コンタクトシートの生成は次の方法が普及しています。

  • Adobe Bridgeの[書き出しパネル(出力)]
  • InDesignの[ImageCatalog.jsx]
  • Photoshopの[コンタクトシート II]

これはこれで便利なのですが,問題は画像を 縦列4 × 横行5 のようなサイズに強制的に割り付ける仕様です。受注制作の場合は,100%で配置したときもっとも効果を発揮するよう意図して作ります。なので,品質を確認するときは原寸であってほしいわけです。

一般的なコンタクトシート(Bridgeより)
一般的なコンタクトシート(Bridgeより)

ImageCatalog.jsxなら,このような流れで解決できます。

  1. ImageCatalog.jsxでコンタクトシートを作る
  2. できたInDesign書類の配置画像を原寸に戻し,等間隔に分布などで間隔を調整する

ただ,行からはみ出したら次の行に送る,ページからはみ出したら次のページを作って送る,という作業を自力でやるのはあまりにも面倒です。そういったいかにも機械が得意な作業は機械にやってもらいましょう。

そこで今回はFinder/Explorer/Bridgeで選択している複数の画像を,指定した倍率でInDesignドキュメントに配置し,きれいに並べるスクリプトを紹介します。

続きを読む

【解決】整列・分布を全部ショートカットで操りたい! (Saligna 1.2)

Saligna整列・分布パネル配置図

以前の記事【解決】整列・分布を全部ショートカットで操りたい!によって,[選択範囲に整列][アートボードに整列]など基準の変更も含めたIllustratorの整列機能がキーボードショートカットで操れるようになりました。

簡単におさらいすると,整列スクリプトSalignaは次のような特徴を持っています。

  • 整列・分布の実行や整列基準の変更をスクリプトで発動できる→ショートカットを割り振れる
  • 横書きポイントテキストの下の空白や,行末のトラッキングを無視し見た目で整列できる
  • 天地左右中央に整列など,2回整列が必要な動作を1回で実行できる

最初のリリースはCS6をメインターゲットにしていましたが,CC2015あたりの仕様変更によりうまく動かなくなった機能があります。今度はおもにCC2018以降を対象に更新しました。

バグ修正や仕様変更など色々ありますが,代表的な変化はこちらです。

  • 安定性の向上(Illustratorの進化,キーオブジェクト取得プラグインOnegaiSDKの採用などによる)
  • グラフオブジェクトの整列・分布に対応(要OnegaiSDK)
  • アイテム単一選択の場合,アートボードに整列
  • キーオブジェクトを無視できるモードを追加(Illustrator 24.2.0の自動キーオブジェクト設定対策)
  • Karabiner-Elements を利用したおすすめショートカット設定つき(macOS専用)

それではmacOS用にインストール方法などを解説していきます。

続きを読む

【解決】既存の黄色レイヤーの色を変更したい!

既存の黄色レイヤーの色を置換 アイキャッチ図版

以前の記事【解決】レイヤー作成のとき黄色レイヤーを禁止したい!によって黄色レイヤーとの戦いは終息に向かい,人々は平和な日々を過ごしていました。

ところがその穏やかな時間は長くは続かず,またしても黄色レイヤーが侵攻を始めます。Illustrator CC 2018からレイヤーの色設定が変わり,旧バージョンのレイヤー 7(シアン)が黄色に化けるようになったのです。

今までは量が少なくさほど苦労しませんでしたが,CS6など旧バージョンからの改訂のたびに黄色レイヤーは現れ,人類を損耗していきます。

そこで開発されたのが,書類上のすべての黄色レイヤー(サブレイヤー)を別の色に置き換えるIllustratorスクリプトです。

続きを読む

【解決】XDで文字の上下にある余白を削除したい!

XDテキスト余白を削除 アイキャッチ図版

「Adobe XDでフォントの余白分の高さを削除してくれるプラグインはないの?」というコメントを見かけました。確かにフォントによっては文字の上下が大きく空いていて,数値上のマージンと見た目のマージンに差が出ます。空きが実際どれくらいなのかわかりにくいですね。

ただテキストのパネルを見ても,Wordのようなトリミングくい込み設定などはなさそうです。

そこで今回は,選択しているテキストを,文字のアウトラインサイズの四角でマスクするAdobe XD用プラグイン「MaskText」を紹介します。

続きを読む

【解決】XDで選択したオブジェクトを一気に差し替えたい!

XDキーオブジェクトで置換 アイキャッチ図版

Adobe XDで作業をしていると,選択しているアイテムをまとめて別のオブジェクトに変えたくなることがあります。例えばただのグループとして作ったボタンを後からコンポーネントに変換するなどです。

普通にやろうとすると,オブジェクトを複製して整列するという動作を延々と続けることになります。これでは終わりが見えず,途方に暮れてしまいますよね。

そこで今回は,選択しているアイテムをまとめて置換するAdobe XD用プラグイン,ReplaceItemsを紹介します。

続きを読む

【解決】Shutterstockの[アートボードを使用]のエラーを回避したい!

Illustrator用アプリresaveEPS アイキャッチ図版

ストックイラスト用にIllustratorデータを作るとき,複数アートボード使ってバリエーションを用意することが多いでしょう。別名保存する際,[アートボードごとに作成]にチェックを入れると,アートボードごとに個別のファイルとして書き出せます。スクリプトやプラグインなどを入れなくても自動で分割してくれるので,量産には欠かせない機能ですね。

しかしShutterstockにepsファイルをアップロードするとき,次のようなエラーが出ることがあります。

[アートボードを使用]の設定を使用してベクター画像が保存されています。この設定を使用せずにベクター画像を保存して、アップロードし直してください。詳細はこちらをご覧ください。

2020年4月20日より[アートボードごとに作成]の設定が使用禁止になり,使用を検知されると上記警告とともに不合格になります。人によっては2020年4月20日以降に使用してもエラーがないようですが,原因はよくわかっていません。

調べたところepsのソースコード中に[アートボードを使用]で書き出したかわかる印があるので,アップローダーはそこを調べている可能性が高いと考えています。

詳しい話は省略しますが,自動処理でその印だけを綺麗に削除するのは困難です。書き出した個々のepsファイルをIllustratorで別名保存し直すのが簡単で良いでしょう。

そこで今回はドロップした複数のepsファイルを,Illustrator 10のepsで再保存するスクリプトを紹介します。

続きを読む

【解決】文字数を指定してダミーテキストを生成したい!

ダミーテキストを生成する アイキャッチ画像

デザイン・レイアウト作業やテキストエディタでの執筆のとき,「□□□□□□□□□■□□□□□□□□□■」のようなダミー文字を使うことがあります。10文字(または5文字)ごとに見た目が変わるため,文章がどのくらいのスペースを占有するか,指定された文字数はどの程度の長さかを大雑把に測るのに役に立ちます。

かつてはダミーくんというアプリケーションで生成していたそうですが,対応機種がMac PPCとあり今やロストテクノロジーです。

そこで今回はダイアログで文字数を指定してダミーテキストを生成し,クリップボードにコピーするAutomatorサービス(クイックアクション)を紹介します。

続きを読む

【まとめ】プラグインとカスタマイズで作ろう!自分だけの最速XD(3)

プラグインとカスタマイズで作ろう!自分だけの最速XD アイキャッチ画像

CSS Nite LP67「All About XD update 2020」とAdobe MAX Japan 2019のXD Short Sessionsでスピーカーを担当しました。XDプラグインやシステム環境設定・Keyboard Maestroなどの自動化アプリケーションを利用し,2秒かかる手間を0.3秒に縮めるような小さな効率化をする話です。

1回目の記事【まとめ】プラグインとカスタマイズで作ろう!自分だけの最速XD(1)では,macOSの環境設定やXDプラグインの設定ファイルを編集するなどの方法でXDプラグインにショートカットを設定します。

【まとめ】プラグインとカスタマイズで作ろう!自分だけの最速XD(2)は,Keyboard Maestroを使ってXDプラグインを実行する,そして画像認識でAdobe XDのUIを操る,の2つがメインです。

3回目の今回は,Automatorの記録機能を使いAdobe XDのUIを操ったり,XDプラグインに自動化アプリ用の裏口を仕掛けて利用したりします。

続きを読む