ニョーンピクセル (Nyooon Pixel)
キャッチコピー
描いたドット絵に物理演算の命を吹き込む。プニプニ動かして遊べるWebクリエイティブツール
概要
自分で描いたピクセルアートに物理演算を適用し、動かしたり、投げたり、GIFアニメとして書き出せるWebアプリです。「描く・遊ぶ・共有する」の3ステップで、静止画だったドット絵が生き生きと動き出します。
詳細説明
ニョーンピクセルとは？
「ニョーンピクセル」は、レトロなドット絵作成ツールと現代的な物理演算エンジンをブラウザ上で融合させた、新しいお絵描きプラットフォームです。
子供の頃、落書き帳に描いたキャラクターを見て「これが動き出したら楽しいのに」と想像したことはありませんか？その体験をWeb技術で再現しました。難しい設定は一切不要。描いた直後に、あなたの作品は重力と質量を持ち、ゼリーのように柔らかく動き出します。
主な機能と遊び方
このアプリは、以下の3つのフローで直感的に遊べるように設計されています。
【ここに3ステップ全体の流れがわかる解説画像を貼り付けてください（もしあれば）】
- 描く (Draw)
- 20x20〜などのピクセルキャンバスに、ペンや塗りつぶしツールで絵を描きます。
- 絵心がなくても、シンプルな図形を描くだけで物理演算の面白さを体験できます。
- 動かす (Physics Interaction)
- 再生ボタンを押すと、描いた絵が物理法則に従って落下します。
- マウスドラッグで掴んで投げたり、壁にぶつけたりできます。「ニョーン」とした独特の柔らかい挙動（Soft Body Dynamics）が特徴です。
- 回転やバウンスなどのアクションボタンで、動きに変化をつけられます。
- 共有する (Export & Share)
- 物理演算で動いている様子を、ワンクリックでGIFアニメーションとして保存可能です。
- X（旧Twitter）などのSNSでシェアしたり、ギャラリー機能で他のユーザーの作品を閲覧できます。
技術スタックと開発の裏側
エンジニア・開発者の方向けに、本アプリを構成している技術要素を紹介します。物理演算のパフォーマンスと、モダンなUIの両立を目指しました。
- Framework: Next.js (App Router)
- Database / Auth: Supabase (PostgreSQL)
- Styling: Tailwind CSS
- Infrastructure: Vercel
特にこだわったのは、ブラウザ上での物理挙動の軽量化です。多数のパーティクル（ドット）が結合して一つの物体として振る舞う際の計算処理を最適化し、スマホのブラウザでもストレスなく「プニプニ感」を味わえるようにチューニングを行いました。
料金プラン
完全無料
アカウント登録なしでも「描く」「動かす」機能はフルに利用可能です。
（作品のクラウド保存やギャラリー投稿には、無料のアカウント登録が必要です）
開発者より
個人開発として、「触っていて気持ちいいUI/UX」を最優先に開発しました。
コードを書く合間の息抜きや、新しいアイデアの種として、ぜひ一度「ニョーン」と動く感覚を味わってみてください。皆様からのフィードバックや、意外な使い方の発見をお待ちしています。
