てけとーぶろぐ。

ソフトウェアの開発と、お絵かきと、雑記と。

nurie-app.siteと生成AIでデジタルぬりえをつくる

nurie-app.site はデジタルぬりえを塗ったり作ったりできるサイトです。

nurie-app.site

この nurie-app.site と画像生成AIを使って無料で簡単にデジタルぬりえをつくってみましょう。

元画像の生成

色々な生成AIがありますが今回はMicrosoft Copilotを使います。

copilot.microsoft.com

例えばクマのぬりえが作りたかったら以下のメッセージをCopilotに送ればPNG画像がつくれます。

Create a simple, black-and-white line drawing of a cute, Japanese-cartoon-style bear for a children’s coloring page. The bear should have thick lines, and a friendly expression. The image should be easy to color, with low detail and no blackout areas.

もちろん「bear」を別の単語に変えたりしてアレンジしてもよし、 入力するたびに違う絵となるのでいい感じの絵ができるまで何度か試すのもありです。

さてこんな画像ができました。

クマ

SVG画像に変換

nurie-app.siteではぬりえをつくるのにSVG形式の画像ファイルを使います。

Adobe ExpressのSVG変換機能を使うとJPGやPNG画像をSVG画像に変換できますので変換します。

www.adobe.com

ぬりえで塗りたい部分の塗りつぶし

こうして出来上がるSVG画像は線以外の部分は透明になっています。 これに対してnurie-app.siteでぬりえをつくるのに使うSVG画像は ぬりえで塗りたい部分が塗りつぶされている必要があります。 そこでその塗りつぶしをします。

無料でSVGファイルを編集できるアプリということで今回はInkscapeを使います。

表示の設定

InkscapeでSVGファイルを開きます。

はじめに透明部分を塗りつぶしたことがわかるように 透明部分が市松模様で表示されるよう設定します。

メニューの「ファイル」→「ドキュメントのプロパティ」とクリックします。 表示されたドキュメントのプロパティダイアログで 「表示」タブの「表示」の中にある「市松模様」にチェックを入れ、ダイアログを閉じます。

塗りつぶし

ぬりえで塗りたい部分を塗りつぶしていきます。

画面左端に並んでいるツールのボタンの中の 「バケツ(塗りつぶし)ツール」を選択します。

画面下に並んでいる色の中の白を選択します。

塗りつぶしたときに輪郭線と塗りつぶしの間に隙間ができないように 画面上に並んでいるバケツツールの設定で以下のように設定します。

ぬりえで塗りたい部分をクリックすると塗りつぶしのパスが作成され 塗りつぶされるので、次々とクリックして塗りつぶしていきます。

パスを最背面に移動

輪郭線と塗りつぶしの間に隙間がない代わりに 塗りつぶしのパスが輪郭線に若干覆いかぶさっている状態なので 塗りつぶしのパスを最背面に持っていきます。

画面左端に並んでいるツールのボタンの中の 「選択ツール」を選択します。

最背面に持っていきたい塗りつぶしのパスをクリックして選択します。 キーボードのEndキーを押すとパスが最背面に移動されます。 同様にすべての塗りつぶしのパスを最背面に持っていきます。

保存

できたらSVGファイルとして保存します。

メニューの「ファイル」→「名前を付けて保存」とクリックし 表示されたファイルの保存先の選択ダイアログで 「ファイルの種類」を「プレーンSVG (*.svg)」として保存します。

デジタルぬりえの作成

SVGファイルができてしまえばあとは簡単です。

https://nurie-app.site にアクセスします。

下の方にある「ぬりえを作る」ボタンをクリックするとぬりえを作る画面が表示されます。

右上の「参照」ボタンをクリックして作成したSVGファイルを選択すると画像が表示されます。

ぬりえに使うパレットも設定してみましょう。 「パレット」の右の方にある「選択」ボタンをクリックして 表示されたダイアログで「16色」を選択し「OK」ボタンをクリックします。 ぬりえに使うパレットが16色のパレットとなります。

あとは右上の「保存」ボタンをクリックすれば出来上がりです。

ぬりえを作る画面

右上の「シェア」ボタンをクリックして表示されるURLからぬりえを楽しみましょう。

ぬりえを塗る画面

補足など

  • SVG画像の塗りつぶしについては 有料のアプリですがAdobe Illustratorã‚„Affinity Designerを使うと 隙間ができないように工夫せずともピッタリ塗りつぶせます。

  • 画像生成AIで、塗りつぶした状態の画像を生成してしまって、 その画像をSVGConverterã‚„Vectorizer.AIでSVG画像に変換すれば 手作業での塗りつぶしなくnurie-appにそのまま使えるSVG画像が作成できそうにも思いますが 自分の方ではいい感じの画像生成ができていません。

  • 今回は子ども向けのようなぬりえでしたが、 大人向けの緻密なものやステンドグラスのようなものなど、 あると塗りごたえがありそうです。