Skip links
DOTTORIE

ブラウザで本格ドット絵制作!無料ピクセルアートエディタ「DOTTORIE(ドトリエ)」を公開しました。


DOTTORIE作例

ドット絵を描いてみたい。でもソフトを買うのは少しハードルが高い…そんなときに使える無料のピクセルアートエディタ「DOTTORIE(ドトリエ)」をリリースしました。

ブラウザさえあれば、インストール不要ですぐに制作を始められます。16×16の小さなアイコンから128×128の本格的な作品まで、幅広いキャンバスサイズに対応しています。

DOTTORIE(ドトリエ)を使う

 

「ちょっと描いてみたい」から始められるピクセルアートの入口

DOTTORIE

ドット絵は、限られたピクセルのなかに色と形を詰め込む、いわば”制約の美学”です。ゲームのキャラクター、SNSのアイコン、LINEスタンプのワンポイント——用途は多岐にわたりますが、専用ソフトを導入して環境を整えるところで足が止まってしまう方も少なくないはずです。

DOTTORIEは、そうした最初のハードルをなくすことを目指して開発されました。URLにアクセスして、色を選んで、1ピクセルずつ塗っていく。それだけで誰でもドット絵を描き始めることができます。

 

初心者にやさしく、経験者にも応える機能設計

DOTTORIEには、ペン・消しゴム・塗りつぶしといった基本ツールに加え、直線・四角形・楕円の図形描画ツールが搭載されています。Shiftキーを押しながら描けば正方形や正円を描くことも可能で、幾何学的なデザインにも対応できます。

特徴的なのは「ズボラツール」と名付けられた自動調整ペンです。影塗り・ハイライト・簡易アンチエイリアスの3種類があり、塗ったピクセルの色を自動的にやや暗く(または明るく)調整してくれます。陰影をつけたいけれど、一色ごとにパレットを切り替えるのは面倒…そんなときに、なぞるだけで自然な立体感が加わります。

 

レトロからモダンまで選べるカラーパレット

レトロ据置機風の16色、レトロ携帯機風の4色、SFC風の256色、さらにはサイバーパンクやパステルポップなどのテーマカラーも用意されています。パレットを切り替えるだけで、同じドット絵がまったく異なる雰囲気に変化するのが面白いところです。

「パレット自動適応」機能を使えば、描画済みのピクセルを選択中のパレットに最も近い色へ一括変換することもできます。たとえば、フルカラーで描いた絵をレトロ4色パレットに変換すると、懐かしいゲームボーイ風のテイストに様変わりします。

 

下絵トレースとレイヤー機能で作品の幅が広がる

DOTTORIE作例2

DOTTORIEは手描きだけのツールではありません。写真やイラストをインポートして下絵として表示し、上からなぞるようにドット化するトレース機能を備えています。不透明度を調整しながら、元の画像をガイドにして丁寧にドットを打っていけるので、「何を描くか」のアイデアはあるけれど白紙から描くのは難しい、という場面で活躍します。

また、レイヤーにも対応しています。背景と人物を分けたり、影のレイヤーを重ねたりと、1枚のキャンバスでは実現しにくい複雑な表現もレイヤーの組み合わせで実現できます。レイヤーごとに不透明度を変えられるため、「半透明の光のエフェクト」のような表現も可能です。

 

SVG書き出しでIllustratorとの連携もスムーズ

完成した作品は、PNG・JPEG・SVGの3形式で書き出しが可能です。SNSへのアップロード用には等倍や1000%で書き出したPNGが最適ですし、印刷物やグッズ制作に使いたい場合には、SVG形式で書き出すことでAdobe Illustratorなどのベクターソフトでも編集できます。

SVG書き出しは、ドット絵ツールとしてはあまり見られない機能のひとつです。1ピクセルを1つの矩形としてベクター化するため、拡大してもぼやけず、ロゴやアイコンへの展開もスムーズです。

 

制作データの保存と読み込み

プロジェクトは独自の形式でローカルに保存でき、ブラウザ内のストレージにも自動的にバックアップされます。途中で作業を中断しても、次にアクセスしたときに再開できるので、じっくり作り込みたい作品にも安心して取り組めます。

DOTTORIE作例ライト版

DOTTORIEは、PC環境での利用を前提としています。ドット絵制作の精密な操作にはマウスやペンタブレットが適しているためです。スマートフォンからアクセスした場合は、簡易版のLite版へのリンクが表示されます。

制作の合間にちょっとドット絵で遊んでみたい方から、本格的なピクセルアート作品を目指す方まで、幅広くご活用ください。

 

DOTTORIE(ドトリエ)を使う

 

▶︎ パネル・ポスターデザイン制作事例を見る / ▶︎ ポスターデザインのブログ記事一覧 / ▶︎ 特集:反響が変わるポスターデザインの法則 / ▶︎ ポスター費用の概算見積もりへ

最後までお読みいただきありがとうございます。共感する点・面白いと感じる点等がありましたら、【いいね!】【シェア】いただけますと幸いです。ブログやWEBサイトなどでのご紹介は大歓迎です!(掲載情報や画像等のコンテンツは、当サイトまたは画像制作者等の第三者が権利を所有しています。転載はご遠慮ください。)

この記事について

執筆: ASOBOAD編集部

デザインの潮流や作例調査をもとに記事制作・編集を行っています。

運営: ASOBOAD(アソボアド)

デザイン事務所AMIXが運営するオンライン完結型のデザインサービスです。