ユーザーガイド

ToPixel ユーザーガイド

ToPixelへようこそ!このガイドでは各機能の使い方と役割を分かりやすく説明します。

01

1. ピクセル変換

ピクセル変換は、アップロードした画像をピクセルアートに変換する機能です。

使い方

**ステップ 1:画像をアップロード**

  • 「ピクセル変換」ページを開く
  • 以下のいずれかの方法で画像をアップロード:
  • 「ファイルを選択」ボタンをクリックしてローカルから選択
  • 画像をアップロードエリアにドラッグ&ドロップ
  • ページ内で Ctrl+V を押してクリップボードから貼り付け
  • 対応形式:PNG、JPEG、WebP(最大 10MB)

**ステップ 2:画像をトリミング**

  • アップロード後、自動的にトリミング画面が開きます
  • トリミング枠をドラッグして移動、角や辺のハンドルをドラッグしてサイズ調整
  • クイック操作:
  • 「全体」ボタン画像全体を選択
  • 「中央の正方形」ボタン画像中央の正方形領域を自動選択
  • 「確認」をクリックして完了、またはそのまま確認して全体を使用

**ステップ 3:自動ピクセル化**

  • トリミング確認後、自動的にピクセル化処理が開始されます
  • 処理中はローディングアニメーションが表示されます
  • ページ上部に黄色いバーが表示された場合、処理エンジンの読み込み中です

**ステップ 4:結果を調整**

右側の設定パネルで微調整できます:

  • **設定** タブ:
  • 均一グリッドピクセルグリッドの均一性を制御
  • 出力長辺をロック有効にすると出力の長辺ピクセル数を指定可能(2〜256px)
  • **調整** タブ:
  • 出力サイズスライダーで出力サイズを縮小、数値が小さいほどピクセル数が減少
  • パレット選択カラーカードを選ぶと、画像の色がパレットの色に自動マッピングされます。ブランド別(CoCo、DoDo、MARD など)にグループ化されており、各ブランドには異なる色数が用意されています
  • 色の統合制限パレット選択後に表示。スライダーで使用する色の最大数を調整
  • **色** タブ:
  • 現在の色数と総ピクセル数を確認
  • 各色のプレビュー、パレット番号、使用回数を表示

**ステップ 5:プレビューとエクスポート**

  • プレビュー左上のボタンで「ピクセル化結果」と「元画像」を切り替え
  • プレビュー右上のグリッドボタンでピクセルグリッドの表示/非表示を切り替え
  • プレビュー画像自体をクリックすると拡大表示

エクスポートオプション:

  • **PNG ダウンロード**プレビュー右下のダウンロードボタンから、範囲を選んでダウンロード
  • **ブループリント出力**パレットの選択が必要。グリッド、座標、色番号、使用統計を含む参照用ブループリントを生成。2K/4K/8K 解像度に対応
  • **Gallery に保存**プレビュー左下のブックマークボタンから(ログインと有料サブスクリプションが必要)
  • **エディタにインポート**結果をピクセルエディタに送ってさらに編集(パレットの選択が必要)

**ステップ 6:やり直し**

  • 下部の「再処理」ボタンで設定を変更して再度ピクセル化
  • 結果エリアの上部に新しい画像をドラッグして差し替えることも可能
02

2. AI ピクセル化

AI ピクセル化は、まず AI で画像を特定のスタイルにリスタイルし、その後自動的にピクセルアートに変換します。

使い方

**ステップ 1:スタイルテンプレートを選ぶ**

  • 「AI ピクセル化」ページを開く
  • 3 種類の AI スタイルテンプレートが表示されますクリックして選択:
  • ちびカートゥーン可愛い大头スタイル、ピクセルが粗め
  • 詳細カートゥーンより精細なアニメ調
  • ちびピクセル A太いピクセルアウトラインの可愛いスタイル

**ステップ 2:ソース画像をアップロード**

  • ピクセル変換と同じく、クリック、ドラッグ&ドロップ、貼り付けの3つの方法に対応
  • アップロード後、プレビューでトリミング可能
  • 対応形式:PNG、JPEG、WebP(最大 10MB)

**ステップ 3:AI 生成を開始**

  • 画像とスタイルを選んだら、「AI 生成開始」ボタンをクリック
  • 1回の生成で 1 クレジットを消費ボタンの横に利用可能クレジット数が表示されます
  • AI 処理は通常数秒から数十秒かかります
  • クレジット不足やアクセス権がない場合はガイドが表示されます

**ステップ 4:AI 結果を確認**

  • AI 生成完了後、自動的にピクセル化が行われます
  • AI 結果をトリミングし、「再ピクセル化」でトリミング範囲を使って再処理可能
  • AI 結果エリアのダウンロードボタンから AI 生成画像をそのままダウンロードも可能

