箱ドットの作り方講座。

風:「昨日見た夢にふんふふーん……」
臨:「ω・`)ジー」
風:「滾る思い載せてふんふふーん」
臨:「´・ω・`)チラッ チラッ」
風:「響けアムドライバァァァァァァアアアアアアアアアアアアアア!!!!!!!!!!!
臨:「��(´・ω・`)ビクッ
風:「って感じでアニメ化も終了っと。ま、とりあえず完成って所か」
臨:「あの〜……一体いつになったらペンタブ講座は始ま」
風:「お、おう、来てたのかー! ソーナノカー! 気付カナカッタナー!
臨:「で、あの、ペンタブ講z
風:「ああ、今はちょっとツイッターで流行ってるアイコン、箱ドットとやらを作っててな。何? 興味がある!? じゃあ仕方あるまい! ちょっと教えてやろうじゃないか!」
臨:「(´・ω・`)あの」


箱ドットとは何か。

風:「って訳で今回は箱ドット作成講座を単発でやる。単発って言ったからには今回で終わらせるぞ!」
臨:「……むむ〜。まぁいいですけれど〜。ちゃんとペンタブ講座もやってくださいね〜?」
風:「善処しよう
臨:「ほ、本当にやってくれますよね〜?」
風:「善処シヨウ。いや、ごめん頑張る」
臨:「それで結局箱ドット、って何なんでしょうか〜?」
風:「ふむ、元ネタとしてははキャラクターペーパートイの「グラフィグ」のようだな。それを花屋(oat)さんがドット絵で起こして、素体を配布した所、ツイッタープロフィール画像として流行しはじめた。それがいわゆる箱ドットだな。具体的にはこんな感じのやつだ」

臨:「これは……わたしですね〜。それでドット絵、っていうのはこんな感じ、っていうのは解るんですけど、ドット絵って具体的にはどういうモノなんでしょうか〜?」
風:「ドット絵ってのは基本的に、極端に解像度の低い画像、だと認識してくれればいい。今回の画像は分り易いように多少引き伸ばしてはいるが、本来のサイズは42×42ピクセルの画像が元になっている」
臨:「小さい、って事は描くのが簡単、って事なんですかね〜?」
風:「んー。まぁ箱ドットなんかはサイズが特に小さいからそこまで時間はかからんと思うが、普通のCGと違って、小さいって事はやれることが少ない訳で。逆に技量の差が大きく出やすいと思う。小さい画面にピクセル単位で色を打つ事で、絵を表現する技術だ。画面に向かってポチポチ色を打つ作業はまさに職人芸だと言えよう」
臨:「ほぇ? ペンタブレットを使って描いていくんじゃないんですか〜?」
風:「まぁペンタブの方がやりやすいとは思うが、あんまり変わらんぞ? 線を描写するっても一点一点色を打つだけだからドット絵はマウスでも簡単に出来る。だからこそのこの講座な訳だ」
臨:「そんな暇があったら本来のペンタブ講座の方をやりましょうよ〜!」
風:「それはソレ、これはコレ。元々はコンピューターゲームでの容量削減の為の技術だったんだが……今やゲームでドット絵を見る事はほとんど無いだろう。まぁドット絵には普通の画像とはまた違った趣きがあるんで一定量のファンがいるのも確かだ」
臨:「確かに普通のCGとは違った感じになりますよね〜。他の箱ドットも見ましたけど、皆小さくて可愛いのばっかりです〜」
風:「そんな訳で暇つぶしというか、更新サボりのお茶にごし的な更新なんだが、お付き合い頂こうか」
臨:「了解しました〜」
風:「そういえばモチーフはどうする?」
臨:「お姉ちゃんで行きましょう〜!」

風:「お前地味に姉ちゃん好きだよな」
臨:「そりゃ大好きですよ〜。お姉ちゃんですし〜」
風:「……よくわからんが、とにかくよし!」


作業開始

