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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
infoVector アイキャッチ図版

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

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

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

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

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

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

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

動画で見たい

あらましを教えて

アートボードに置いた特定の形式のテキストを,日本語/英語でXMP(IPTC)メタデータに書き込み,ai・eps・jpg・pngファイルとして書き出すIllustrator用スクリプトです。設定により,続けて各社サイトにアップロード可能なZIPファイルを生成できます。名前はinfoVector(インフォベクター)です。

便宜上スクリプトと呼んでいますが,実際はElectronと言う技術で作られたmacOS・Windows両対応のマルチプラットフォームアプリケーションです。インストーラはそれぞれのOS用に分かれ,2つあります。

どのバージョンやサイトに対応してるの?

次の通りです。

macOS用(app)
  • macOS 10.14以上に対応。macOS 10.12/10.13/10.14/10.15(Intel),11.2(Apple Silicon)で動作を確認。Electronは10.11でも動作するので,そこまでは動作の可能性あり
  • Illustrator CS6,またはそれ以上のIllustratorに対応。CS6,CC2015.3〜2021で動作を確認。CS4までは動作の可能性あり
Windows用(exe)
  • Windows 10に対応。Windows 10で動作を確認。ElectronはWindows 7でも動作するので,そこまでは動作の可能性あり
  • Illustrator CS6以上に対応。CS6,CC2019〜2021で動作を確認。CS4までは動作の可能性あり
動作確認済みストックイラストサイト
  • Adobe Stock
  • PIXTA
  • Shutterstock
  • iStock(DeepMeta)
  • 123RF
  • Dreamstime
  • Depositphotos

どうやってインストールするの?

macOS用にはdmgファイルで,Windows用にはexeファイルでインストーラを用意してあります。ダウンロードして開けば指示が出るので,それに従って進めればOKです。

ただしWindowsの場合はオプションで「現在のユーザーのみにインストールする」を選んでください。

インストールオプション選択画面 画像

もしすべてのユーザー用にインストールすると,管理者権限とセキュリティの都合で,infoVectorへのファイルドロップがブロックされます。うまく動きません。

インストールが済んだらinfoVectorアプリを開いてみてください。ウインドウが出てきたら成功しています。

infoVector window image

起動できないんだけど

macOSの場合,インターネットからダウンロードしてきた身元不明のアプリケーションは起動を阻止されることがあります。

開発者不明アプリケーション警告 画像

その場合右クリックから[開く]を選ぶか,システム環境設定のセキュリティとプライバシーで[このまま開く]を選択すれば許可できます(開発元が未確認のMacアプリケーションを開く – Apple サポート)。

どう使うの?

ルールにそって作成したIllustratorファイルを,アプリのアイコンかウインドウにドロップするだけです。複数アートボードを含むファイルとアートボード1つだけのファイル,両方に対応しています。初期設定ではスクリプトは次のように働きます。

  1. 当日の日付で新規フォルダを作り,さらに日本語用フォルダ「ja」と英語用フォルダ「en」を生成する
  2. アートボードごとにグループ「InfoGroup」から情報を読み取る
  3. アートボードごとにai・eps・jpg・pngファイルを書き出す
  4. 読み取った情報を日本語・英語で各ファイルのメタデータに埋め込む
  5. ai+jpg・eps+jpg・eps+pngの3パターンでZIPファイルを生成する

画像を書き出したあと少し間が空きますが,その時間はメタデータの編集やZIP圧縮を実行中です。macOSならdockに,Windowsならタスクバーにプログレスバーが現れるので確認してみてください。

プログレスバー見本画像

ファイルは次のように,英語「en」と日本語「ja」のフォルダに分かれて保存されます。

フォルダ構成見本画像

Adobe Bridgeで実行結果の画像のメタデータを確認すると,このように説明やキーワードなどが書き込まれています。映っていませんが,タイトルも記入済みです。

メタデータ編集結果見本画像

とよとよ/ストックイラストさんに直感的な使いかたを解説していただけました。ぜひそちらもご参照ください(ストックイラストレーター朗報!ファイル情報埋め込み瞬殺アプリが完成! | 夜更かしCMYK)。

Illustratorファイルの作成ルールは?

各アートボードと説明・タグなどの情報をペアにして取得するために,いくつかの決まりに基づいてレイヤーやオブジェクトを用意する必要があります。基本的に自力で作成せず,テンプレートから複製してご利用ください。テンプレートファイル(InfoVector_structure.ai)はこちらからダウンロードできます。

