Substackのアイコンをアニメーションにする方法
SubstackのアイコンをアニメーションGIFを使って動くアイコンにする方法をご紹介します
Substackのアカウントのアイコンはみなさん個性的です。中には、アニメーションで動いてるものも目にするようになりました。これはアニメーションGIFという手法で、わりと簡単に作ることができます。以前はウェブでツールを探して作るのが普通でしたが、生成AIの登場により手元で簡単に作ることができるようになりました。
Substackのアイコンには2種類あります。個人アカウントのアイコンと、出版物のアイコン（ロゴ）です。出版物のアイコン（ロゴは）、通常の画像と同じように設定すればアニメーションになるのですが、個人のアカウントのアイコンを切り替えるには少しコツがありました。このあと解説していきます。
アニメーションGIFを作成する
今回は、以下の手順で進めます。
現在使っているアイコンのイラストをもとに動画を作成する
作成した動画をGIFファイルに変換する
イラストを動画にする
Geminiを使って動画を作成します。私はGeminiのPro版を使っていますので動画を生成できますが、無料のアカウントだと動画の作成はサポートされていないかもしれません。代替手段を調べてみてください。
イラストをアップロードします。「アニメーションGIFに変換して」と指示します。
アニメーションGIFに変換 作成されましたが、イラストがズームされたり、戻ったりという意図しないアニメーションになりましたので、別の指示をします。「イラストに描かれた人物が手を上げて挨拶するように動かすアニメはできますか。」
アニメにする 動画を作成してくれました。GIFファイルにするところまでしてほしかったのですが、仕方ありません。
動画完成 Googleの動画生成モデルVeoで動画を作成してくれたようです。しかし、左右の黒い部分が不要ですので削除してもらおうとしたのですが、Geminiではできないと断られました。
やむなくClaude Coworkで続きの作業をします。Geminiで作った動画をアップロードして「 このファイルをGIFファイルに変換して書き出してください」と指示しました。
CoworkでGIFを作成 アニメーションGIFにはなったものの、左右の黒い部分がそのままです。「 両端の黒い部分をトリミングして正方形のGIFファイルを作れますか」と聞いてみました。
すると正方形のGifファイルにして出力してくれました。アニメーションGIFファイルが完成しました。
アイコンを設定する
出版物（パブリケーション）のアイコン（ロゴ）を設定する
出版物（パブリケーション）のアイコン（ロゴ）を設定します。現在のアイコンを「×」（バツ）で閉じたのち、作成したGIFファイルを選択して設定します。簡単な操作で動くアイコンが使えるようになりました。
アカウントのアイコンを設定する
アカウントのアイコンの方がなかなかうまくいきませんでした。まず、プロフィールの編集からアイコンを変更すると、必ず画像のトリミング画面になります。せっかく作ったGIFファイルが、静止画に変換されてしまいました。
次に、ケータイから設定してみました。iPhoneを使っていますが、アイコンを変更しようとすると「写真」アプリからの選択になります。しかも、写真アプリはJPEG形式のファイルのみサポートしており、GIFファイルは受け付けてくれません。
完全に行き詰ってあきらめていたのですが、今朝、Substackのタイムラインで以下の投稿を見つけました。
Androidでアイコンを設定する
Androidだと設定できるようです。しかし、私はiPhoneですし、家族にもAndroidを使っている人はいません。どうしたものかと考えました。
なお、Androidをお使いの方は、GIFファイルをGoogleドライブに保存して、それをスマホで読み込むと設定できますのでお試しください。
あらかじめ、お断りしておきますが、ここから先はかなりマニアックな方法です。iPhoneしかないが、何とか設定したいという強い気持ちに動かされた結果です。どなたでもできるかというと、そうとは言い切れません。ダメもので取り組みたい方はぜひ自己責任でチャレンジしてみてください。
Android Studioをインストール
Android Studioという、Android OSの開発環境があります。私は開発をするわけではないので詳しくないのですが、その機能の1つとしてAndroidスマホを仮想的に動かすことができます。もしかすると、そこからできるかも、と思い試してみました。
インストール後、「More Actions > Virtual Device Manager」からPixel10 Pro XLを立ち上げました。
実際の操作画面です。スマホを触るのと同じ感覚で操作できます。まず、ブラウザ画面からSubstackにログインし、プロフィールの写真を変更しようとしましたが、やはりトリミングの画面になりました。
次に、Substackのアプリをインストールして、写真を変更してみると、いけそうです。
パソコンからGoogleフォトにGIFファイルを保存したところ、スマホ画面で見ることができ、アイコン画像も変更することができました。
まとめ
ちょっと苦労はしたものの、無事目的を達成することができました。アイコンが動くから何なんだと言われるそれまでですが、楽しいからいいではないか、という気持ちです。Androidのスマホをお使いの方は、苦労することなく設定できますので、ぜひお試しください。
購読して次回の記事もお読みください。
この記事をシェアしていただけるとうれしいです。
ぜひリアクションをお願いします。励みになります。
いつもありがとうございます。