ドット絵を描いてみたい。でもソフトを買うのは少しハードルが高い…そんなときに使える無料のピクセルアートエディタ「DOTTORIE（ドトリエ）」をリリースしました。
ブラウザさえあれば、インストール不要ですぐに制作を始められます。16×16の小さなアイコンから128×128の本格的な作品まで、幅広いキャンバスサイズに対応しています。
「ちょっと描いてみたい」から始められるピクセルアートの入口
ドット絵は、限られたピクセルのなかに色と形を詰め込む、いわば”制約の美学”です。ゲームのキャラクター、SNSのアイコン、LINEスタンプのワンポイント——用途は多岐にわたりますが、専用ソフトを導入して環境を整えるところで足が止まってしまう方も少なくないはずです。
DOTTORIEは、そうした最初のハードルをなくすことを目指して開発されました。URLにアクセスして、色を選んで、1ピクセルずつ塗っていく。それだけで誰でもドット絵を描き始めることができます。
ドット絵は、細部より”シルエット”で読ませる
限られたピクセルで描くドット絵は、細かく描き込む前に、まず「形（シルエット）だけで何かが伝わるか」が勝負どころになります。16×16のような小さなキャンバスでは、輪郭がはっきりしていないと、いくら中を描き込んでも何のキャラクターか分からなくなってしまうからです。
これは、小さく表示されるアプリのアイコンやファビコンを設計する感覚とよく似ています。まず特徴的な輪郭を決め、それが小さいまま成立するかを確かめてから、内側のディテールに入る。DOTTORIEで描き始めるときも、いきなり色を塗り込むより、数ドットの塊で”シルエットが読めるか”を先に確認すると、全体が破綻しにくくなります。省いても伝わる形を見つけることが、ドット絵の第一歩です。
初心者にやさしく、経験者にも応える機能設計
DOTTORIEには、ペン・消しゴム・塗りつぶしといった基本ツールに加え、直線・四角形・楕円の図形描画ツールが搭載されています。Shiftキーを押しながら描けば正方形や正円を描くことも可能で、幾何学的なデザインにも対応できます。
特徴的なのは「ズボラツール」と名付けられた自動調整ペンです。影塗り・ハイライト・簡易アンチエイリアスの3種類があり、塗ったピクセルの色を自動的にやや暗く（または明るく）調整してくれます。陰影をつけたいけれど、一色ごとにパレットを切り替えるのは面倒…そんなときに、なぞるだけで自然な立体感が加わります。
立体感は”色数”ではなく、明暗の段数で生まれる
ドット絵に奥行きを出すコツは、たくさんの色を使うことではなく、明るい・中間・暗いといった少ない明暗の段階を、意図して置くことにあります。プロのドット絵ほど、実は使っている色数は驚くほど少なく、光が当たる面と影になる面を数段の明暗で描き分けることで立体を感じさせています。
DOTTORIEの「ズボラツール」（影塗り・ハイライト・簡易アンチエイリアス）は、なぞるだけで色をやや暗く・明るく自動調整してくれるので、この明暗づくりを手軽に試せます。まずは光源の向きを一つ決め、そこから遠い面を一段暗くする。それだけで、平面的だったドットがぐっと立ち上がります。色を増やす前に、手持ちの色で明暗の階段を作れないか考えるのが、締まった仕上がりへの近道です。
レトロからモダンまで選べるカラーパレット
レトロ据置機風の16色、レトロ携帯機風の4色、SFC風の256色、さらにはサイバーパンクやパステルポップなどのテーマカラーも用意されています。パレットを切り替えるだけで、同じドット絵がまったく異なる雰囲気に変化するのが面白いところです。
「パレット自動適応」機能を使えば、描画済みのピクセルを選択中のパレットに最も近い色へ一括変換することもできます。たとえば、フルカラーで描いた絵をレトロ4色パレットに変換すると、懐かしいゲームボーイ風のテイストに様変わりします。
下絵トレースとレイヤー機能で作品の幅が広がる
DOTTORIEは手描きだけのツールではありません。写真やイラストをインポートして下絵として表示し、上からなぞるようにドット化するトレース機能を備えています。不透明度を調整しながら、元の画像をガイドにして丁寧にドットを打っていけるので、「何を描くか」のアイデアはあるけれど白紙から描くのは難しい、という場面で活躍します。
また、レイヤーにも対応しています。背景と人物を分けたり、影のレイヤーを重ねたりと、1枚のキャンバスでは実現しにくい複雑な表現もレイヤーの組み合わせで実現できます。レイヤーごとに不透明度を変えられるため、「半透明の光のエフェクト」のような表現も可能です。
SVG書き出しでIllustratorとの連携もスムーズ
完成した作品は、PNG・JPEG・SVGの3形式で書き出しが可能です。SNSへのアップロード用には等倍や1000%で書き出したPNGが最適ですし、印刷物やグッズ制作に使いたい場合には、SVG形式で書き出すことでAdobe Illustratorなどのベクターソフトでも編集できます。
SVG書き出しは、ドット絵ツールとしてはあまり見られない機能のひとつです。1ピクセルを1つの矩形としてベクター化するため、拡大してもぼやけず、ロゴやアイコンへの展開もスムーズです。
SVGで書き出せば、ドット絵は”拡大に強い資産”になる？
ドット絵は小さくて解像度が低いもの、というイメージがありますが、DOTTORIEのSVG書き出しは、その常識をひっくり返してくれます。1つのピクセルを1つの矩形としてベクター化するため、どれだけ拡大してもエッジがぼやけません。これは制作物の使い道を大きく広げます。
SNS用の小さなアイコンにとどまらず、Tシャツやステッカーなどのグッズ、さらには大判のポスターや看板にドット絵を使いたい！という場面でも、輪郭のくっきりしたまま引き伸ばせるからです。Illustratorに取り込んで他のデザイン要素と組み合わせることもできるので、印刷物への展開もスムーズです。ドット絵を”画面の中の小さな絵”で終わらせず、印刷やグッズまで見据えるなら、SVG書き出しはぜひ活用したい機能です。
制作データの保存と読み込み
プロジェクトは独自の形式でローカルに保存でき、ブラウザ内のストレージにも自動的にバックアップされます。途中で作業を中断しても、次にアクセスしたときに再開できるので、じっくり作り込みたい作品にも安心して取り組めます。
DOTTORIEは、PC環境での利用を前提としています。ドット絵制作の精密な操作にはマウスやペンタブレットが適しているためです。スマートフォンからアクセスした場合は、簡易版のLite版へのリンクが表示されます。
制作の合間にちょっとドット絵で遊んでみたい方から、本格的なピクセルアート作品を目指す方まで、幅広くご活用ください。
▶︎ デザイン制作実績を見る / ▶︎ デザインのブログ記事一覧 / ▶︎ デザイン制作のガイド・媒体の特徴
この記事について
こんなページも読まれています
