Figmaでレイアウト・図版・スライドなどを作る際には，1行程度のテキストを大量に用意することになります。
通常ですと，テキストエディタなどで入力した改行区切りのテキストを1行ずつコピペして分割していきます。ただこれはかなり疲弊する作業です。幸いなことに，Figmaではそれを実現するプラグインがすでにいくつか公開されています。
定番なのはNisa Textのようです。しかしスタイルが1文字目で統一されたり，位置が変わったりしてしまうところに改善の余地があります。見つけた中ではSplit textが比較的便利でしたが，完璧ではありません。
しかし，既存の機能やプラグインに満足できなければ自分で作ってしまえばいいのです。
そこで今回は，テキストを行ごと／文字ごとに分割したり，区切り文字で分割・結合するFigma用プラグイン，Split Rows for Figma を紹介します。
続きを読む
Photoshopのアートボードのサイズは，プロパティ（属性）パネルにて数値入力で変更できます。その場合変形基準点は常に左上です。もし中央や右下を基点として拡大・縮小したい場合，バウンディングボックスを手動で動かす必要があります。少々不便ですね。
その問題は以前の記事「基準点を指定してアートボードをリサイズする Photoshop スクリプト」でも取り上げ，スクリプトを使って解決しました。
しかし，このスクリプトは次のような不満が出ていました。
そこで今回は，パネルで変形基準点と数値を指定してアートボードをリサイズ・移動するPhotoshop用プラグイン，ArtboardPanel を紹介します。
続きを読む
MoI 3Dは3D CADモデリングアプリの一種です（モアイMoiであってモルMoLではありません）。
操作性が何となくAdobe Illustratorに似ていて，Illustratorに慣れたかたなら比較的簡単にモデリングできます。あまり絵の才能がなくても，物体や視点を回転したり，パスファインダー的に物体を削ったりできて便利です。
しかもMoI 3DとIllustratorの間では，コピペや書き出し機能を通じてベクターデータのやりとりが可能です。ベクター絵描きにとってはとても頼りになります。ぜひ使ってみてください。
それはそれとして，今回はキーボードショートカットの話です。
MoI 3Dでは，アプリ内の環境設定でショートカットをカスタマイズできます。しかし次の理由によりKeyboard Maestroで管理したくなりました。
そこで今回は，MoI 3DのショートカットをKeyboard Maestroで管理する方法 を紹介します。
続きを読む
前回の記事【解決】画面にOCRをかけて文字を抽出したい！（2）では，スクリーンショットにGoogle Cloud Vision APIのOCRをかけてテキストを取り出しました。もうこの時点で大した手直しが必要ないほど認識精度が高く，日常的なテキスト入力を高速化してくれます。それに最近は，Google レンズのアプリやmacOS自体が画像からテキストを取り出す機能を備えていますね。
しかし，最近はMicrosoft Azureの画像認識（Computer Vision API）がすごいと噂です。特に日本語の手書き文字認識に強いとか。
せっかくなのでそのすごいAPIを呼び出すものを紹介します。ただし，今回もAPI Key（利用者パスワードみたいなもの）を自力で取れるかたが対象です。我こそはという方は続きをどうぞ。
続きを読む
使うアプリが何であれ，レイアウトやデザインを扱っていれば整列は毎日することでしょう。
したたか企画ではこれまで，次のような手段で整列の生産性を向上させてきました。
そして現在Figmaを使うようになり，またしても本体機能として存在しないキーオブジェクトに整列・分布をしたくなっています。
そこでまた丸ごと機能を作りました。最後に選択したアイテムをキーオブジェクトとして扱い，整列や分布を実行するFigma/FigJam用プラグイン，Singari（しんがり） を紹介します。
続きを読む
Illustratorで作業していると，中身にぴったり合うようアートボードの寸法を変えたくなるときがあります。その際は［オブジェクト > アートボード > 選択オブジェクトに合わせる］などを使うと実現可能です。
この機能は，1つ2つくらいのアートボードをフィットさせるのに向いています。書類上のアートボードすべてに適用するには，それらすべてに対して実行を繰り返さなくてはいけません。一括で処理したくなりますね。
そこで今回は，全アートボードを中身に合わせてフィットさせるIllustrator用スクリプト を紹介します。
続きを読む
Adobe XDにはテキストの検索・置換機能がありません。FigmaやSketchにも本体には文字列検索・置換機能は見当たりませんね。プロトタイピングツールには存在しないのが当たり前なのでしょうか（追記：Figmaは2022/10/07に公式の検索・置換機能がつきました）。
ではどうするかと言うと，ユーザーの誰かが開発したプラグインを入れて解決します。例えばFigmaにはFind and Replaceのような名前のツールがいくつか公開されていて，実際に使えます。ありがたいですね。
Adobe XDでは次のプラグインが近い機能を持っています（ほかにもあるかもしれません）。
ただ全般的に，スタイルをキープしたまま置換すること，テキストフレーム内の一部分を置換すること，ドキュメント全体で検索・置換することなどが苦手です。これはAdobe XDプラグインの仕組み上，そういった機能を作るのがとてもとても難しいから仕方ありません。
今回はそれらの問題を解決したプラグインを開発しました。テキストを検索・置換するAdobe XD用プラグイン，FindReplaceSession を紹介します。
特定の形式のテキストを，日本語／英語でXMP（IPTC）メタデータに書き込み，ai・eps・jpg・pngファイルとして書き出すIllustrator用ドロップレットinfoVector 2.3のページです。3.0.0で仕様が変わったため，旧バージョンの情報を残しておきます。
続きを読む
infoVectorは，各ストックイラストサイト用に日本語／英語のIPTC情報を埋め込んで画像を書き出す Illustrator＆Photoshopスクリプト（アプリ） です。バージョン3.0.0から，書き出す画像にICC プロファイル（カラープロファイル）を埋め込めるようになりました。
ただ残念ながら「infoVectorでICC プロファイルを埋め込む設定にすれば，あとはすべてお任せ」という訳にはいきません。あなた自身が，複数の場所で適切な指定をする必要があります。
そこで今回は，infoVectorで書き出す画像にICC プロファイルを埋め込みたいときの設定方法を紹介します。
続きを読む
Photoshopでレイアウト作業をしていると，指定したピクセル数だけ選択レイヤーを移動することがよくあります。そんなときは次のようにするでしょう。
ただ，毎回X座標などのテキストフィールドをクリックして+や-などを入力するのは無駄に感じます。Illustratorのようにダイアログで移動距離を入力し，returnキーで移動・option(Alt)+returnキーで複製移動，の流れにしたくなりますね。
そこで今回は，ダイアログで距離を指定して選択レイヤーを移動するPhotoshop用プラグイン，TranslateLayers を紹介します。
続きを読む
したたか企画では，テキストを行ごとに分割する機能をAdobe XD用・Photoshop用にそれぞれ公開しています。しかしIllustrator用はまだでした。というのも，テキストばらしやテキストばらしAIなど実用的な定番スクリプトがすでにあるからです。
ただもうXDとPhotoshop用に2つも提供しましたし，せっかくなのでIllustrator用も公開するしかないでしょう。それが今回紹介する 複数行のテキストを1行ごとに分割するIllustrator用スクリプト，Split Rows for Ai です。
既存スクリプトでも特に困っていないと思いますが，Split Rows for Ai.jsxのいいところは次の通りです。ぜひお試しください。
macOS版のFigmaデスクトップアプリでは，command+space+スクロールで画面表示の拡大・縮小ができます。しかし普段からAdobeアプリを使用しているかたは，command+space+範囲ドラッグで指定位置を拡大するくせがついていることでしょう。
Figmaでも一応その操作でズームできるときもあるのですが，タイミングがずれると発動しなかったり，何か別の機能になっていたりします。不安定で頼れません。
幸いなことに，Zキーを押しながらドラッグをすると安定して範囲ズームが可能です。つまり，Karabiner-Elementsなどのアプリを使ってcommand+spaceをZキーに変換すれば，目的の動作を実現できるわけです。
そこで今回は Karabiner-Elementsを使い，Figmaデスクトップアプリでcommand+space+ドラッグの範囲ズームを使えるようにする方法 を紹介します。
続きを読む
Photoshopでは大抵レイヤースタイルを使って見た目のデザインを指定します。そのためテロップを作るときなどは，テキストを行ごとにバラしたり，デザインの変わり目でレイヤーを分けたりします。
また1文字ずつ順番に動くアニメーションを作るため，各文字ごとに分解したい状況もあるでしょう。しかし，それを手動でやろうと思うとあまりにも手間がかかります。レイヤーを複製し，関係ない部分を削除，その後位置を揃えるという動作を延々とすることになります。
分割したあとやっぱり繋げようと思っても，複数のテキストを選択してカット＆ペーストでは済みません。1つずつ中身をコピーしてペースト，いらなくなったレイヤーは削除，という流れの繰り返しです。このような作業はぜひ機械に代行してもらいたいですね。
そこで今回は，テキストを行ごと／文字ごとに分割したり，区切り文字で分割・結合するPhotoshop用プラグイン，Split Rows for PS Pro を紹介します。
続きを読む
Photoshopでテロップなどを作る際，1行程度のテキストレイヤーが多く必要になります。その場合テキストエディタで入力した改行区切りのテキストを，コピペして1行ずつに分割することになるでしょう。
ただこれはかなり疲弊する作業です。Photoshopではcommand(Ctrl)+Jでレイヤーの位置はそのままに複製できますが，いったい何回繰り返せばいいのか途方に暮れます。
もしIllustratorでする場合には，テキストばらしという定番スクリプトがあります。名前の通りテキストを一瞬で1行ずつにばらしてくれます。Adobe XDならプラグインSplit Rows（【解決】XDにもテキストばらしがほしい！）が定番です。
Photoshopにもこんな機能があったら嬉しいですね。
そこで今回は，複数行のテキストレイヤーを1行ごとに分割するPhotoshop用プラグイン，Split Rows for PS を紹介します。
続きを読む
Adobe XDでは，よく使うものの直接取得できない数値があります。例えばline-heightやletter-spacingなどです。インターネットを検索すると，それらの算出方法・式を紹介しているサイトがたくさんヒットします。それだけ困っているかたがいるわけですね。
この問題はExcelやGoogleスプレッドシートなどで関数を作ればある程度解決します。単純な計算ならSpotlightやAlfredに式を入力するのも良いでしょう。
しかし，毎回Adobe XDのプロパティインスペクターから数値をコピーし，別の何かにペーストするのは手間がかかります。次のような流れにできたら最高ですよね。
そこで今回は，リアルタイムに式を計算するプロパティパネル的Adobe XD用プラグインOfuda（おふだ） を紹介します。
続きを読む
Adobe XDでフローチャートや図版を作る際，斜めに傾いているアイテム同士の角度を合わせるのに苦労します。というのも，Adobe XDでは回転軸が常に中心になり，回転しながらアンカーポイントや見た目をスナップできないからです。アイテムを近くに寄せ，目視で傾きを確認しながら何となく回転させることになります。
しかしこういった角度は，少しの違いが目立つものです。せっかくデジタルなのだから，数値で角度を取得して正確に一致させたくなりますね。
そこで今回は，直線の角度に合わせてアイテムを回転するAdobe XD用プラグイン AdjustAngle を紹介します。
続きを読む
リアルファブリックは，オリジナルの布をデザインしたり販売したりできるサービスです。パターンデザインをIllustratorで制作しているかたも多いでしょう。
過去の記事「アートボードとパターンのタイルをフィットさせるリアルファブリック用 Illustrator スクリプト」により，Illustratorのパターンデザインをアートボードに揃える工程が素早く正確になりました。しかし，最も面倒なのは画像書き出しです。
リアルファブリックのデザイン登録には，次の2種類の画像がいります。
デザイン用画像の決まりはこちらのようになっています。
形式：JPEG
カラーモード：RGB
解像度：200ppi
サムネイル用画像は特に指定がありませんが，常識的に考えるとこんなところでしょう。
形式：JPEG
カラーモード：RGB
解像度：72ppi
もうこの時点で大変そうですね。Illustratorファイルの中にデザイン用とサムネイル用アートボードが混在する場合，それぞれ解像度を変えて書き出す必要があります。
さらに言えば，デザイン用画像の解像度200ppiがくせ者です。Illustratorで普通に書き出すだけだと，パターンの継ぎ目に白い隙間ができてしまうことが多いのです。
そのため一旦隙間が出にくい解像度で書き出し，規定通りに200ppiに変更，その後Photoshopでパターンに登録して目視確認する，といった複雑な手順を辿ることになります。
つまり，リアルファブリックの決まりに基づいた形式・解像度で，白い隙間ができないよう画像を書き出し，実際隙間ができるか確認するための画像も追加で生成しなければいけません。
今回紹介するのはまさにそのためのPhotoshop & Illustrator用スクリプト， Fabricant（ファブリカント） です。
続きを読む
Adobe XDでデザインを共有するとき，エンジニアやコーダーにメモを残したいことがあります。例えば，データを見ただけでは判断しにくいデザイナーの意図を言葉や絵で補完するときなどです。
メモ書きにはAdobe XDの共有機能／コメントを利用するなどさまざまな実現方法があります。対象アートボード付近のペーストボードに，テキストや画像を置くのもわかりやすくて良いでしょう。特に操作しなくても，書類を開けば目に入るのは大きな利点です。
しかしこの方法では，アートボードを動かしてもメモ用アイテムは一緒についてきません。毎回自力でちまちまアイテムを選択して近くに寄せることになります。せっかくの軽量高速アプリが泣きますね。
そこで今回は，ペーストボード上に置いたアイテムとアートボードを関連付け，一緒に動かせるようにするAdobe XD用プラグイン Kizuna を紹介します。
続きを読む
Illustrator 2022(v26)からリンク画像の扱いが変わりました。それ以前のバージョンではリンク先が行方不明な画像は何も表示されませんでしたが，2022(v26)では低解像度サムネイルが必ず付きます（Illustrator 2020方式で保存した場合。参考：Illustrator2020形式ファイルフォーマットとは | Automation Skill）。
PDFなどを書き出した際は，低解像度サムネイルが見えている状態になります。リンク画像がなくても何があるかわかるようになりました。親切です。
しかしこの仕様はリンク切れを気づきにくくしてしまいました。低解像度でもまあまあ綺麗なので，異常を見逃すのです。
もし保存や書き出しの際にリンク切れを警告してくれたら，ミスを防げそうですね。ただIllustratorでは，保存や書き出しの動作を感知して警告を入れるのは難しいようです。
そこで今回は，Illustratorで画像のリンク切れを確認したあと，特定のメニューを実行するスクリプトを紹介します。
別名で保存や書き出しなど，通常のキーボードショートカットをこのスクリプトで置き換えると，特定のメニュー実行前にリンク切れ確認処理が入るという作戦です。
残念ながら手動でメニューを選んだときは発動しません。それで十分役に立つと思うかたのみご利用ください。
続きを読む
アートボードに置いた特定の形式のテキストを，日本語／英語でXMP（IPTC）メタデータに書き込み，ai・eps・jpg・pngファイルとして書き出すIllustrator用ドロップレットinfoVector 1.4.0のページです。2.0.0で仕様が変わったため，旧バージョンの情報を残しておきます。
続きを読む