**ステップ 5:調整とエクスポート**

ピクセル化後の操作はピクセル変換と同じ:

  • パレット選択、出力サイズ調整、色統計の確認
  • PNG ダウンロード、ブループリント出力、Gallery 保存、エディタへインポート

**履歴**

  • 右側のパネル(モバイルではドロワー)にすべての AI 変換履歴が記録されます
  • 任意の履歴をクリックするとその状態に復元して作業を続けられます
  • 個別削除や全クリアが可能
03

3. ピクセルエディタ

ピクセルエディタは、ブラウザ上で使える本格的なピクセルアート編集ツールです。ゼロから作成することも、変換結果をインポートして仕上げることもできます。

キャンバスの作成

  • 「新規キャンバス」ボタンをクリック
  • 10 種のプリセット(32×32 〜 160×160)から選ぶか、「カスタム」にチェックを入れて任意サイズ(8〜256px)を入力
  • 未保存の変更がある場合は確認メッセージが表示されます

描画ツール

10 種の描画ツールをキーボードショートカットで切り替え可能:

ツールショートカット用途
鉛筆Pピクセルや連続線を描画。ブラシサイズ調整可能(1〜50px)
消しゴムEピクセルを透明に消去。サイズ調整可能
塗りつぶしFクリックした領域の色が似ている隣接ピクセルを一括塗りつぶし
スポイトAltキャンバス上のピクセルをクリックしてその色を現在の色に設定
色置換Rクリックした色と似ている色を、レイヤー全体で現在の色に一括置換
色消去クリックした色を、レイヤー全体から透明に消去
矩形選択ドラッグで矩形選択範囲を作成
自動選択クリックして色が似ている領域を自動選択
画像移動ドラッグで現在のレイヤーの内容を移動
キャンバス移動ドラッグでキャンバスをパンして閲覧

カラーシステム

  • **パレット選択**カラーカードを選ぶと、すべての色がパレットに表示されます
  • **パレットパネル**選択したカードの全色を表示。クリックで色を選択
  • **使用済み色**キャンバスで実際に使用している色を使用量順に表示。色の選択、削除、キャンバス上のハイライト表示が可能
  • **カスタム色**システムカラーピッカーまたは HEX 値の直接入力に対応
  • **クイック色**下部に 20 色のプリセット

レイヤー管理

レイヤーパネルにすべてのレイヤーが表示されます(上が手前):

  • **レイヤー追加**「+」ボタンをクリック
  • **レイヤー切替**クリックでアクティブレイヤーを変更
  • **表示/非表示**目のアイコンで切り替え
  • **ロック**ロックされたレイヤーは編集操作の影響を受けません
  • **名前変更**鉛筆アイコンをクリック
  • **順序変更**上/下ボタンで重ね順を調整
  • **削除**レイヤーを削除(最低1枚は保持)

対称描画

ツールバー右側から対称モードを選択:

  • なし通常描画
  • 水平垂直中心線でミラー。1ストロークで左右対称に描画
  • 垂直水平中心線でミラー
  • 四重水平+垂直の両方をミラー。1ストロークで4箇所に描画

選択ツール

5 種の選択ツール:

  • **矩形**ドラッグで矩形選択
  • **楕円**ドラッグで楕円選択
  • **自動選択**クリックで色が似ている領域を自動選択
  • **なげなわ**フリーハンドで不規則な選択範囲を描画
  • **多角形**クリックごとに頂点を追加して多角形を作成

選択後の操作:

  • 選択範囲内のピクセルを削除
  • 選択範囲または選択内ピクセルを移動
  • 選択情報(ピクセル数、中心色)を表示

トリミング

  • **レイヤートリミング**アクティブレイヤーの内容のみトリミング
  • **キャンバストリミング**キャンバス全体のサイズを変更、全レイヤーに影響
  • ドラッグでトリミング範囲を定義し、ハンドルで調整

表示コントロール

下部のステータスバー:

  • **グリッド**キャンバスにピクセルグリッド線を重ねて表示
  • **座標軸**縁に行/列番号を表示
  • **色番号**各ピクセルセルにパレット色番号を表示
  • **ズーム**ボタンまたはマウスホイールで調整。モバイルではピンチズームに対応
  • **座標**キャンバス上のカーソル位置をリアルタイム表示

元に戻す / やり直す

  • 各操作後に自動で履歴を保存。最大 50 ステップまで元に戻せます
  • ツールバーに元に戻す/やり直すボタンがあります

下書き保存

  • 「下書き」ボタンで現在の編集状態を保存
  • 下書きリストにはサムネイル、名前、保存時刻、キャンバスサイズ、レイヤー数が表示
  • 名前変更、個別削除、全クリアが可能
  • 未保存の変更があると、下書きボタンに赤いドットが表示されます
  • 下書きの保存にはログインとメール認証が必要です

