「パパすごい」と言われたい。動くnoteスキ画像を作った父の末路
みなさんは、noteの「スキ」ボタンを押したときのアニメーションを設定していますか？
先日、あるクリエイターさんの記事を読んで「スキ」を押したときのことです。 画面の中でキャラクターが動いたのです。
「これはすごい！僕もやってみたい」
ITエンジニアである僕（お父さん猫）の好奇心に火がつきました。 静止画だけでなく、感謝の気持ちを動きで表現できれば、読んでくれた方にもっと楽しんでもらえるはず。
しかし、この軽い思いつきが、意外な泥沼への入り口でした。 これは、AIツールを駆使して「動くスキ画像」を作ろうと奮闘し、家族に呆れられた父の記録です。
1. 過去の技術はもう使えない？
「善は急げ」とばかりに、僕は早速やり方を調べました。 検索すると、Google AI Studioの「Magical GIF Maker」というツールを使えば簡単に作れるという情報が出てきます。
「なるほど、これなら簡単そうだ」
意気揚々とGoogle AI Studioにアクセスしました。しかし、画面のどこを探してもその機能が見当たりません。 よくよく調べてみると、なんとそのアプリケーションは既に公開終了していたのです。
出鼻をくじかれました。 ITの世界では、数ヶ月前の常識が通用しないことがよくあります。 「動かしたい」という熱意だけが宙に浮き、僕は途方に暮れました。
2. GeminiとCanvaで挑む「動画化」作戦
しかし、ここで諦めるわけにはいきません。 今の僕には、頼れる相棒がいます。Googleの生成AI「Gemini」です。
「Geminiなら、画像生成の上に動画生成もできるはずだ」
僕は、お姉ちゃん猫がジャンプしているイラストを元画像として用意しました。 これをGeminiにアップロードし、こう願いを託します。
「この猫をジャンプさせて」
数秒後。 画面の中のお姉ちゃん猫が、ふわりと飛び跳ねました。
※技術メモ 今回はGeminiの動画生成モデル「Veo 3.1」を利用しました。
これらを使うために、僕はこっそり有料(2900円/月）の「Google AI Pro」を契約しています（この月額料金が事件を引き起こすのですが……それはまた別の話）。始めの1カ月は無料です。好き動画を作るのであれば無料枠で出来ると思いますのでお試しください。
動画生成には他にも「Sora 2」など、色々なサービスがあります。お好きなツールで試してみてください。
「すごい！動いた！」
感動も束の間、すぐに新たな問題に気づきます。 Geminiが出力したのは「MP4形式（動画）」だったのです。 noteの「スキ」リアクションに設定できるのは「GIF形式（画像）」のみ。
GIFアニメーションといえば、昔のインターネットを知る僕のような世代には、どこか懐かしい響きがあります。
しかし、感傷に浸っている場合ではありません。 さらに、生成された動画には不要なロゴが入っていたり、動きに少し不自然な箇所があったりと、そのままでは使えそうにありません。
そこで次に頼ったのが、デザインツールの「Canva」です。
まず、Geminiで作ったMP4をCanvaに読み込む
不要なロゴ部分をトリミングで削除する
動きのおかしいフレームをカットして調整する
「GIF形式」で書き出す
サイズを調整して10MB以下に落とす
複数のツールを行き来する地味な作業。 しかし、エンジニアとしての意地が僕を突き動かしました。
3. 完成した「飛ぶお姉ちゃん猫」と家族の反応
苦労の末、ついにオリジナルの「動くスキ画像」が完成しました。 容量も規定内に収まり、動きもスムーズです。
格闘すること30分、僕は興奮気味に、お姉ちゃん猫（ねえね）を呼びました。
「ねえね、見てくれ！お姉ちゃん猫の絵が、AIの力で飛んだぞ！」
お姉ちゃんは宿題の手を止め、僕のPC画面を覗き込みました。 画面の中では、お姉ちゃん猫が一生懸命ジャンプしています。
お姉ちゃんは一言、ボソリと言いました。
「あ、猫が飛んでるね」
感想はそれだけでした。 「パパすごい！」という称賛も、「魔法みたい！」という驚きもありません。 デジタルネイティブ世代の彼女にとっては、絵が動くことなど日常茶飯事なのかもしれません。
その様子を見ていた妻（お母さん猫）が、冷ややかな視線を送ってきました。
「あなた、休みの日に朝からパソコンに向かって……。そんなことより、
こねこ君の宿題見てあげてくれる？ さっきから脱線ばかりで、漢字ドリルが1行も進んでないのよ」
ふと、僕は思いました。 「このノウハウ、意外と知りたい人がいるんじゃないか？ 詳細な手順部分を有料記事にしてみたら、念願の『有料記事バッジ』がもらえるかも……」
そんなことを呟くと、お母さん猫がすかさず釘を刺しました。
「きっと誰も買わないわよ。欲を出さずに、誰かの役に立てばいいくらいの気持ちで公開して、『スキ』をもらう方が、あなたも嬉しいんじゃない？」
その通りです。 というわけで、一旦、有料化の野望は捨て、本記事の最後に今回行った手順を記載しておきます。
【お父さん猫コメント】
最新のAI機能を使えば、特別な動画編集スキルがなくてもアニメーションが作れる時代になりました。ただ、家族に自慢するときは、相手が興味を持っているタイミングを見計らうことが重要ですね（笑）
お姉ちゃん猫が飛んでいる動画が見たい方はぜひスキを押してください。
今は5パターンぐらいあります。
※アニメと言えば手塚先生😸ブラックジャック創作秘話面白いです。
【手順書】noteの「スキ」リアクション画像を動かす方法
今回僕が行った手順をまとめました。行ったのはPCですが利用しているのは全てWebアプリのため、スマホでも出来ると思います。
1. Gemini（Veo）で動画を生成する
元画像から数秒のアニメーション動画を作ります。
※Geminiの動画作成機能（Veo）は、現在Gemini Advanced（有料プラン）でのみ利用可能です。Sora 2など、他のAI動画生成ツールでも代用できます。
手順
Geminiを開き、ツールから「動画」を選択、またはプロンプト欄に元画像をアップロードします。
どのようなアニメーションにしたいか、プロンプトで指示します。
（入力例） 「この猫が喜んでジャンプする動画を作成してください。noteのスキ演出で使いたいのでfpsは少な目で良いです。10秒以下にしてください。音は不要です」
生成されたMP4動画ファイルを保存します。
2. Canvaで編集し、GIF形式に変換する
CanvaでMP4動画を、noteで使えるGIF画像に変換します。
手順
作成開始：Canvaメニューの「作成」から「動画」または「カスタムサイズ」を選択します（おすすめは800x800pxの正方形）。
アップロード：メニューの「アップロード」から、先ほどGeminiで作った動画ファイルを選択して読み込みます。
調整：
切り取り：枠に合わせて画像を拡大したり、位置を調整します。
分割：動画の不要な部分（動きが不自然な箇所など）を分割し、削除します。
書き出し：
「共有」ボタンを押下し、メニューから「ダウンロード」を選択します。
ファイルの種類を「GIF（短いクリップ、音声なし）」に変更します。
「ダウンロード」ボタンをクリックして保存します。
3. アニメGIFの容量を減らす
noteの画像容量制限（10MB以下）に合わせて圧縮します。
手順
画像編集サイト「ILoveIMG」さんの「GIF画像サイズ変更」ページ（https://www.iloveimg.com/ja/resize-image/resize-gif）にアクセスします。
Canvaで作ったGIFファイルをアップロードします。
「比率により」を選択し、75%程度を指定します（これで一気に1MB程度まで軽量化できます）。
画像をダウンロードして完成です。
4. noteに設定する
noteの「リアクション」設定画面で、完成したGIF画像を登録すれば完了です。
以上です。お役に立てたでしょうか？（笑）
「お父さん猫とこねこ君一家」は、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイトプログラムである、Amazonアソシエイト・プログラムの参加者です。良いものは良い、悪いものは悪いと使ってみた率直な感想をお伝えできればと思っています。
いいなと思ったら応援しよう！
ここまでお付き合いいただき、ありがとうございました！ 「お疲れ様、コーヒーでも飲みなよ」というお気持ちをいただけると、飛び上がって喜びます。頂いたサポートで美味しいコーヒーを飲みながら、また次の記事を書きたいと思います。