Illustratorファイルは次の状態にします。名前や座標で内容を識別するのでポイントを押さえてください。

  1. 情報テキストを置くレイヤー「info」がある
  2. レイヤー「info」の中にグループ「InfoGroup」があり,情報を紐づけたいアートボードと左上座標が揃っている
  3. グループ「InfoGroup」の中に少なくとも6つテキストフレームがあり,それぞれ何を意味するのか識別できる名前がついている
テキストフレームにつける名前
title_enタイトル(英語)
desc_en説明・コメント(英語)
tags_enタグ・キーワード(英語)
title_jaタイトル(日本語)
desc_ja説明・コメント(日本語)
tags_jaタグ・キーワード(日本語)
infoVector Illustratorデータ構造 画像

これらの条件を押さえておけば,サイズや位置・色・フォントなどを自由に設定可能です。ぜひご自身がわかりやすいようカスタマイズしてください。書き出した画像では,レイヤー「info」は削除された状態になります。

何も起きないんだけど

これまたセキュリティの都合でスクリプトの実行をブロックされることがあります。その場合,次の対策を見て許可を出してください。

macOS

システム環境設定 > セキュリティとプライバシー > プライバシー > オートメーション と辿り,infoVectorの項目のAdobe Illustratorにチェックを入れてください。

Illustratorアクセス権 画像2

ファイルの保存先によっては,フォルダへのアクセス許可を求められるかもしれません。システム環境設定 > セキュリティとプライバシー > プライバシー > ファイルとフォルダ と辿り,infoVectorの項目の”◯◯”フォルダにチェックを入れてください。

Illustratorアクセス権 画像2

Windows

セキュリティソフトがinfoVector内蔵のexec.exeをウイルスとみなし,隔離した可能性があります。

exec.exeが行方不明 画像

復元して元の場所に戻し,exec.exeを無視する設定に変更すると次回からエラーが起こらなくなります。ファイルのある場所は,アプリをインストールしたフォルダ以下 resources/.scripts_unpacked/exec.exe です。具体的な対処方法は各自ご使用のセキュリティソフトのマニュアルをご覧ください。exec.exeは前面にあるIllustratorにスクリプト処理を送るために使っています。

また,インストールのとき「このコンピューターを使用しているすべてのユーザー用にインストールする」を選ぶと,Explorerからのファイルドロップがブロックされることがあります。その場合は「現在のユーザーのみにインストールする」を選び,再インストールします。

インストールオプション選択画面 画像

環境設定はどう開くの?

アプリを起動した状態で,メニューのPreferencesを選ぶと環境設定画面が開けます。ショートカットはmacOSではcommand+K,Windowsではctrl+Kです。環境設定では画像保存オプションの指定・表示言語の変更などができます。

preferences menu image

どんなことが設定できるの?

大きく分けて一般設定,保存オプション,Language(表示言語)の3つです。

一般

一般設定画面

対象のアートボード

Illustrator書類に複数のアートボードがあるとき,どのアートボードを書き出し対象にするかを制御します。

すべての場合,InfoGroupとペア判定できたアートボードすべてを対象にします。

毎回ダイアログで指定の場合,InfoGroupとペア判定できたアートボードの中からダイアログで書き出すものを選択します。ドロップしたファイルごとに毎回ダイアログが出るので,選択をしないと動作が止まります。ご注意ください。

ZIP圧縮する

ONにすると,ai+jpg・eps+jpg・eps+pngの3パターンのZIPファイルを生成します。

スクリーン用に書き出しを使用する

ONにするとJPEG・PNGの保存にスクリーン用に書き出しコマンドを使用します。Illustrator CC 2018以降が必要です。

概ね通常の書き出しよりかかる時間は短く,画質は良くなります。ただしJPEGの最大書き出し可能寸法が不明なため,解像度を高くすると失敗しがちです。最初に少なめの点数で成功するか確かめてから,大量書き出しに移ることをおすすめします。

未使用項目を削除する

書類上の未使用項目を自動的に削除します。パネルで「未使用項目を選択」を実行し,削除するのと同じ動作です。使用にはIllustrator CS6かそれ以降のバージョンが要ります。文字スタイル・段落スタイル・グラフィックスタイル・シンボル・ブラシ・スウォッチが対象です。

保存オプション

Ai・EPS・JPEG・PNGの保存オプションを指定する項目です。

Ai

Ai保存オプション画面

