見出し画像

イラストアプリ 『8BitPaintWeb』を作っています。

HALVAL_note

みなさん こんにちは ハルバルです。

株式会社はるばる はいろいろな事をしてる会社なのですが、その中でもちょっと変わり種の『アプリ開発』について お話させて頂こうと思います。

画像1

今年の1月1日にgigazineさんがレビューされた、こちらのアプリ8Bitpaint Webに弊社も開発協力しています。

画像4

↑これは製作者のminordaimyoさん作のスズメ。
プログラムを書く本人が絵を描いてテストしています。

本家はこちら
https://minordaimyo.net/
最新版の直接起動はこちら
https://minordaimyo.net/8bitpaintweb_latest/

元々は開発者のminordaimyo.さんのプロジェクトに弊社のスタッフがお手伝いで参加していたのですが、将来的にAppstore版開発を視野に入れることになり会社全体でバックアップしていくこととなりました。
現在は協業と言う形でテストやデバッグ、要望のとりまとめとUI周りのお手伝いをしています。

詳細はgigazineさんの記事で上手に纏められていますので、今回はこのソフトの特徴を開発側の視点からご少しご紹介できればと思います。


◇◆◇


8BitPaintWebの
良いかも！と思うところ

・動作が軽い！
・解像度が高い！
・素直な書き味！
・フォーマットが8bitのPNG形式

動作が軽い

なるべく軽く動かせるようにいろいろ頑張っています。
『軽い』という感覚を突き詰めると、アナログ、つまり現実における筆記具での操作感が『最も軽い』ということになるかなと考えています。
『8BitPaint』ではなるべくそういうアナログ感を大事にし現実の軽さを再現出来ないものかと日夜試行錯誤しています。

WEBアプリの特性上、最初の読み込みに時間を要する事もあるかと思いますが、一度ブラウザに読み込めばその後は軽快にご利用いただけます。

画像3


解像度が高い

解像度が高い、と言い切るのは若干怖いものがあるのですが、複数のお絵かき、イラスト系のアプリを同じスペックのハードを使った場合、比較的高解像度の画像を扱える…くらいの意味合いでございます。恐縮です。
どのくらい高解像度出せるの？というお話ですが、2020年版のipadでA4 600dpi相当で問題なく動作するくらいです。(他に処理を走らせているかどうかといったことも負荷要素になってしまいますので断言はできません…すみません…)

画像4

iPadなんて普通に高性能でしょ！
というお声も聞こえてきそうで…たしかに その通りです！
しかしながら、同スペックの機材を使った場合 8BitPaintだと比較的大きな解像度でも実用になる…かと思われます。
ちなみにiPadPro2021版の場合、A3 600dpiで軽快に（※1）描画出来ています。

画像5

 ↑ のイラストは今回、本文中で使わせて頂いているものですが、元々は大きなキャンバス（3280 x 4624 ）で描かれ、そこから切り出しています。
