About — Frog Pixel Editor

Frog Pixel Editor ってなに？ What is Frog Pixel Editor?

Frog Pixel Editor は、8×8ピクセルのカエルの表情をブラウザ上で描けるツールです。「やりくりかぞく」アプリのキャラクター「やりくりカエル」の表情データを作るために生まれました。

描いた絵はPNG画像やGIFアニメーションとしてダウンロードしたり、アプリで使えるDart配列としてコピーしたりできます。

Frog Pixel Editor is a browser-based tool for drawing 8×8 pixel frog expressions. It was created to design facial expression data for the "Yarikuri Frog" character in the Yarikuri Kazoku app.

Your artwork can be downloaded as PNG images or GIF animations, or copied as Dart arrays for use in the app.

できること Features

🎨

ピクセルお絵かき

Pixel Drawing

8×8 / 16×16 / 32×32 の3サイズ

3 sizes: 8×8, 16×16, 32×32

🐸

7つのプリセット

7 Presets

ふつう・びっくり・うれしい等

Normal, Surprised, Happy, etc.

🎬

GIFアニメ作成

GIF Animation

コマを並べてアニメーション出力

Combine frames into animations

🌈

256色カラーピッカー

256-Color Picker

各パーツの色を自由にカスタマイズ

Customize colors for each part

✨

エフェクト

Effects

グラデーション・エンボス・スキャンライン

Gradient, Emboss, Scanlines

💾

Dart配列エクスポート

Dart Array Export

Flutterアプリで使えるデータ形式

Data format for Flutter apps

使い方 How to Use

1. 描く

上部のパレットから使いたい色（体・目・口など）を選ぶ
グリッドをタッチ／クリックしてドラッグで塗る
「空」を選ぶと消しゴムになる
プリセットをタップすると、カエルの表情が読み込まれる

2. カスタマイズ

パレットの色をタップすると256色カラーピッカーが開く（小さい丸が目印）
+ ボタンで独自のカラータイプを追加できる（「髪」「帽子」など）
パレットを長押しすると削除モードに切り替わる

3. コマを保存してアニメにする

「コマを保存」で現在の絵をフレームとして保存
保存したコマの「Edit」で再編集、◀▶ で順番入れ替え
2コマ以上保存したら「GIFアニメーション」でアニメ出力
GIFはダウンロードされ、プレビュー欄でも再生される

4. エクスポート＆インポート

PNG ダウンロード — 現在の絵を画像として保存
Dart配列コピー — Flutterアプリ用のデータをクリップボードにコピー
全コマコピー — 保存したコマ全部をまとめてコピー
Dart配列インポート — 以前コピーした配列を貼り付けて復元

1. Draw

Select a color type (Body, Eye, Mouth, etc.) from the palette at the top
Touch/click and drag on the grid to paint
Select "Empty" to use as an eraser
Tap a preset to load a frog expression

2. Customize

Tap a palette color to open the 256-color picker (look for the small dot)
Press + to add custom color types (e.g., "Hair", "Hat")
Long-press the palette to enter delete mode

3. Save Frames & Animate

"Save Frame" stores the current drawing as a frame
Use "Edit" on saved frames to re-edit, ◀▶ to reorder
With 2+ frames saved, "GIF Animation" exports an animated GIF
The GIF downloads and also plays in the preview area

4. Export & Import

PNG Download — Save the current drawing as an image
Copy Dart Array — Copy data for Flutter apps to clipboard
Copy All — Copy all saved frames at once
Import Dart Array — Paste a previously copied array to restore

キャンバスサイズ Canvas Sizes

サイズ	Size	用途	Use Case	操作
8×8	カエルの表情（基本）	Frog expressions (default)	最初のボタンをタップ	Tap the first button
16×8 / 8×16	横長・縦長のデザイン	Wide or tall designs	最初のボタンを長押し	Long-press the first button
16×16	より細かい絵	More detailed art	2番目のボタンをタップ	Tap the second button
32×32	フルサイズピクセルアート	Full-size pixel art	3番目のボタンをタップ	Tap the third button

セマンティックカラー Semantic Colors

このエディタでは、ピクセルに「色」ではなく「役割」を塗ります。たとえば「体」「目」「口」といった意味を持たせることで、あとからカラーバリエーション（緑・ピンク・赤）を一括で切り替えられます。

Dart配列にエクスポートするとき、数字は色ではなく意味を表します:

This editor paints "roles" rather than colors. Each pixel has a semantic meaning like "Body", "Eye", or "Mouth". This allows you to switch color variations (green, pink, red) all at once.

When exported as a Dart array, numbers represent meaning, not color:

ID	役割	Role	デフォルト色	Default Color
0	空（透明）	Empty	#F5F5F5
1	体	Body	#4CAF50
2	目	Eye	#1A1A1A
3	口	Mouth	#333333
4	ハイライト	Highlight	#E8F5E9
5+	カスタム	Custom	自由に追加可能	User-defined

技術情報 Tech

HTML + CSS + JavaScript の1ファイルで完結しています。フレームワークやビルドツールは使っていません。ブラウザだけで動きます。

Built as a single HTML file with CSS and JavaScript. No frameworks or build tools. Runs entirely in the browser.

HTML5 Canvas Vanilla JS CSS3 gif.js Google Fonts

クレジット Credits

Frog Pixel Editor は Sit Back and Relax が制作しました。

「やりくりカエル」はやりくりかぞく（yrkr.ai）のマスコットキャラクターです。

Frog Pixel Editor is made by Sit Back and Relax.

"Yarikuri Frog" is the mascot of Yarikuri Kazoku (yrkr.ai).

Frog Pixel Editor について About Frog Pixel Editor