保存バージョンでは,aiファイルの保存バージョンを指定できます。例えばIllustrator 2020〜は2020以降形式,Illustrator CCは初代CCから2019までの形式などです。可能な限り最新を選んだ場合は,起動しているIllustratorができる範囲で最新の形式に保存します。

カラープロファイルを一緒に保存したい場合はICC プロファイルを埋め込むをONにしてください。

EPS

EPS保存オプション画面

バージョン,プレビュー,オプションのサムネールを作成はIllustratorのEPS保存ダイアログと同じです。違いについてはIllustrator でアートワークを保存する方法を参照してください。

各ファイルを別名保存し直す

ONにすると,書き出したepsファイルを改めて1つずつ開いて別名保存します。Shutterstockの「[アートボードを使用]の設定を使用してベクター画像が保存されています」というエラーを避けるための機能です。

エラーについて詳しくは【解決】Shutterstockの[アートボードを使用]のエラーを回避したい!をご参照ください。

JPEG

JPEG保存オプション画面

画質では,圧縮レベルを指定できます。数値が高いほど画質がよく,データ容量は重くなります。

画像の大きさは解像度で指定できます。単位はppiです。実際にできる画像の解像度は,スクリーン用に書き出しを使用するをONにするかOFFにするかで異なります。

ONの場合

画像は指定した解像度になります。

OFFの場合

画像は常に72ppiになり,指定した解像度相当の倍率で拡大されます。例えば300を指定した場合,300 / 72 で大体4.17倍です。

PNG

PNG保存オプション画面

画像の大きさを解像度で指定できます。内容はJPEGと同様です。

Language(表示言語)

Language Preferences image

環境設定画面の言語を変更できます。Japanese(日本語)とEnglish(英語)から選んでください。初期設定はJapaneseです。この項目はアプリケーションを再起動したとき適用されます。ちなみにLanguage設定の表記はずっと英語のままです。

よくある質問と答え

書き出した画像が思ったより大きいのはなぜでしょうか

初期設定では書き出し解像度が300ppiに指定してあります。原寸は72ppiなので,できる画像は 300 / 72 で大体4.17倍の大きさです。原寸で十分なアートボードサイズで制作している場合,解像度設定を72にセットしてください。

書き出した画像に細いグレーの線が入ることがあります

Illustratorデータに問題がなくても,意図しない部分に線が入る現象があります。スクリーン用に書き出しを使用OFFで,画像書き出し解像度350ppiのとき発生するようです。

これはIllustratorの画像書き出し機能が原因で,スクリプトで根本的に解決することはできません。infoVector 1.2.0からは次の対策をしました。

  • スクリーン用に書き出しを使用の設定を追加(Illustrator CC 2018以上で使える,別の種類の画像書き出し機能。ONにすると有効になる)
  • スクリーン用に書き出しを使用OFFかつ解像度350ppiのとき,解像度349ppiに自動変更

それでもまだ線が入る場合は,解像度を1だけでいいので変更してみてください。

ai保存バージョンをILLUSTRATOR 10に指定すると,書き出したaiファイルが保存できなくなります

Illustratorのバグのようです。複数アートボードを個別に保存するとき,Illustrator CSかそれ以下を指定すると書き出したファイルは再度保存できなくなります。

infoVector 1.1.0からはバグ回避のため,一旦最新バージョンで個別に保存してからバージョンを落とす流れに変更しました。まだ1.1.0より前のバージョンをご使用のかたはアップデートをお願いいたします。

また根本的な解決に向け,UserVoiceにご投票いただけると嬉しいです(Exported ai files cannot be saved again – Adobe Illustrator)。

epsを書き出すときIllustratorがクラッシュしたり,オブジェクトの位置がずれたりすることがあります

これはスクリプトでなくIllustratorの問題なのですが,起きる場合は次のような対策をお試しください。

  • カリグラフィブラシを削除する
  • シンボルやアピアランス効果を拡張する

ストックフォトサイトにアップロードしたとき,正しく読み込まれない情報があります

対象のIllustratorファイルがiCloud Driveなどのクラウドドライブに置いてある場合,うまくメタデータが編集できないことがあります。ローカルドライブに移動してから実行してください。

買いたい!

今回のスクリプトはドロップレット(macOS/Windows)セットで販売しています。noteに出店していて,アカウントがなくても購入可能です。

note で買う:3500円

この価格だと手を出しにくいかもしれませんが,少し計算してみてください。

