はじめかた

このページでは、Yomogiに初めてアクセスしてから、最初のドット絵を描いてエクスポートするまでの流れを解説します。

1. Yomogiにアクセスする

ブラウザで/tools/yomogiを開き、ヒーローセクションにある「無料でドット絵を描く」ボタンをクリックします。エディタ画面（/tools/yomogi/editor）が起動します。

インストール・登録は一切不要で、ブラウザさえあればすぐに始められます。

2. キャンバスサイズを選ぶ

最初のステップはキャンバスサイズの選択です。Yomogiでは 8×8、16×16、32×32、64×64 などの代表的なサイズから選べます。

どのサイズを選ぶかは、作りたい作品によって変わります。

• 8×8 — アイコンの中のマイクロパーツやレトロなエモート向き
• 16×16 — ファミコン風のキャラクターチップやアイテムアイコン向き
• 32×32 — キャラクターのドット絵や SNS アイコン向き
• 64×64 以上 — 背景・イラスト・ポートレートなど大きめの作品向き

迷ったら 16×16 か 32×32 から始めるのがおすすめです。小さめのサイズから始めると、色塗りの回数が少なくて済むため、完成まで辿り着きやすくなります。

3. 色を選ぶ

画面のパレットには、基本の24色があらかじめ用意されています。使いたい色をクリックするだけで描画色が切り替わります。

24色に好みの色がない場合は、カラーピッカーで自由な色を選べます。一度使った色は履歴に自動で保存されるため、繰り返し同じ色を使う作品でもすぐに呼び出せます。

4. ペンツールで描く

初期選択のペンツールでキャンバスをクリックまたはドラッグすると、ピクセルが塗られていきます。

• 1ピクセルずつ塗るときは単発クリック
• 線を引きたいときはドラッグ

細かい部分はキャンバスを拡大してから描くと、誤操作を減らせます。

5. 塗りつぶしツールで広い領域を一気に塗る

キャラクターの肌や背景など、広い領域を同じ色で塗りたいときは塗りつぶしツールが便利です。ツールを切り替えてから塗りたい領域をクリックすると、同じ色で繋がっている範囲が一括で塗り替わります。

誤って関係ない部分まで塗ってしまった場合は、すぐに Undo で戻せます。

6. 保存とエクスポート

作品は編集中も自動的にブラウザのIndexedDBに保存されます。ただし、データを長期的に残したい場合は必ずエクスポートしておきましょう。

Yomogiは3種類の形式でエクスポートできます。

• SVG はベクター形式で、Web サイトやアイコンなど拡大・縮小しても劣化させたくない用途に最適です
• PNG は透過対応のラスター形式で、ゲーム素材・SNS アイコン・アプリ素材などに向いています。倍率を選んで出力できます
• JPG は白背景を合成した形式で、ファイルサイズを抑えたい場合や写真と合成する場合に便利です

用途に合わせて形式と倍率を選び、ダウンロードしてください。

次のステップ

基本の流れを覚えたら、ツールとパレットの細かな使い方を学ぶ応用ページに進みましょう。

• 描画ツールとパレット --- 5種類のツールそれぞれの使い分け、24色パレット、カスタムカラー、色履歴