【無料・広告なし】画像をドット絵にできるWebサービス「Tapidot」を作った話

アプリ開発

ソフトやゲームを作っては、誰に頼まれたわけでもないのにインターネットへ放流している当ブログ。

以前には、Windowsのマイクを一瞬でミュートできる「MuteSnap」なるソフトも作りました。

そんななか、今回新しくWebサービスを立ち上げました。

それがこちら。

その名もTapidot

Tapidotは、画像をドラッグ&ドロップするだけで、背景の透過や色の変更、ドット絵化などができるWebサービスです。

ピクセル数や画像サイズの変更、エフェクトの追加にも対応しており、普通の画像を昔のゲームに出てきそうなドット絵へ加工できます。

そして、完全無料で、広告もありません。

そもそも、今開発しているゲームで必要になったから自分で作ったものになるので、

今回は、そんなTapidotで何ができるのか、どんな用途に使えるのかを紹介していきたいと思います。

それでは、いってみましょう!

画像を簡単にドット絵へ変換したい

画像をドット絵にしたいと思った場合、意外とやることが多かったりします。

画像を小さくして、色数を減らして、背景を透過して、必要なサイズへ戻す。

場合によっては複数の画像編集ソフトやWebサービスを行き来することになり、ちょっとしたゲーム素材を作りたいだけなのに、加工だけで妙に時間を取られてしまいます。

今回Tapidotで目指したのは、そういった作業をできるだけ一つの画面で済ませること。

専門的な画像編集ソフトを使いこなすのではなく、元になる画像を放り込んで、ドット絵素材として使える状態まで簡単に持っていくためのサービスです。

ブラウザ上で使えるため、ソフトをインストールする必要もありません。

「本格的に一からドット絵を描くほどではないけれど、この画像をレトロゲームっぽく加工したい」という場合に、ちょうどいい立ち位置を狙っています。

Tapidotで画像を加工していく

それでは、Tapidotでできることを見ていきます。

まずは、加工したい画像を画面へドラッグ&ドロップします。

ファイル選択画面を何階層も掘っていく必要はなく、画像をそのまま放り込めば準備完了です。

背景を透過できる

ゲームやWebサイトで画像を素材として使う場合、問題になりやすいのが背景です。

画像自体はいい感じなのに、白い四角形ごと表示されてしまい、素材として非常に使いにくい。

Tapidotでは、画像の背景を透過させることができます。

背景を透明にしておけば、ゲーム画面やWebサイト、別の画像の上へ重ねても、周囲に余計な四角形が表示されません。

ドット絵化する機能だけでなく、実際に素材として使える状態まで整えられるのが重要なところだったりします。

とはいえ、上記の画像の髪の部分もそうですが、画像によっては細かな取り残しがあります。

その際は、Adobeの透過サービスなど、別のサイトを試してみるとよいかと。

※tapidotでは、その場合の代替としてI Love IMGを紹介しています。

色のパレットを変更できる

続いて、色の変更です。

Tapidotでは、用意されたパレットから色を選択して、画像の配色を変えることができます。

筆者の大好きなPC-98風の画風にも対応。

ドットを荒くしただけでは、単純に画質が悪くなった画像に見えてしまうことがあります。

そこで色数や配色も変えてやると、一気に昔のゲームらしい雰囲気が出てきます。

落ち着いた色へ寄せたり、明るいゲーム画面のような配色にしたりと、同じ画像でも選ぶパレットによって印象はかなり変わります。

写真をそのまま縮小したものではなく、意図的に作ったドット絵らしく見せるための機能なわけです。

ピクセル数を変更できる

Tapidotでは、画像のピクセル数も調整できます。

画像は3px。かなり現代調のドット絵になりました。

ピクセルを細かくすれば元画像の雰囲気を残しやすくなり、逆に荒くすれば、より強いドット絵感が出ます。

少しだけレトロな見た目にしたいのか、昔のゲーム機に出てきそうな荒いドット絵にしたいのか。

このあたりを画像ごとに調整できるようにしています。

ただ、ピクセル数を減らせば減らすほど情報量も減っていくので、元の画像によっては何が写っていたのかわからなくなるためご注意を。

サイズ変更やエフェクトにも対応

さらに、画像そのもののサイズも変更できます。

ゲーム内で使う小さなアイコン、ブログへ掲載する画像、SNS用の画像など、用途によって必要な大きさはさまざまです。

Tapidotでは、ドット絵化したあと、そのまま使いたいサイズへ調整できます。

このほか、画像の雰囲気を変えるエフェクトも用意しています。

背景を透過して、パレットを選び、ピクセル数を調整して、最後にサイズやエフェクトを整える。

これらをまとめて行えるため、複数のサービスを行ったり来たりする必要がありません。

無料で、広告もありません

Tapidotは、すべての機能を無料で利用できます。

さらに、画面内に広告も表示していません。

無料のWebサービスでは、加工ボタンを押そうとしたら広告が動いてきたり、画面の半分が広告だったりすることも珍しくありません。

あれはあれで運営上仕方がない部分ではあるのですが、画像を細かく調整する画面では、広告があると普通に邪魔です。

そのため、Tapidotでは今のところ広告を入れず、画像の加工に集中できる形にしています。

また、TapidotはPhotoshopのような本格的な画像編集ソフトの代わりを目指したものではありません。

一つひとつのドットを描き込んだり、複雑なレイヤーを組み合わせたりする用途であれば、専用ソフトを使った方が間違いなく便利です。

Tapidotが得意なのは、すでにある画像を、手早くドット絵風の素材へ変えること。

ゲーム制作中に仮のアイコンが欲しいときや、写真やイラストをレトロな雰囲気へ変えたいとき、背景を透過した画像を用意したいときなどに使っていただければと思います。

終わりに

いかがだったでしょうか。

今回は、画像を簡単にドット絵へ加工できるWebサービス「Tapidot」の紹介をしました。

「この画像、ドット絵にしたら面白そうだな」と思ったときに、わざわざ画像編集ソフトを立ち上げることなく、気軽に試せるサービスにはなったかと思います。

ゲーム素材を作っている方はもちろん、ブログやSNSの画像を少し変わった雰囲気にしたい方も、ぜひ一度遊んでみていただければと。

その他、当ブログでは家庭の限界値を目指す料理のレシピや、部屋をお洒落にするDIY等を紹介しているので、是非サイトのブックマークをお願いします。

それではー。

また読み返したい方へ

タピオカイズムでは、料理・本の要約・DIY・レトロゲームまわりの試行錯誤をまとめています。 気に入った記事があれば、ブックマークしておくと次回すぐ戻ってこられます。

PC
Windows:Ctrl + D / Mac:⌘ + D
iPhone
Safariで上の共有マークを押す →「ホーム画面に追加」
Android
右上メニュー →「ホーム画面に追加」
アプリ開発
タピオカをフォローする
タピオカイズム
タイトルとURLをコピーしました