例えば画像を書き出してそれぞれメタデータを埋め込み,3種類のZIPを生成する作業がアートボード1個につき5分かかるとします。
もし時給を1000円とすれば,12個で1000円,42個で3500円です。42個分変換すれば払った金額分戻ってきます。
もし時給を3000円とすれば,12個で3000円,14個で3500円です。たった14個で戻ります!

それにテキストをあっちからこっちへコピペする作業に追われている人と,その時間を新しいイラストの制作や適切なキーワードの設定に当てる人,どちらがより成長できるでしょうか?

しかし一番嬉しいのは,ただただ面倒な無価値作業から解放され,イラスト描きに集中できることです。楽しいことしながらお金が増えていくなら最高ですよね。ぜひご購入いただき,輝けるストックイラストライフを手にしてください。

こちらのスクリプトはminimumAreaに続き,とよとよ/ストックイラストさんとの共同制作です。毎度ありがとうございます。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

広告

コメント

  1. H・M より:

    初めまして。

    infoVector 
    タグ付けの効率化に頭を悩せていたので
    これで開放されると喜び、早速購入いしました。
    全ての画像にタグがついていて感動してしまいました。
    こんな便利なものを作ってくださって感謝しかありません。

    ひとつだけ気になるのは
    JPG、PNG共に解像度を300ppiに設定してあるのですが
    書き出されたものは全て72ppiでした。
    これは、私だけの現象でしょうか?
    お忙しいところ恐縮ですが、教えていただけると助かります。

    1. したたか企画 より:

      ご購入・ご連絡ありがとうございます。

      > 書き出されたものは全て72ppiでした。

      はい,おっしゃる通りです。実は「どんなことが設定できるの?」の項目に書いてある通り,実際にできる画像は常に72ppiになり,指定した解像度相当の倍率で拡大されます。例えば300を指定した場合,300 / 72 で大体4.17倍です。画像購入者が配置するとき24%(72 / 300)を指定すると300ppi相当になります。

      現在300を指定したときに300ppiになる挙動をプログラムで実現できるか調べていますが,見込みは薄そうです。自由に解像度を指定できず,いくつかの選択肢から選ぶ形式になってしまいます。また,Photoshopで再保存するとタイトルや説明などのメタデータが文字化けする可能性があります。

      最終的に「解決法が見つかるまではそういう仕様です」という結論になります。この結果で大丈夫でしょうか?

  2. H・M より:

    ご丁寧な説明をありがとうございました。
    ちゃんと設定の説明を理解しないで
    こちらが300ppiを指定したら、そうなるものだと勝手に勘違いしておりました。
    申し訳ございませんでした。

    私はPhotoshopで再保存という手段で300ppiにしてますが
    文字化けしていません。

    梅雨の季節になってきましたが、お身体ご自愛下さい。

    1. したたか企画 より:

      ご返答ありがとうございます。

      文字化けの条件はわかっておりませんが,実験の結果それは確かに存在するのです。ご注意ください。改めて確認すると,文字化けするのは説明とキーワードでした。Adobe StockとPIXTAで現れます。

      参考ツイート:
      https://twitter.com/natane_stock/status/1252968545056468995
      https://twitter.com/natane_stock/status/1253232313334263809
      https://twitter.com/_alysantwanet_/status/1145876301686824961
      https://twitter.com/sttk3com/status/1382653158208401416

  3. より:

    初めまして
    購入させていただきました

    フォーマットデータで制作すると
    問題なく作れました(感動しました!)
    のですが

    原稿サイズ
    以下の流れで変更すると
    エラーが起こり
    何か方法があれば教えていただけると助かります

    windous10 イラストレーター最新版
    ・フォーマットデータのアートボードのサイズ変更(4000pixel×4000pixelに拡大)
    ・アートボード2消去
    ・infoの透明□のサイズも(4000pixel×4000pixelに拡大)
    ・BACKレイヤー消去(残して置いたらエラーが起きたので)

    1. したたか企画 より:

      ご購入・ご連絡ありがとうございます。まだ何のエラーかわかりませんが,予想でお答えします。

      Illustratorはできる画像のpixel数が大きくなりすぎると,画像を書き出せません。今回はアートボードのサイズがもともと大きいので,infoVectorの環境設定を開いてJPEG・PNGの書き出し解像度を72に設定してみてください。それなら原寸で許容範囲になるかと思います。

      もしまだエラーが起こる場合は,エラーが出ている画面のスクリーンショット(またはスマホなどで撮った写真)をご用意ください。Twitterのダイレクトメッセージやオンラインストレージ経由でお送りいただけましたら幸いです。

コメントを残す