ブループリント出力

実際の制作に使える参照画像を生成:

  • **解像度**2K、4K、8K、またはカスタム(1024〜16384px)
  • **ブループリントオプション**:
  • グリッド表示ピクセルグリッド線を重ねて表示
  • 座標表示縁に行/列の座標を标注
  • 色番号表示各ピクセルセルにパレット色番号を表示(パレット選択が必要)
  • 色統計表示各色の使用数と割合を表示(パレット選択が必要)
  • ミラー出力水平反転バージョンを出力
  • **画像のみモード**注釈なしのピクセルアートのみを出力。白背景やグラデーション背景の追加も可能
  • 無料ユーザーは 2K 解像度のみで、透かしが入ります
  • 出力サイズ、ズーム倍率、推定ファイルサイズをエクスポート前にプレビュー

変換結果のインポート

  • エディタで「変換」ボタンをクリックしてワークベンチを開く
  • ワークベンチには「変換」と「AI 変換」のタブがあります
  • 変換完了後、「現在のキャンバスにインポート」または「新規キャンバスにインポート」を選択
  • ピクセル変換や AI ピクセル化ページから直接「エディタにインポート」ボタンをクリックしても、結果が自動的にエディタに転送されます
04

4. Gallery

Gallery は、保存したすべてのピクセル作品を管理・閲覧するページです。

アクセス要件

Gallery の利用にはログインと Lite 以上の有料サブスクリプションが必要です。

作品の種類

3 種類の作品タイプ:

  • **ピクセルアート**ピクセル変換から保存した作品
  • **AI リドロー**AI ピクセル化から保存した作品
  • **ブループリント**エクスポートしたブループリント作品

閲覧と検索

  • **検索**キーワードでタイトルと説明から検索
  • **タイプフィルター**「すべて」「ピクセルアート」「AI リドロー」「ブループリント」タブでフィルター。各タブに件数が表示
  • **並び替え**ドロップダウンから「最新順」「古い順」「タイトル順」を選択

作品の操作

  • **プレビュー**カードをクリックしてプレビューウィンドウを開き、拡大画像と詳細情報(サイズ、色数、パレット、作成日など)を確認
  • **ダウンロード**カードにホバーすると右上にダウンロードボタンが表示
  • **削除**ホバーすると右下に削除ボタンが表示。確認後に削除
  • **3D プレビュー**ピクセルアート作品は 3D プレビューに対応。ビーズ風またはアイロン風の 3D エフェクトで回転・ズーム可能

一括操作

  • フィルターバーの「選択」ボタンで一括選択モードに切り替え
  • 全選択、反転選択、一括ダウンロード、一括削除が可能
  • ツールバーに選択数が表示されます

空の状態

Gallery が空の場合、ピクセル変換や AI ピクセル化へのクイックアクセスボタンが表示されます。

05

5. 引き換えコード

引き換えコードで無料クレジットと Lite サブスクリプション特典を獲得できます。

獲得できるもの

各引き換えコードには以下が含まれます:

  • **永久クレジット**有効期限なし(ただし使用には有効なサブスクリプションが必要)
  • **Lite サブスクリプション**一定期間の Lite 権限で Gallery などの機能をアンロック

引き換え結果は現在のアカウント状態によって異なります:

  • Pro ユーザークレジットのみ獲得、サブスクリプションは変更なし
  • Lite ユーザークレジット獲得 + Lite 期間延長
  • サブスクリプションなしクレジット獲得 + 新規 Lite サブスクリプションが有効化

引き換えコードの入手方法

  • プロフィールページで「引き換えコードを入手」ボタンをクリックすると配布ページに移動
  • コードは公式イベントやチャンネルを通じて配布されます

方法 1:クイック引き換え(ログイン不要)

アカウントをお持ちでない新規ユーザー向け:

1

「クイック引き換え」ページ(/quick-redeem)を開く

2

引き換えコードを入力

3

画像 CAPTCHA を完了(表示された文字を入力)

4

送信

5

成功すると、システムが自動でアカウントを作成し、生成されたユーザー名とパスワードが表示されます必ず保存してください

6

自動ログインが試行されます。ログイン後、各ツールページに直接移動可能

7

早めにプロフィールから本当のメールアドレスを紐付けることをお勧めします

方法 2:プロフィールで引き換え(ログイン必要)

すでにアカウントをお持ちのユーザー向け:

1

ログイン後、プロフィールに移動

2

サイドバーの「引き換えコード」セクションを見つける

3

コードを入力して「引き換え」をクリック

4

成功すると、獲得したクレジット数とサブスクリプション期限が表示されます

注意事項:

  • 引き換えにはメール認証の完了が必要です
  • 各コードは 1 回のみ使用可能
  • 期限切れまたは使用済みのコードは再利用できません