A3 600dpi(7016×9921）の半分以下の大きさですが、これでも用途に寄っては十分な解像度が得られています。

所謂８Kサイズが7,680×4,320 pix(3億3千万画素)ですので、それを優に超えるA3 600dpi 7016×9921 pix(6億9千万画素)で快適に動作するというのは一般的にネイティブアプリより不利なWEBアプリ界隈では中々見当たらないのではないか、と思われます。
画像サイズは現在A系B系でいろいろと用意してありますので、もし「重くて動かないなあ」というような場合には少し小さめのサイズを選んでみてください。

※1普通の操作では軽快ですが一番大きなブラシサイズ500pix且つ拡大状態で素早く動かした場合など高負荷の操作の際に処理落ちは感じられます。ご了承ください。

画像3

 ↑メニュー右端のキャンバスサイズ から選べます。



素直な書き味

どのブラシツールも軽く自然な描き味を目指してチューニングされていますが、まずは最もシンプルな『ペンツール』をおすすめします。
特筆することも取り立ててない円形ブラシですが、タブレットの持つ筆圧感知機能をきちんと生かせるように調整されています。
パラメーターはサイズと硬さのみのシンプル仕様です。少し試して頂ければ好みのタッチを得られるかと思います。
手振れ補正機能もありますので、必要に応じて調整してみてくださいね。
あまり高くすると細かい描写がし辛いかもしれませんが、ストロークの長いなめらかな線は描きやすくなります。
そして『ペンツール』を試されたあとは、是非『鉛筆』をお試しください。
ペーパーライクフィルムを貼るとよりサラサラとした書き味を楽しめるかと思います。
程よく抵抗感があると筆を止めやすく、イラストも文字もぐっと書きやすくなります。

画像4

 ↑ 背景色を変えると、黒板にメモする感じの画像も作れます。




フォーマットが8bitのPNG形式

PSD形式に慣れた方であれば分かるかもしれませんが、8bitpaintで書き出したPNGに限り、レイヤーを保持したまま読み書きが可能です。
8bitpaintに限らず、私たちの作っているペイントソフトはどれも8BitのPNG形式を採用しています。
このフォーマットは拡張性があり、8Bit系のアプリで使うPNGはそれぞれにカスタマイズされています。拡張子は閲覧の都合に合わせて『.png』で実際普通のPNGと同様にふるまいます。が、中身はカスタマイズされています。
8BitPaintでは、PNG読み込みの機能がありますが、8BitPaintから書き出されたままのPNG形式であればレイヤー構造を維持したままで再び読み込むことが可能です。※他ソフトで上書き保存されたPNGになると、レイヤーは破棄されます。

ここは、すこし専門的で分かり辛い所ですが、今後何かしらの対策を施して、よりわかりやすく便利に使えるようにと考えています。

デフォルトフォーマットが独自形式でなくPNGであることのメリットは他にもあります。
まず、PNG形式は様々なブラウザで対応済です。大抵の環境でプレビューして頂けます。次に、8bitであるという制約は『すでに圧縮されている』ということでもありまして、保存時に画像劣化が起きません。また、その状態で減色済なわけですから、かなり軽量です。
最後に、特定のソフトウェアの終焉とともにファイルが開けない…！というような悲劇がおきません。
これらは大きなメリットの一つであると考えています。
せっかく描いた絵は何年先でも描いた時の状態で見返したいですよね。
私たちは世界に多く認められ使われているPNGファイルを採用することで、アナログに続く高い保存性と継続性を目指しています。

画像8


◇◆◇



8BitPaintのちょっとダメかも！
でも良いかも…？と思うところ

・レイヤーが8枚(8色)しか使えない！
・機能が少ない！
・ファイル管理が独特‼︎

レイヤーが8枚(8色)しか使えない！

8Bitファイルの哀しい宿命ですが使える色は少ないです。
詳しい説明をするとちょっと長くなりますので、今回は割愛いたしますが、8bitpaintでは、1bitカラー情報を1レイヤーとして8枚持っています。
レイヤー1枚につき1色の制限はありますが、乗算とスクリーンが使えますので工夫次第で上のレイヤーで下のレイヤーにまとめて陰影を落としたりハイライトを入れたりも可能です。
また、色の変更が常に簡単にでき、選択は全てのレイヤーに一度に移動や拡大縮小をかけることができますのでカラーラフの作成などにお役立て頂ける方と思います。

画像16

Photoshopに慣れた方には、「2値のベタ塗りレイヤー」を8枚持っている感じといえば伝わりやすいかもしれません。

イメージ

 ↑ こういった色替えを検討したい時などに便利です。



機能が少ない！

一般的なプロフェッショナル用途に用いられるイラストソフト、アプリに比べ8bitpaintの機能は少ないです。特に調整レイヤーを始めとするレイヤー編集周りやブラシ、直線などはファイル形式からの制約もあり機能がシンプルです。
しかしながら、使いやすさ優先でまとめられたツールは操作の習得にあまり時間を必要としません。

画像13

画像14



ファイル管理が独特‼︎

一般的にWebアプリケーションは使用するブラウザに準拠したセーブ、ロードになるので画像一枚単位での保存読み込みになりますが、8BitPaintWebには『アルバム』という複数画像を一時的に保存しておく機能がありまして、こちらを利用するとアルバム単位での読み書きが出来るようになります。
アルバムはzip形式で保存されるのでたくさんのファイルでフォルダが溢れることもありませんし、MacやPCに作業を移したい時も管理はスムーズです。
また、単品の書き出しではPSD形式も選択することができますので、レイヤー構造を保ったまま外ソフトでの編集を進めたい時などにお役立ていただければ幸いです。

画像11

画像12

※ファイル管理関連のメニューは現在ちょと複雑になってしまったので見直し中です。より使いやすくなるように調整していきますので、本記事の内容と今後異なってくる場合があります。何卒ご了承ください。


◇◆◇


◇テンプレートについて◇
用途や使い方に関連して、テンプレートについて簡単にご説明します。
基本的なテンプレートはWEBサイトのちょっと下の方に ↓ こんな感じで項目がありまして、そこにいろいろとまとまっています。

画像19

※テンプレートの読み込みは上部メニューバー右端のプルダウンから、『PNG読み込み』をご利用下さい。ちょっとややこしいのですが、このPNG読み込みの項目は、8bitPaintで保存された状態のPNGを読み込むためのコマンドになっています。
それ以外の画像には『現在のレイヤーに読み込み』をご使用ください。


◇◆◇


用途について

シンプルで限定的な機能しかありませんが、非常に高い解像度と描き味の良さを持っていますのでイラスト作成やデザインレイアウトの検討、またシンプルな手書きメモソフトとして、アナログのノートやコピー紙のように気軽にご利用いただけると思います。
出力されるPNGファイルの軽さや閲覧性の良さ、保存性の良さは作業全体の最初のステップとして最適です。

・メモやノートをとる
・漫画の背景素材を作る
・写真からイラストを描く
・手描きタッチで図柄を考える
・画面に解説を書き入れる


メモやノートをとる

即時性のあるメモを取るのにはあまり向かないかもしれませんが、じっくり調べものを纏めたり、マインドマップを描いたりする用途には使いやすいです。罫線やテンプレート画像をロックした状態で選択を使うと、対象の文字部分だけ位置を変更したり拡大といった編集が出来ます。

画像5



トレースで素材を作る

『現在のレイヤーに読み込み』コマンドを使うと画像を読み込めます。
↓下の画像はグーグルストリートビューを取り込んでトレース中の画像と、猫の画像を下敷きに線画を起こしているところです。

画像6

画像9

8bitpaintWEBの画像はすべて2値レイヤ―画像なので、高解像度を必要とする漫画素材などに最適です。出来た素材はレイヤーを保持したPSDで書き出し出来ます。


写真にカラーを入れる

以前出かけた花鳥園で取った写真を取り込んでモノクロにして、上から乗算で色を置いてみました。簡易的ではありますが、マスク機能とレイヤーの合成方法として 通常 スクリーン 乗算が使えます。

画像10



手描きタッチで図柄を考える

テクスチャ感があるアナログなタッチは鉛筆ツールが描きやすいです。
Tシャツやグッズのシルクスクリーン用の柄を考えるときなど

・アウトラインがカッチリしすぎていない適度に荒れている
・背景がアルファで抜けている2値画像
・手描きのダメージ感がある

というような、アナログ感が欲しかったりするんですが、8BitpaintWEBの画像はまさにそれが作りやすいツールです。

画像18

大きな画像ファイルでラフを描いて、必要な部分だけ残して拡大して仕上げれば、最大7016×9921 pixの大きなサイズで画像を作れます。


画面に解説を書き入れる

キャプチャーした画像を『現在のレイヤーに読み込み』コマンドで読み込んで、図説やメモを書き入れたりにも使えます。

画像7

画像8

PNG画像ファイルなのでPDFファイルのように閲覧側のソフトを選びません。また、解像度が高いため、大きな図面1枚で複数の内容をメモする事が可能です。
一般的なメモソフトよりもレイヤーの使い方がイラストソフト寄りなので後からの編集が楽なのもうれしいところです。


◇◆◇


さいごに

画像22

8BitPaintWebの特徴を駆け足でご説明させていただきましたがいかがでしたでしょうか。
ちょっとクセの強いところもありますが基本的には描きやすく使いやすくをモットーに制作をしております。
月額も広告もありません。ぜひアナログのノートやコピー紙のようにイラストや手書きメモアプリの最初のステップとしてご活用ください。

今後のシリーズではiPadアプリとしての展開を考えております。iPadネイティブで動くようになれば恐らく今よりも、もっと高速で軽快な動作になる予定です。まだまだ開発は途中ですが、今後にどうぞご期待ください。

果たして私たちの小さな開発がどこまで成功するかはわかりませんが、少しでも気に入って使ってくださる方が増えるように、今後も開発を続けていきたいと考えています。

よろしくお願いいたします。

◇◆◇


twitterのハッシュタグ　#8bitpaintweb では、ユーザーの皆さんのイラストや、開発者minordaimyoさんからの更新情報などがご覧いただけます。
もしよかったら一度覗いてみてくださいね！

※tweetは許可を頂き掲載いたしました。
　ご協力ありがとうございました。

この記事が気に入ったらサポートをしてみませんか？