この記事は グラフィックス全般 Advent Calendar 2025 18日目の記事です。
どうも。個人で趣味でElectron＆Webなお絵かきアプリを作っている者です。（Electron版は未公開）
今回は自作ツール（アプリ）の進捗報告です。毎年やってるんです。
こんなアプリです
以前は単なる自分用のツールだったのですが、現在はウェブアプリとして公開しています。
アプリの名前は「illustmate（イラストメイト）」です。
コンセプトは
「お絵描きの面倒くさいを簡単に」
従来のアプリでどうしても面倒くさかった部分を簡単＆楽にできるアプリを目指しています。
２０２５年のハイライト
ハイライトとかいいつつ、実は今年はまだたった1回しかリリースしていません。なので選ぶまでもなくその1回（＋α）のご紹介となります。サボってたわけではないんですが、いやサボってないわけでもないんですが、お絵かきツールに関しては成果の乏しい年でした。色々と忙しかったし、ＡＩ関係とか新しいことで遊んでる時間も多かったような気がします。
新スタイルエンジンのベータ版
線やブラシのスタイルのクオリティ向上を目的に、ストロークの描画の改善を行い、ベータ版として公開しました。
7月くらいですが、その後更新してないので、いまだにベータ版です。
新スタイルエンジンは実写取り込みのテクスチャ（画用紙を買ってきて塗った）を利用しているので、パーリンノイズを適当に調整しただけの旧版よりいくらか本物っぽくなりました。
また、今まではストロークの中心からの距離でフェードアウトするだけのエッジ処理だったので、テクスチャを使ってもエッジの部分では質感がいまいち出ませんでした。
新スタイルではストロークのエッジの部分と中央部分でそれぞれ違うテクスチャを適用することで、エッジの部分に少し質感が出るようにしています。
エッジ部分の処理は、下のようにストロークの右側と左側に分けてUV座標を計算しています。赤色のほうでいうと、Uは図の左端の中心から右に向かって増加し、Vはストロークの中心から外に向かって増加するような座標になっています。緑のほうはVが逆向きになります。
当初の目論見だとエッジ用のテクスチャをうまく作れば非常に本物っぽい線になるはずだったのですが、実際にやってみるとテクスチャのパターンがもろに出てしまいイマイチだったので、現状は中央部分もエッジ部分も同じテクスチャで描画しています。
パレットとスタイルの調整モードUIの改修
下の図は、長年懸案だった調整モードのＵＩです。絵を見ながら色を調節できるモードのはずが……
画面が半分くらい隠れてしまって、紙一重実用にならないレベルで使いづらかったんです。隙間で見えるようにビューを移動して使ってました。
しかしある日、突然ひらめいたんですよ！
こんな感じでＵＩを上下に分ければ良かったんです。
画面が（前よりは）見える！
囲み塗りの境界線レイヤーの個別指定が可能に
これはすごい。技術的にはべつにすごくないですけど、便利さがすごい。
このイラストのような複数の人物のパーツが重なり合っているような構図で非常に便利です。一般的なペイントソフトであれば、結合後の色で塗りつぶすモードでバケツ塗りをするか、はみ出し防止のレイヤーを頻繁に切り替えながら少しずつ塗るとかになるのではないかと思います。どちらもクリック数が多くてひじょーに面倒くさいです。
この機能はそこらへんの面倒くささがかなり低減されます。レイヤーごとにそのレイヤーがどのレイヤーを境界線として扱うかを記憶しているので、一度設定するだけでＯＫです。また、レイヤー構造も人物ごと等で単純に分けられます。
グリッドグラデーションレイヤーの実装
絵柄で気づく人もいるかもしれませんが、上のイラストはGeminiに生成させたものを手作業でトレースしたものです。たまたま生成ＡＩを色々ためしていたので画像があって、たまにはトレースするのも勉強になるかなと思ってやってみました。
で、そのとき人物の髪のグラデーションをブラシで塗るのがなんとも難しくて、グラデーション機能が必要だと感じました。
そこで作ってみたのが、グリッドグラデーションレイヤーです。
滑らかなグラデーションが描画できます。
中身はメッシュ状の頂点データです。
頂点ごとに変形が可能です。
髪のような複雑な領域は作れませんが、クリッピングマスクを使えばブラシ塗りなどのレイヤーと合成できるので実用上は問題ないでしょう。
消しゴムで透過させることも可能です。
グリッドグラデーションのアイデアは2022年の記事で既に試作したんですが、まさか実装するまで3年かかるとは思いませんでした。
当時のアイデアだけだと格子が見えすぎて問題だったのが11日の記事の方法である程度改善できたので、ようやくアプリに採用することできました。
オリジナルなところは、頂点ごとの色情報をパレット番号と重みで記憶させていて、後からパレットの色値を変えると、ちゃんとグリッドにも反映されることです。頂点に登録された複数のパレット色の合成は5日目の記事で紹介した方法で計算しています。
この機能はまだ完成しておらず、鋭意開発中です。今年中にリリースしたいです。
今後について
ドロー系の限界
イラストメイトは、いわゆるドロー系のツールです。ラスター系が得意とするような、繊細な線とか塗りはどうしても苦手です。これまではラスター系とベクター系のいいとこどりのような方向で行けないか模索してきたのですが、やっぱりちょっと限界はあるように感じています。
もちろん、すごい細かい絵も頑張れば描けますけど、それならラスター系のツールで描く方が楽だと思います。
一方で、描いた線を後から直せるとか、パレットで色を調整したりとかはこのツールの便利なところで、そちらを伸ばして行くことはできそうです。具体的には、手描きの線による作画、アニメ塗りのイラスト、マンガ制作で便利に使えるのではないかと思います。
今後の展望
そういうわけで、今後はアニメ塗り、線画、マンガ制作に特化していこうと考えています。テキスト描画なんかもずっと先延ばししてきたのですが、マンガ制作向けとして実装していきたいです。
そして個人的にずっとやろうやろうと思っていた手描きアニメ制作を本格的にやりたいと思っています。作画には既にこのツールを使用しているので、線画やアニメ塗りに特化していくのは自分の都合にも良いわけです。
というか、自分は結局、自分のためにしか作れないのかもなーと思ったりもします。
それとプログラムが巨大になってきて、もう、大変なことになっています。どこをどう直したらよいか計画するだけでも時間がかかって、いざ直すとバグり散らかすので、来年はまずリファクタリングから始めることになりそうです。
来年は今年以上にぜんぜん実装が進まない年になりそう(笑)いつになったら収益化するんだか…
おわりに
今年もアドベントカレンダーで締めくくることができて良かったです。WebGLアドベントカレンダーの時代も含めると12年やっているらしいです。
健康に気を付けて、来年もまたこの時期にお会いしましょう！
それでは良いお年を。