ドット絵投稿Webサービス「あいこんくらぶ」「ぴこぴよ」
この記事は、ドット絵 Advent Calendar 2017 12/15の参加記事です。
きょうは、ドット絵関連ツールを開発している作者が、自分のつくったツールについてお話ししようかなと思っています。 （みなさん読み応えのある記事を投稿されているので、ちょいと緊張しています。。。）
はじめに
わたしは、ドット絵を投稿・公開したり、じぶんのドット絵リストをつくれるウェブサービス「あいこんくらぶ」と、ドット絵をツイッターにきれいに投稿できる「ぴこぴよ」を開発、公開しています。これらのツールのよいところや、ざっくりとした使い方についてご紹介します。
ちなみに、筆者のドット絵スキルは、「なんとなく描いている」程度な感じです（下手の横好きというやつです）。私もAdvent Calendarの記事を参考にして、もっとうまく書けるようになりたいなーと思ったりしています。
ドット絵は限られた画素数で表現するという性質から、程よく制約があるおかげでとっつきやすく、そこに魅力を感じています。 そんな私がこれからのドット絵ライフを快適にすべく作ったのが以下のツールたちです。私のツールでみなさんのドット絵ライフが潤ったり、あたらしくドット絵に興味を持つ方々が増えればいいなぁ。
ドット絵ツイート支援サービス「ぴこぴよ」
これはなに？
ドット絵をツイッターに投稿されている方々は多いと思いますが、次のようなことを気にかけている方々は多いのではないでしょうか。
- ドット絵がぼやけて投稿されてしまわないように加工する
- ドット絵を拡大して、ドットがはっきりとわかるように投稿する
Twitterは画像を jpeg 保存する仕様になっているようで、この結果、投稿したドット絵のドットの境界がぼやけたり、色が意図しないものになったりすることがあります。
また、投稿画像が小さいと、閲覧する端末によってはぼやけて見えてしまうこともあります。
これらを考慮し、ツイッターへドット絵をきれいに投稿しやすくするツールが「ぴこぴよ」です。
ぴこぴよをつかうと、以下のようなことができます。
- 原寸大のドット絵が1枚あれば、ドット絵を拡大して投稿できる
- 画像に透過画素を仕込むことで、Twitterにきれいに投稿できる
「jpegは透明色を扱えないので、透明色付き画像はpngで保存される」という性質を利用し、png画像としてTwitterに扱ってもらうことで、きれいなまま投稿することができます。
また、「拡大機能」によって、わざわざドット絵を公開するときに拡大画像を用意する必要がありません。
そのほかに、「原寸大ドット絵と並べて表示する機能」があり、原寸大のドット絵の魅力も同時に伝えることができます。
つかいかた
トップページの「ツイートする」を押して、ツイート画面に行きます。あとは画像をドラッグアンドドロップで追加し、お好みのサイズに調整します。
背景色を付けることもできます。ドット絵（に限らずだと思いますが）は大別して、画像に背景等を含む「一枚絵パターン」と、単一のもののみが描かれている「キャラクター・素材パターン」があると思いますが、後者の場合は背景色を付けてあげることで、よりじぶんのイメージに合った画像を投稿できると思います。
どうでもいいですが、「ぴこぴよ」という名前は「ぴこぴこしている絵（ドット絵）」を「ツイート（ぴよぴよ※1）する」という意味で名づけました。へー、と思っていただければうれしいです。
（※1: ツイートはさえずるの意から）
ドット絵投稿・公開サービス「あいこんくらぶ」
これはなに？
あいこんくらぶはドット絵を投稿して公開できるサービスです。機能の一部を上げてみるとこんな感じ。
- お手持ちのドット絵をアップロードして公開できます（おおきさ256px四方まで）
- 原寸大のドット絵さえあれば、拡大はあとから行うことができます（関連記事）
- 公開したドット絵はツイートすることもできます
- ドット絵エディタ（PC/スマートフォン対応）で絵が描けます
- 公開されたドット絵は、パレット情報をみることができたり、自由に拡大率を変更して閲覧することができます
- じぶんの作品リスト「マイページ」を公開することもできます（関連記事）
- ライセンス付きドット絵や、利用規約付きドット絵を配布することができます（関連記事）
などなど。。。なんだかいろいろ機能があって、どのように使ったらいいのかわからない方々もいらっしゃるかもなぁ、と、最近思ったりしています。なので、今回はユースケースをいくつか考えてみました。
お手持ちのドット絵を投稿・公開するとき
（あいこんくらぶにはモバイル版もありますが、ドット絵のアップロードはPC版のほうが行いやすいので、今回はPC版のみの説明とさせていただきます）
あいこんくらぶは「ドット絵投稿・公開サービス」なので、みなさんにどんどん投稿して頂きたいぞ！ということで、まずは投稿方法から。
まずは会員登録 をします。おわったらトップページから「じぶんの作品の管理」ページに行くと、投稿画面が現れます。 あとはドラッグアンドドロップでひょいひょいと画像を追加していきます。
つぎに公開設定をします。あいこんくらぶでは、アップロード直後の作品は非公開状態となっており、公開設定を行うことではじめて公開されます。 いくつかの公開範囲を設定でき、たとえば「トップページには表示しない」「あいこんくらぶのタグ検索の結果には表示しないようにする」などの項目を設定できます。 公開範囲について、くわしくはヘルプをご覧ください。
ドット絵の表示拡大率を変更することもできます（拡大率の変更を行っても、元のドット絵ファイルには影響しないので安心して変更してください）。背景画像や背景色、サムネイルの見た目なども変更可能なので、いろいろと調整してみてください。
ツイッターに投稿するには、「じぶんの作品の管理」ページでドット絵を選択して右クリックし、「ツイートする」を押します。ぴこぴよと同様のシステムで投稿することができます。
余談ですが、「ぴこぴよ」は「あいこんくらぶ」に実装したツイートシステムを切り出してつくっています。 （ツールの作者的には、あいこんくらぶで投稿しつつ、ツイート機能でツイッターに投稿していただけるとうれしいなぁ、と思っています。）
また、じぶんの作品をリスト表示する「マイページ」機能があります。（ちなみに筆者のマイページはこちら） 公開済みの作品は自動的にマイページに表示されます。ページのヘッダ画像や背景画像は差し替えられるので、いい感じにしてみると良いです。
ちなみに、マイページのURLはhttps://iconclub.jp/user/ユーザー名 となっているので、各種ブログやSNSでリンクをシェアするのに便利です。
（PC版とモバイル版では見え方が異なるので、どちらもお持ちの場合は両方で確認してみるといいかもです。）
ドット絵を描いてみたい方
あいこんくらぶには簡易なドット絵エディタがあります。こんなかんじ。
「ドット絵を試しに始めてみたいなぁ」とか「外でもスマートフォンでお絵かきしたいな」という方におすすめです。 （すでに使い慣れたエディタをお持ちの方だと、ちょっと物足りなさを感じるかもですが、ささっと描いて公開したいときなどには使えるかも。）
描いたドット絵は「じぶんの作品の管理(要ログイン)」ページに保存されます。保存しただけでは公開されないので、気の向くままに描いて、気に入ったものだけを公開することもできます。 （もちろんPC・モバイル版共にツイートすることもできます）
ざっくり紹介すると、こんな感じのことができます。
- マウスや指（モバイル版）でお絵かきできます。
- 256px四方のサイズまで、いつでもキャンバスをリサイズできます
- 矩形、線分、円、切り取り、コピー、アンドゥなどの基本的な機能を有しています
- パレットを作って保存でき、PC・モバイル機のどちらでも読み込めます。
- PC版、モバイル版があり、それぞれのデバイスに合わせてつくっています
私はPCでドット絵を打つときはEdgeかGraphics Galeを愛用していますが、 モバイル版あいこんくらぶのドット絵エディタは、わたしも外出先でお絵かきするのによく使っています。比較的いろいろな機能があるので、ぜひつかってみてください。
モバイル版エディタの使い勝手は下の動画みたいな感じです。（だいぶ前に作った動画なので、画面の構成が一部違ったりしています。パレット周りはもうちょっと使いやすくなっていたりとか。。。）
ドット絵を閲覧したいかた
PCもしくはスマートフォンであいこんくらぶにアクセスしてください。（スマートフォン版の場合はログインが必要です。ごめんなさい）
PC版の場合は「検索ページ」、モバイル版の場合は「ログイン後のページ（要ログイン）」から、「ランダム表示」ボタンを押すと、投稿されたドット絵をランダムに表示できます。
作品をクリックするとドット絵ビューアが開きます。拡大率を変更してみたり、パレットを表示してみたり（PC版のみ）、原寸大の大きさを確認することができます。 ビューア内の「このひとの作品をみる（PC版）」もしくは「マイページ（モバイル版）」ボタンを押すと、作者のマイページにジャンプでき、ほかの投稿も閲覧できます。
さいごに
あいこんくらぶやぴこぴよには、ほかにもいろいろな機能があります。ぜひ実際に触ってみてくれるとうれしいです！
また、投稿系のウェブサイトで投稿する側になることは、わたしもあまり得意ではないのですが、ぜひお気軽にあいこんくらぶに投稿してみていただけるとうれしいです。
不具合報告や機能要望、感想などは、わたしのTwitterもしくは連絡フォームより、お気軽にどうぞ！
ではでは。
