こんにちは！初心者ドット絵描きのあんまきです。
ファビコン、それはブラウザタブに表示されるかわいいアイツ。
ちっちゃいですが、Webページをお気に入り登録したときなどにも表示されるので、まさにWebページの顔。印象を大きく左右するのでファビコンのデザインは重要です。
ちなみに、私のお気に入りのファビコンはこちら。
愛しの任天堂、ドット絵マリオがめちゃくちゃにかわいいのです。
わたしのブログのファビコンもドット絵にしたい〜！ということで、スマホアプリでちゃちゃっと作っちゃいました！
今回は、スマホアプリだけでドット絵ファビコンを作る方法をご紹介します！もちろん全部無料です。
ぜひ最後まで読んでみてくださいね！
ドット絵ファビコン作成に必要なのはこの4つ！
では、今回わたしが実際に使ったドット絵アプリをご紹介します。
スマホでドット絵描くなら『ドットピクト！』
打ちやすさとわかりやすさの点から『ドットピクト！』がオススメです。
- ドットを打ちたいところにカーソルを合わせて「push」ボタン！狙った場所を外さない
- 他のユーザーが投稿した作品を見ることができる
- 他ユーザーの作品からキャンパスサイズやカラーパレットなどを参考にできる！
- 選べるキャンパスサイズは16×16から128×128までの7種類
- オートセーブ機能でうっかりアプリを閉じちゃっても安心
- 作品はPNG形式でカンタンに書き出し可能、透過処理も
これだけの機能が揃っていて、なんと無料です。
ブラウザドット絵ツールに散々苦戦していたわたし。もっと早く使えばよかった！
自分の作品も投稿できるので、SNSのように他のユーザーと交流すればモチベーションも保てます。
「ドット絵打ってみたいけど何を題材にすればいいかわからない」なんてときも、『ドットピクト！』なら公式企画でネタ（お題）が提供されているので、インスピレーションも湧きまくりです♪
直感で操作できるので、ドット絵をとりあえずはじめたい方は『ドットピクト！』にしておけばまず間違いありません。簡単なロゴやファビコンなら3時間もあれば完成しますよ！
サイトデザインと色を合わせたいときは『色しらべ』
Webページはサイトデザインの統一感が大事です。『色しらべ』は自分のサイトのカラーを調べるのに便利なアプリです。
自分のWebページにアクセスしてスクリーンショットを撮る。その画像を『色しらべ』に取り込めば、カラーコードを簡単に調べることができます♪
カラーコードがわかれば『ドットピクト！』のパレットで値を入力するだけ！あなたのWebページとお揃いのカラーでドット絵が打てますよ！
ドット絵はグラデーションが命！『グラデーションメーカー』
仕様するカラーコードを入力するだけでグラデーションを作ってくれる『グラデーションメーカー』。
ドット絵はグラデーションをつけることによりクオリティがグッと上がります。
今回は作るのはファビコンなので、そこまでこだわる必要はありませんが覚えておくと後々いいことあるかも！
画像ファイルをiCO形式に変換する『ファビコンジェネレーター』
作った画像をファビコンとして使うには、画像ファイルをiCO形式に変換するのがオススメ。
『ドットピクト！』で作成した画像はPNG形式で書き出されます。
PNG形式でもファビコンとして使用は可能ですが、対応していないブラウザが存在するのでオールマイティーなiCO形式に変換しておくのが無難です。
『ファビコンジェネレーター』では画像をアップロードするだけで簡単にiCO形式に変換できますのでご安心ください♪
ドット絵ファビコンの制作手順
それでは、ドットピクトの設定から画像ファイルをiCO形式に変換するまでの流れをご紹介します。
ちなみに今回私が作成したのはこちらのスカラベちゃんファビコンです！
わたしは3DS『どうぶつの森』シリーズでちょっとドット絵を打ったことがある程度の超初心者ですが、3時間で完成しました。塗り絵感覚でぽちぽちドットを打つのは楽しいですね！
気軽にトライしてみてくださいね！
ドットピクト！の設定
まず、ドットを打ちはじめる前に『ドッドピクト！』の設定を行います。
- キャンバスサイズとパレットを決める
- レイヤーの背景色設定を透過にする
1.キャンバスサイズとパレットを決める
『ドットピクト！』を起動して、鉛筆マークのページに移動したら、キャンバスを新規作成します。
キャンバスサイズの選択では任意のサイズを選びます。数字が大きくなるほどマス目（グリッド）が細かくなるのでドット絵も繊細に仕上がります。
どれくらいのキャンバスサイズにするべきか悩んだら、他ユーザーの作品を参考にしましょう！
個人的には、32×32辺りのサイズがほどほどにデフォルメできて、ドットを打つ量も少なく済むので初心者さんでもやりやすいのではと感じます。（↑の画像は16×16で一番荒いです。）
パレットの選択では、ドット絵を打つ色のセットを選びます。他ユーザーが作成したものや、公式で用意されているものの中からお好きな配色のものをお選びください。
キャンバスサイズもパレットの色も後から変更できるので、ここでは深く考えずどんどん次に行っちゃいましょう！
レイヤーの背景色設定を透過にする
ファビコンにしろアイコンにしろ画像を透過処理しておいた方が後々融通がきくので、一番最初に背景設定を透過にしちゃいましょう。
設定画面を開いたら、上級者設定のレイヤーを表示をオンにします。
するとキャンバス画面にレイヤーの項目が出現しますので、レイヤー画面を開きます。
あとは背景色設定で、グレーと白の市松模様になっているマスを選択すれば透過処理の設定は完了です。
パレットの色を変更する
お好みのパレットがあればそのまま使用できますが、使いたい色がない！というときは自分でパレットをカスタマイズします。ここではすでにあるWebページと配色を揃えたい場合にオススメの手順をご紹介します。
- 『色しらべ』でWebページの配色を元にカラーコードを調べる
- 『グラデーションメーカー』でグラデーションを作る
- 調べたカラーコードを使ってパレットをカスタマイズする
1.『色しらべ』でWebページの配色を元にカラーコードを調べる
Webページで使用しているカラーコードがわからない場合は『色しらべ』を使用して確認します。
わたしの場合はこのブログをスクリーンショットで撮影したものを、『色しらべ』で読み込んで画像解析しました。
アプリを起動して画像を読み込むと、画面中央に十字印が表示されています。カラーコードを調べたい画像の部分が十字印に重なるように、画像を移動させればOK。
画面下部付近中央にある”スティックアイコン”を押せば解析結果が表示されます。
目標をセンターに入れてスイッチって感じです！
全体的にカラーコードを調べたい！という場合は、”虫メガネアイコン”を押せば画像全体でどんなカラーが使われているか一括表示もできます。
ここで表示されるカラーコード（HEX）を、『ドットピクト！』のパレットに登録すればそのカラーでドットを打てるようになりますよ♪
2.『グラデーションメーカー』でグラデーションを作る
ドット絵はグラデーションが命！すこーし取り入れるだけでグッとクオリティがアップしますので、ドット絵に慣れてきたらぜひ試してみてください。
『グラデーションメーカー』の使用方法はとってもカンタン、中央の四角い入力フォームにグラデーションを作りたい元のカラーコードを入力するだけ。左から右に行くにつれて濃い色になるように入力するのがポイントです。
あとは「グラデーションを作成する」ボタンを押して表示された画面をスクリーンショットで撮影して、『色しらべ』で使用したいカラーを解析すればOK。
グラデーションのバーを等分した位置で解析するとキレイなグラデーションパレットが作れます。お好みで調節してみてくださいね！
3.調べたカラーコードを使ってパレットをカスタマイズする
使いたい色のカラーコードがわかったら『ドットピクト！』のパレットに登録しましょう。
選択カラーが表示されているボックスをタップすると「色を選択」というパネルが表示されるので、右上の「色を編集」をタップします。
値を入力できるページに移動して、新たに登録したいカラーコードを入力すれば、カラーパレットのカスタマイズ完了です。
あとはひたすらドット絵を打つべし！打つべし！
近日中にドット絵の打ち方の記事も執筆しますね！
細かく説明はされていませんが、ドット絵を打つ時の考え方を学ぶにはこちらの本がオススメです。
ドット絵画像ファイルを書き出してiCO形式に変換する
ドット絵は描けましたか？『ドットピクト！』で作成した画像の形式はPNGファイルです。これをファビコンにあった画像ファイル形式、iCO形式に変換していきましょう。
- 完成したドット絵を書き出す
- 『ファビコンジェネレーター』でiCO形式に変換する
1.完成したドット絵を書き出す
ドット絵が完成したらPNGファイルとして画像の書き出しを行います。
設定画面を開いて、「画像を保存する」を選択、保存サイズはお好みですが、「384×384」が汎用性高くてオススメです。ここまできたらスマホまたはiPhoneに「画像を保存」にするだけです！
2.『ファビコンジェネレーター』でiOC形式に変換する
保存された画像はPNG形式なので、これをiOC形式に変換してファビコンの汎用性を高めましょう。ファビコン完成まであとちょっと、がんばりましょ〜！
といってもiOC形式に変換するのはとっても簡単。『ファビコンジェネレーター』にアクセスして、画像を選択するだけです。
あとはダウンロードボタンを押すだけ！
おめでとうございます！これであなただけの、ドット絵オリジナルファビコンの完成です！！！
今回はスマホアプリだけでドット絵を作成して、ファビコン用に画像ファイルをiCO形式に変換するまでの手順をご紹介しました。
自分で作ったファビコンは愛着のわき方が段違い！ブログ書く意欲も倍増でいいこと尽くしです♪
ファビコンはWebページの印象を大きく左右します。ぜひあなただけのオリジナルファビコンを作ってPRに活用していきましょう！
ドット絵の打ち方がわからない！という方や、ファビコンってどうやって設定するの？という方向けの記事も近日中に執筆予定です。またぜひ読みにいらしてくださいね！
