【画像編集ソフト不要】縦書きセリフ付画像の制作工程をStable Diffusion WebUI だけで完結する【基本無料】

2023年7月16日 21:02

どうもこんにちは、marcomedia fireworks使いだったカガミカミ水鏡です。

この記事で紹介するのは、photopeaという画像編集ソフト。特徴は……

ブラウザで動作する。OS縛り一切なし
編集ファイルの保存はpsd（photoshop標準）。ai,xd,figma,sketchなども読める
海外フリーミアムソフトの割に多機能、無料で出来る範囲が広すぎる。有料版との違いは履歴数と広告非表示のみ
日本語ほぼ対応
他ソフトと比べても超軽い（！）

本家サイトに行くだけで即起動するので、まずは触ってみたいという方はぜひ。

しかも、Stable Diffusion WebUI automatic1111用の拡張機能があり、webuiの中でphotopeaが立ち上がるので、画像加工のワークフローがWebUIだけで完結できます。

そこで、俺が最もやりたかったデザインワーク、とりわけ無料ソフトだけでやろうとすると非常に煩雑になるワークフローを、photopeaで実現してみようと考えトライしてみました。

それは、~~DLsiteのエロ同人CGみたいな~~日本語の縦組みデザイン。

photopeaはテキストエフェクト管理が強い！

photopeaは無料の割に、レイヤーエフェクト管理ができるソフトです（しかもphotoshop準拠！）これが出来ると何が嬉しいかというと……

例えば上記のようなデザイン。普通に文字を入れると、大体読みづらくなります。キャラクターが白基調で、背景が黒基調。なので文字を入れると、一部の文字が非常に読みづらくなるので、対処したいところ……しかも上記例は、文字の線が細い明朝体……

というところで、テキスト情報を可能な限り非破壊のままで（アウトライン化やラスタライズすることなく）、複数のテキストボックスに対して、一貫したエフェクトをかけて文字を読みやすくしたい……。

photopeaは無料ソフトの中では非常に珍しく、それが出来ます！テキストをレイヤーグループ化し（ctrl+G）上記画像の右下「eff」をクリックすると色んなエフェクトが出るので「アウターグロウ」を選んでみましょう。

ブレンドモードをスクリーンから通常にして、ちょちょいと透明度を調整し、色を紫など分かりやすいものに…… だいぶ読みやすい台詞になりましたね！

もちろん、右側のグリフを3Dで立体的にするなど、レイヤー個別にもエフェクトが掛けられます。このテクは複数の、同じエフェクトを使うテキストを扱うデザインを作るときに便利どころか必須の機能です！

これ無料のGIMPとか超えてます。マジで。

photopeaの問題点或いは海外ソフトの持病

で、ここまではいいんですよ、途中までは上手くいくんですよ……。しかし、ここで海外ソフトの持病がハードルになります。生成画像を使い、に別の文章を入れてみたところ……最近の生成AIはシンギュラリティを獲得し始めているらしく……煽られました。

なお、この吹き出しは多角形ツールで三角、楕円ツールで円を作りそれをレイヤーグループ化、そのグループにアウトラインのエフェクトを掛けて作ってます。パスで作るの苦手なので……

お気づきいただけただろうか……？そう、「役物処理」ができないのです。

例えば、濁点半濁点「、。」が右に寄っていない。
長音記号「ー」がヨコのママ（最初の画像はタテ罫線「│」を使用）。
もちろん三点リーダも……波長音もダメ～～！
小音「っ」や「ぇ」の位置も中央になってしまい気持ち悪い！

これは海外ソフトでよくある「持病」です。アジア圏の縦書きルールって、煩雑なんで、海外技術者の理解が及ばないところなんですよね……。

そのためphotopeaプラグインはあまり使って無かったのですが、ある日、ふと思いつき、発見したのです。日本語縦書きを理解(わか)らせる方法を！

本題：photopeaで縦書きをする！ために、affinity suite用の縦書きフォントを導入する

ちょっと閑話休題。
affinity suiteは、写真編集・ベクター編集・組版管理のソフト群で、Adobeのソフトで言うところのPhotoshop/Illustrator/InDesignの機能を、買い切りでお安く使えるという~~アンチAdobe希望の星~~デザインツールです。なお、このソフトも前述の病に冒されているんですね。そこで日本人のユーザーグループが、affinityでも縦書きするための技術を開発しており（本家ェ……）、その一つが「affinity用縦書き用フォント」なのです。

そして、同じ病のphotopeaも、この縦書きフォントを使うことで、かなり柔軟な縦書き日本語デザインができるようになることを発見しました！フォントの種類は限られるものの、いずれも読みやすく使いやすいフォントが揃っています！

さて、縦書き用フォントを無償配布されているページの中でのオススメは、スタジオスズメ様です。本当に有り難い……！（可能であればboostスパチャ枠作って頂きたい……）

かなり数多く作られているので目移りする……全部DLでも良いのですが、「必須」と「オススメ」を独断で分けるなら、こんな感じです。ご参考に！