風:「とりあえず今回箱ドット作成に利用したソフトはEDGEだ。リンク先のサイト様から無償ダウンロード出来るので各自覚悟完了の上以下略」
臨:「えっと、右側にあるEDGE1.29本体+説明書、でいいんですよね〜」
風:「うむ。解凍して出来たアプリケーションからインストールを開始してくれ。あまり細かくは紹介しない。って訳でEDGEを機動させたらまずは箱ドットの素体を開いてみてくれ」
臨:「箱ドットの素体って何でしょうか〜?」
風:「ああ、すまん。箱ドットの素体っていうのは箱ドットを書く際に基本となるモデルの事だ。えっとたしか転載の際にも許可とかは必要なかったはずなんで……まぁ本家様でも配ってるけど、一応貼っておく。右クリックから名前をつけて画像を保存でもしてくれ」

臨:「これをEDGEから開いて、それを加工していけばいいんですね〜。よ〜し頑張りますよ〜!」
風:「って訳で開いた画面がこっちだ。適当に補足もいてれるんで画面は見づらいと思うが、まぁ適当に頑張れ!
臨:「アドバイスが全然アドバイスになってませんよ〜!」

風:「ま、簡単に言うと虫眼鏡からその下部の倍率を選んで書きやすいサイズを調整してから、ペンボタンを選んでから描写って感じだな」
臨:「色は右側のカラーパレットから選べばいいんですよね〜、って間違ってウィンドウを消してしまいましたよ〜!」
風:「カラーパレットは本体ウィンドウ上側にある”表示(V)”からまた出せるから消しても慌てるな、っていうか大体こういう別ウィンドウはツールバー上の表示から出せるから覚えておくように。って訳でこの素体から更に色を塗っていく。まずは分り易いようにこのサンプルに色を塗ってしまおう」


とりあえず塗り。


