私が普段社内ツールを作成する際に気をつけていることは、

愛嬌があるツールを作る。

ということなのですが、これを一番表現しやすい分野がWeb Designです。

そのツールに愛嬌があるかないかは、ユーザーが判断するところですので、ソースコードがいくら可愛らしくても見た目のインパクトにはかなわないわけです。

今回はそんなWeb Designのアイコン作成に便利なドット絵作成のWebアプリPiskelを紹介します。

Piskel

このWebアプリは無料で使用することが出来、ログインすることでアカウントに紐づくギャラリーに作成したドット絵のアニメを保存することが出来ます。

• ファビコン
• サイト背景
• アイコン

夢が広がりますね。

ドット絵アニメを作る

ログイン後、Create Piskelのボタンを押すと以下の様な画面が表示されます。

ドット絵アニメを作成するのに最低限必要な5箇所を写真に記しました。

1. ここに描いたドット絵が表示されます。ここで新しいフレームを追加/既存のフレームを複製出来ます。
2. 描画に使用するドットの大きさを変更できます。
3. ドットの色を変更できます。
4. フレームが2枚以上あると、どの様な動きになるかプレビューが再生されます。FPSでスピード調整可能。
5. 自分のギャラリーに保存したり、アニメ画像をダウンロード出来ます。

披露

私、もじゃげの自画像

愛猫、けだま様 <- 髭が白いので、クリックしてポップアップさせたほうが見やすいです。

是非、何か作成されるときのアクセントに使ってみて下さいね。