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

デザインの切り口の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/

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