ゲームのような個性的なデザインに！ドット絵の事例と無料作成ツールを紹介

デザインの切り口の1つとして活用できるのが、ゲームのキャラクターのような雰囲気を表現できる*「ドッド絵」*です。
ドット絵とはファミリーコンピューターやゲームボーイなどのゲームソフトで用いられてきた表現方法であり、小さなマスで構成されたイラストを指します。

今回は、ドット絵のデザイン事例とドット絵を作成できる無料ツールを紹介します。
Webデザインの切り口を増やしたい方は、ぜひ参考にしてみてください。

ドット絵とは

「ドット絵」とは、PCに画像を表示させるための作成手法の1つであり、その手法で作成された画像そのものを指す場合もあります。

PCの画面で画像を表現する際の最小単位である「ドット」や色情報を持つ「ピクセル」で構成されており、1色の四角いマスを大量に組み合わせることでイラストを表現します。

ファミリーコンピューターやゲームボーイなどのゲームソフトでも採用されていたことから、見覚えのある方も多いでしょう。

現在ではPCの表示能力も向上し、マス目が目立たずなめらかなイラストを表現できるようになりました。
ですが、ドット絵は「ドラゴンクエスト」シリーズや「ポケットモンスター」シリーズのようなゲームの雰囲気を表現できるメリットがあります。

参考：
【今日のゲーム用語】「ドット絵」とは ─ かつてのゲームは、これなしでは語れなかった偉大な描写手法 | インサイド

ドット絵を用いたデザイン事例

ドット絵はゲームの雰囲気を表現したいキャンペーンページにおいて用いられています。
ゲーム風の診断ツールや、プロモーションのためのブラウザゲームなど、4つの事例を紹介します。

1.キャリタスQUEST

https://quest.career-tasu.jp/

就職情報サイト「キャリタス就活」では、「キャリタスQUEST」という無料の適職診断ツールを提供しています。RPGを意識した作りとなっており、21問の質問に答えると回答内容に合わせた職業が表示されます。
イラストからテキスト、アイコンまでドット絵で構成されており、ゲームの雰囲気を表現しています。

2.8BIT FAMILY みんなの「家族キャラ」メーカーで楽しもう！！

http://company.crocs.co.jp/news/topics/14027/

靴メーカーの「クロックス」では、2015年3月に日本上陸10周年を記念して、髪や髪型を自由に組み合わせたオリジナルキャラが作成できる特設サイトを公開しました。

好きな音楽とダンスを選ぶと踊りだす仕掛けとなっており、ミニゲームのような遊び方が可能です。

3.みんなのpixivコミックストア

https://comicstore.pixiv.net/

コミック総合サイト「pixivコミック」では、プロモーション企画として、2016年12月に特設サイト「みんなのpixivコミックストア 」を公開しました。
Twitterのフォロワー情報に基づきキャラクターが作成され、pixivコミックを擬似的に販売できるブラウザゲームです。

2週間で32,000人にプレイされ、Twitter上では約172,000シェアされました。
また、pixivコミックも185,000回読了され、プロモーションとしても成功を収めています。

参考：
TVCMでもネット広告でもない、アプリを知ってもらうためにやったある作戦の裏側 ─ pixiv Night #1 レポート｜ pixiv inside

4.スカイダイブグアム

http://www.skydiveguam.com/

グアムでスカイダイビング事業を展開している「スカイダイブグアム」では公式ホームページのデザインにドット絵を取り入れています。
空から落ちていくようなアニメーションも加えられており、サイト上でバナー素材として提供もされています。

無料のドット絵作成ツール3選

WEb上では、ドット絵を作成できるツールも提供されています。
Illustratorのようなイラスト制作ソフトでも作成はできますが、ツールを使うことでより手軽に作成できるでしょう。

参考：
[Illustratorでドットモザイク画像を作る方法 | 株式会社LIG] (https://liginc.co.jp/designer/archives/3336)

1. EDGE

http://takabosoft.com/edge

「EDGE 」は、256マスで構成されたドット絵を作成できる無料のソフトです。
全体のプレビュー画面をチェックしながら1マスずつ塗りつぶしていくことで、ドット絵を作成でき、GIF形式での保存が可能です。

Windowsのみ対応しており、iOSでは利用できないので注意してください。

2.ドット絵こんばーた

https://app.monopro.org/pixel/

「ドット絵こんばーた」はJPG又はONGの画像をドット絵に変換するツールです。
ドットの大きさや色の数のほか、彩度、コントラストも設定可能です。
また、作成した画像はTwitterでツイートもできます。

3.ドット絵ナニカ

http://dot-e-nanika.com/

「ドット絵ナニカ」は画像からドット絵の設計図を作成できるツールです。
画像の形式はJPG、GIF、PNG、BMPに対応しており、作成する設計図のサイズも16ドットから192ドットまで選択できます。

作成した設計図にはドットごとの色が数字が表記され、ドット絵を作成する際の見本となります。複雑なイラストをドット絵で作成したい方は参考にしてみるといいでしょう。

まとめ

ドット絵はもともと少ない画素数で表現するための手法であり、ファミリーコンピューターやゲームボーイなどのゲーム機で用いられてきました。

*ドット絵はゲームの雰囲気を表現できるため、Webデザインの1つの切り口としても活用できるでしょう。*また、期間限定のキャンペーンとして、ゲーム風のLPやアプリを作成する際にも役立ちます。

また、ドット絵はマス目を塗りつぶして描くので、イラストに不慣れな方でも制作できます。自分で1マスずつ塗りつぶしてドット絵を作成するのは手間がかかるという方はイラストをドット絵に変換するツールを活用してみましょう。