風:「って訳で塗ってみた」
臨:「(´・ω・`)凄く……赤いです〜……
風:「下地なんで本来は肌色を塗るんだが、それじゃ解りにくいと思ってな。とりあえず赤系のサンプルから色を選んで塗ってみた。右側のカラーパレットを見てもらえれば解るように、暗い、普通、明るいで三色程度を横に連続してセットしておくと後で塗りなおしやら色選択が楽だぞ。って訳で最初は明、普、暗の三色で色を塗るのがオススメだ」
臨:「色はカラーパレットの任意の場所をダブルクリックで、選べるんですよね〜」
風:「それ以外にも細かく変更できるが、まずはソレでいいだろう。とりあえず、縁取りを黒で塗らない事を徹底してくれ」
臨:「ほぇ? でも普通絵を書く時は縁取りというか、線画を描いてからやりますよね〜?」
風:「普通の絵ならそうだが、ドット絵の場合、黒で縁取りをするとドット絵独特のカクカク感が出過ぎる。絵が全体的に角張って見えるってわけだな。まぁドット絵はもとから角張って見えるもんだし、そもそも箱ドットだし、とか色々あるんだが。基本的には中を塗る色を濃くした色で縁取るのが基本だ。縁の色自体や、角張具合に違和感を感じたら明るく調整していけばいい」
臨:「えっと、縁取りと中身で2色使うとして、残りの中間色はどうすればいいんでしょうか〜?」
風「中間の色は側面を塗ってくれ。側面を別の色で塗る事で箱ドットに立体感が出るぞ。って訳で色塗りの基本が解ったら今度はそれを肌色に調整していこう。どこをどのパレットで塗ったか、ってのは保存されているから、塗りなおしをしなくてもカラーパレット上の色を調整するだけで簡単に色が変えられるぞ」


色の調整


風:「肌色はまぁ茶色を基本に全体的な明度を上げていけばOKだ。とは言っても背景色が白のままだと解りにくいだろうから、この場合は周囲の色をわざと灰色に設定しておくのもいいだろう」
臨:「えっと、確か灰色が周囲にある方が色が正しく認識出来るんですよね〜」
風:「光の認識の問題だな。色が混ざらないように黒系、そして明るくも暗くもない灰色がベスト、というお話だがまぁどうでもいい。塗りたい色がはっきり解る、っていう方が重要だな」
臨:「それで、細かい色の変化はどうすればいんでしょうか〜?」
風:「うむ。色を選択すると、カラーパレットの下部にその色のステータスが表示される。赤、緑、青のRGBバーだな。それを動かして色を調整してくれ。具体的な数値を指定する事も出来るぞ」
臨:「右に動かせばその色が強くなって、左にすると弱くなりますね〜」
風:「光の三元素なので発光しなくなる、ってのが正しいかもな。全部左に寄せると真っ暗になり、全部右に寄せると真っ白になる。白色系にするなら全体的に数値を上げ、暗くするなら数値を全体的に下げると良い。色自体はRGBの比率を変えなければそのまま維持出来るからな」
臨:「でも、どんな色にすればいいのか悩みますね〜」
風:「基本的には他の色との兼ね合いで考えてもいいから細かい調整は後回しでもいいかな。とりあえず何色! って決まっていればいいぞ。後で修正すれば良いだけだしな。とはいえどこをどの色で塗ったか混乱しないようにカラーパレットは横の列を揃えるとかしておけよ」
臨:「上から順に埋めていったりはしない方がいいんですね〜」
風:「とりあえず三色で指定してるが、もっと中間の色が欲しい、って場合もなくはないからな。余裕を持ってやると良いぞ・下地が塗り終わったら次は本格的に絵を追加していく」


線の追加


風:「って訳で一番難しいだろう線の追加に入る」
臨:「あのままだと丸裸ですからね〜」
風:「ってわけで髪の毛を追加から入るが……これはもう描こうとしているキャラクターの髪型に大きく依存するので、他の人の箱ドットを参考にするなりしてくれ、としか言い様がなかったりもする」
臨:「相変わらずなげやりすぎますよ〜!」
風:「ま、元ネタがグラフィックなだけあって、変にモチーフの髪型を再現しようとするよりも、平面にどんな紙を貼りつけたらそれっぽくなるか、を意識した方がいいかもしれんな」
臨:「箱の上から紙を貼り付ける、ってイメージでしょうか〜?」
風:「ま、そんな感じ。今回俺達が描こうとしている姉は基本ポニーテールなんで余剰分はもみあげくらいか。もみあげは全面の左右を下に伸ばしていけばOKだ。長髪のキャラクターの場合は右側はもちろん、左の奥、背面部分も意識して描くとよりそれっぽくなる。いっその事、まずは単純に5〜6ドット程度箱の周りを伸ばして書いてみるのもいいかもな」

臨:「長髪の場合はここから髪型に対応してすその部分を削って行けばちょっとは意識しやすそうですね〜」
風:「ま、ポニテにはまったく関係の無い話なんだがな。ちなみに貴様の髪型とか、ぶっちゃけ何も参考にするものがなかったからかなり適当なんだぞ。これ作成秘話な」
臨:「秘話でもなんでもないですよそれ〜!」


簡単な色塗り


風:「これも基本の色塗りとほとんど同じ説明になってしまうが、上側と前面の色は同じで問題ない。側面を濃くする事で立体感が出る。これを忘れないようにな。まぁ人によっては上側も暗くしてるみたいだが光の指し方の意識の仕方だ。後はこれも再三言うが、平面ぽさだな。ペタっと張り付いてる感の方が箱ドットらしくなるぞ」
臨:「はいはい〜。えっとまとめますと〜……、線を伸ばす時は紙を貼り付けるイメージで、上と前は明るく、側面を暗く、って感じですよね〜」
風:「んむ。とりあえずの基本を抑えたら次はちょっと手を加えて調整してみるぞ」
臨:「了解です〜」


調整。


風:「って訳で、慣れてきたら四角の外側にはみ出したり、髪の毛を少し出っ張らせたりとか、変化も付けてみよう。参考画像だと、ポニーテールの部分は基本の四角を後ろ側につけただけだし、慣れればツインテール程度は簡単につくれると思うぞ」
臨:「四角をイメージして、つけたり、削ったりするのが基本なんですね〜」
風:「それと、一番最初でも言ったが、色が暗ければ暗いほど線が強く見えてガクガクになるので、色が濃すぎる場合は縁取りでも少し明るい色に変化させると柔らかくなったりする。参考画像だと、前髪の先端を薄くしたり、もみあげの”つの”部分を強調させる為におでこの角部分の色を少し下げたりしている。こういうのは作業中の大きい倍率だとあまり目立たないので、頻繁に等倍や2倍にしてみるのをオススメする。作業中は気にならなかった部分が、いざ等倍にしてみると変だったりするからな」
臨:「大きくしてみると変な形だったのが、実際のサイズにすると丁度いい感じだったりもしますからね〜」
風:「細かく描写出来ない分、どの色を使って、どこに打てばどう見えるか、っていうのが重要だからな。ちゃんと出っ張って見えるか、曲線に見えるか、とか。要するに誤魔化しや錯覚も利用してる、って事だな」
臨:「やれることが少ない分、見せ方が重要って事なんですね〜」


身体部分について


風:「身体部分については、それこそ服装による差が出るので一概にどうとは言いづらいが……。こっちは頭部分よりも描写出来る場所が少ない。その上体はピラミッド状、四角錐の形をしているので、パースも取りづらくなる。一番上なんかは6ドット程度しか描写出来ないので、色による誤魔化しは必要かもしれん」
臨:「頭の部分は四角形でしたから、貼り付けるイメージもやりやすかったですけれど、三角形だとまた難しそうですよ〜」
風:「うむ。また足の部分どうなってんだよ、って形状でもあるからな。服装によっては一番困る場所なのかもしれん。一応の参考としては、高さのラインを意識すると、やりやすいかもしれんな」
臨:「高さのライン、ですか〜?」
風:「参考画像で言えば上着の一番下のラインだな。前面も側面も高さラインの角度は顔と変わらない。ってことを意識するといいかもしれん」
臨:「うにゅにゅ〜? よく解らないですよ〜」
風:「ざっくり言ってしまえば、前面は6ドット毎に高さを1変える側面は2ドット毎にすると高さが揃ったラインが書けるって事だ。参考画像だと上着の形の都合上、全然参考になってないんだが……。基本的には高さを揃えた線を書いてから、形状に合せて削る方が簡単で分り易いと思う」
臨:「髪の毛もそうですけれど、一度はっきりとした形をつくってから、削る方が楽みたいですね〜」
風:「実際の絵と違って、色を打ち込む形だからな。何もない所から思い通りの形を描くより、出来た形から変形させていく方が楽だとは思う。まぁ個人的な意見かもしれんがな」


服装その他


風:「後は下半身部分とかだが、上半身と違って下半身は結構余裕があるんで、好きに描写出来る所かもしれん。元々形もサンプルで決まってるからそうそう形も崩れないだろうしな」
臨:「スカートとか、腕時計とか、持ち物とかも持てるかもしれないですね〜」
風:「その辺は自由にやってみると良いだろう。地味ながら多分ここが一番自由に出来る場面なんじゃないかな、とは思う」
臨:「顔の部分もそうですけど、皆色々変化させてますよね〜」
風:「それとは別に白や黒系の塗りについてだが。ドットで打ってる時は解りづらいが、しっかり色毎に変化を付けないと、小さくした時や、背景透過色にした時に泣けるので注意するように。大きい画面では気づかないような差でも、意外と小さくすると違和感が出たりするからな。って訳で後半適当だったが、とりあえずはこんなもんかな」
臨:「えっと、でも瞳の部分が素体のままなんですけれども〜」
風:「と、思ったが、最後に目の話が残ってたか。瞳はキャラクターの命とも言えるんで各人気合い入れてやってほしい。って訳でいくつか紹介しよう」


目の書き方:シンプル


風:「って訳でまずはシンプルな目から紹介だ。キャラクターの瞳の色に応じて、素体の瞳部分に合せて色を塗るだけだ」
臨:「説明が必要無いくらい簡単ですね〜」
風:「うむ。だが単純である事は別に悪くはない。むしろ一番ドット絵らしい感じが出てるとは思うぞ」

下光


風:「次に紹介するのは「下光タイプだ。とは言っても名称は適当だぞ」
臨:「大きくしてみるとちょっと変かな〜、とか思いますけど、小さくしてみると意外と綺麗ですね〜」
風:「多分今の箱ドットの中では一番多いんじゃないか、とは思う。瞳の上と下で色を分け、下、もしくは上に中央2ドット分だけ白系統で光を入れる。これもかなり簡単だな」
臨:「シンプルな方がドット絵らしい、って事ですね〜」

グラディエーション。


風:「最後に紹介するのはグラディエーションタイプだな。3〜4種類程度に色を分け、上から順に塗って擬似的にグラディエーションを作成する」
臨:「実際にグラディエーションがある訳じゃないですから、擬似的、なんですね〜」
風:「まぁ瞳部分は縦8ドット、横3ドットも余裕があるからな。擬似グラディエーションでも結構綺麗に仕上がるとは思う。後は任意に光を差せばOKだ」


おまとめ。

風:「って訳で今までの講座内容をまとめて、俺が適当に指示を出しながら好き勝手絶頂にやらせたのが、こちらになります。ってか」

風:「ちょっと大きめの画像やら、カラーパレット詳細はこっちだな。目の方からだが、一応2倍サイズのも右側にあったりするぞ」

風:「とりあえず大きな変更点は瞳。これはまぁ、お察し下さい。素体では眉毛は無いが、こっちも追加した。んでほっぺたに少し赤みを左右3ドットつけて、服装襟元を多少修正。ポニーテールのしっぽを垂らして、髪留めの余りをちょっと垂らしてる。けど小さいサイズだとちょっと変だったかもな。ともかく満足したかね?」
臨:「はいっ! 完璧です〜!」
風:「にしては目付き超悪いし不機嫌面だよな」
臨:「それがお姉ちゃんですから〜!(`・ω・´)」
風:「お前それでいいのかw って訳で人にもよるが大体1〜2時間程度で素体からぱぱっと作成出来る箱ドット作成講座はコレで終了だな」
臨:「じっくりやる人はもうちょっとかかると思いますよ〜。わたしは手伝ってもらいましたし、なにより元がありましたから〜」
風:「後はGIFアニメを使う事で、これをアニメーションさせる事も可能なんだが……そっちはまぁ、要望でもあればやる、って感じにしとくか。そもそもこのエントリ自体が本当に参考になるのか解らなくなってきたぜ!」
臨:「技術的な事は結局あんまりやってませんからね〜」
風:「とりあえずまとめると」

1:ドット絵は解像度の低いCG。
2:ドット絵描くならEDGE等のソフトがあった方がいい。(ペイントでも出来るけど)
3:箱ドットは箱型を意識して、紙を貼り付けるイメージするとそれっぽい。
4:色は濃い目、普通、明る目の三色で塗るのが基本。
5:黒縁取りは危険。側面の色で奥行きをつける。
6:はったりや誤魔化しは超必須。

風:「ってとこかな。うむ。まとまってないな!」
臨:「て、適当です〜!」
風:「本当はお茶にごし更新で2、3時間でぱぱっとやろうと思ってたんだが……全然遅れちまったな……。って訳でもう月曜になっちまってんじゃねぇか……。いや、日付だけ調整して月曜日は何もなかったかのようにジャンプ感想をやろう。って訳で今回はこれまでだ。ペンタブ講座は、ちゃんとやるよ! きっとやるよ! 多分(ry」
臨:「ちゃんとやってくださいよね〜!」
風:「っつーわけで、また次回」
臨:「はい、それでは〜、ってちゃんと聞いてますか〜!」
風:「ゼンショシマス。ノシ」