ごめんなさい、ウゴ描きへのリンクを貼り忘れていました。
現在は修正されております。2025/12/09
昔ウゴウゴルーガという子供向け番組が一世風靡しました、その番組内で使われていた文字が独特な動きする感じを自分の手で再現できるツールとして、一時期、「ウゴツール」（Windows）や、Macのウィジェットとして存在した「Gifraffiti」が流行しました。
あの「ちょっとした絵がうにょうにょ動く」感じ… 妙に魅力的でしたよね。
しかし、時は流れ… 幸いにも「ウゴツール」は今でも利用可能ですが、Macユーザーの僕が愛用していた「Gifraffiti」は、現在のmacOSでは残念ながら動かなくなってしまいました。あの懐かしい、味のあるアニメーションをMacで手軽に作れない…
そんな「ウニョウニョ動くGIFアニメ」をまた描きたい！ってことで、AIさんの力も借りて、ブラウザで動くWebアプリとして、あのノスタルジックな表現を再現するツールを作りました。
その名も「ウゴ描き – うにょうにょアニメーション」
こんな感じ↓
ウゴ描き-うにょうにょアニメーション
ウゴ描きは以下をクリックするとアクセスできます。
アクセスすると以下のような画面になります。（見本の絵が描かれていますが、実際はなにも描かれていません。）
基本的な使い方
絵を描く
左側のツールパネルから描画ツールを選択して、中央のキャンバスに自由に絵を描きます。
・描画ツール：
ペン – 自由に線を描きます
直線 – まっすぐな線を引きます
消しゴム – 描いた線を部分的に消せます
・描画の設定：
線の色 – カラーピッカーで好きな色を選択
背景色 – キャンバスの背景色を変更
線の太さ – 1〜20pxの範囲で調整可能
・便利な操作：
元に戻す/やり直す – 描画を取り消したり、やり直したりできます
クリア – 現在のレイヤーの内容を全て消去
※すみません、「消しゴム」や「元に戻す/やり直す」はざっくりとした仕様です。
直線などは一筋ごとに消えます
キャンバスサイズの変更
用途に合わせて4種類のサイズから選択できます。
・横長 (600×400) – デフォルトサイズ
・正方形 (600×600) – SNSアイコン向き
・横長大 (1200×800) – 高解像度版
・正方形大 (1200×1200) – 高解像度アイコン向き
※サイズ変更するとページがリロードされ、描画内容はクリアされます
※画面表示は縮小されていますが、実際のサイズで描画・出力されます
レイヤーを活用する
複数のレイヤーを使って、より複雑なイラストを作成できます。
新しいレイヤー – 「+ 新しいレイヤー」ボタンでレイヤーを追加
レイヤー選択 – レイヤー名をクリックして編集対象を切り替え
表示/非表示 – ◉ボタンでレイヤーの表示を切り替え
削除 – ×ボタンで不要なレイヤーを削除（レイヤー1は削除不可）
※レイヤーは下の方にあるほど描画では上になります。
揺れの設定を調整
左パネルの「揺れ設定」で、アニメーションの動きをカスタマイズできます。
・強さ (0〜3.0px) – 揺れの振幅を調整。数値が大きいほど大きく揺れます
・速さ (4〜24fps) – アニメーションの滑らかさ。数値が高いほど滑らか
・フレーム数 (6〜24) – アニメーションのコマ数。多いほど長いループになります
影の設定
影の設定も調整できます。
・影を表示 – チェックボックスで影のオン/オフ
・ぼかし – 影のぼかし具合
・横の距離/縦の距離 – 影の位置を調整
アニメーションを確認
右下の「アニメーションプレビュー」エリアで動きを確認できます。
・▶ 再生 – アニメーションの動きをプレビュー
・⏸ 停止 – アニメーションを止めます
リアルタイムで揺れ具合を確認しながら、設定を調整できます。
GIFファイルを出力
完成したら「GIF出力」ボタンをクリック。
処理が完了すると、自動的にアニメーションGIFがダウンロードされます。
SNSへのアップロードやWebサイトでの使用が可能です。
その他
・一応モバイルでも使えます。スマートフォンやタブレットのタッチ操作にも対応しているので、指で直接描画できます。
・Xにアップする場合、動画時間が短すぎるとかでアップできない場合があります、その場合フレーム数の設定を最高の24設定にするとアップできると思います。
まとめ
ウゴ描きは、誰でも簡単にうにょうにょなアニメーションを作れるツールです。
オリジナルのうにょうにょアニメーションをぜひ作ってみてください！
SNSでの投稿や、ちょっとしたアクセントに最適だとおもいます。
