【コラム】GIF動画アイコンの作り方
Substackの皆さん、こんにちは!
普段は「公務員のAI活用」について発信をしている結城と申します。
今回は、Substackをもっと楽しく、ちょっと見映えを良くする「GIF動画をアイコンに設定する方法」についてお話しします。
私が実際に試して成功した手順ですので、参考にしてみてください。
始まりは「古き良きTwitter」への懐かしさ
私がSubstackを始めたきっかけは、マーケターのイケハヤさん( @Ihayato )の発信でした。
その中で「Substackは昔のTwitterに似ている」というお話を聞いて、「それなら自分もやってみようかな」と始めたんです。
実際、今のSubstackの日本人ユーザーの間では、相互フォローを歓迎したり、「〇〇好きと繋がりたい」と呼びかけ合ったりと、まさに初期のTwitterで行われていたような交流が盛り上がっています。
それを見て、「あの頃、自分は何をしていたかな?」と昔を思い返していました。
多分、あの時に流行ってたことが、今、この環境なら流行りそうな気がしたからです。
私がTwitterの最初のアカウントを作ったのは、2009年のことです。そのアカウントは今もあって、完全に身内とやり取りするためのアカウントになってます。
(鍵垢とはいえ垢バレが嫌なので必要なところだけ)
当時は大学生で、講義中にiPod touchを使い、学内のWi-Fiに繋いでTwitterを触っていました。
その頃は「アルファツイッタラー」という言葉があり、1万フォロワーを超えると周囲への影響力が大きいアカウントとして認定されるような空気がありました。
また、「ふぁぼったー(favstar)」というサイトで、今の「いいね」にあたる「星(ふぁぼ)」が集まっている投稿をチェックするのも日常でしたね。
そんな思い出の中で一つピンときたのが、「アイコン」のことです。
今は未設定だと人型のシルエットですが、昔は「卵」のアイコンでした。
そして何より、アルファツイッタラーの人たちのアイコンは、結構な確率で「GIF動画」で動いていたんです。
「今のSubstackであの雰囲気を再現できたら面白いかも」と思い、早速GIF動画を作って設定してみたところ、無事にアイコンをチカチカと動かすことに成功しました。
具体的なGIFアイコンの作り方
私が自分のアイコンである「寝ているマカミくん」を動かすために踏んだ手順を紹介します。
1. ChatGPTで素材を生成する
まず、元々アイコンにしていた「うつ伏せで寝ているマカミくん」の画像をChatGPTに読み込ませ、次のようなプロンプトで指示を出しました。
この画像をGIF動画にしたいので、そのための画像を6枚生成してください。真ん中の狼がうつ伏せで寝ている様子を表現したいので、呼吸に合わせて肺が膨らみ、体が上下に動くような画像にしてください
こうして生成されたのが、微妙に体の高さや鼻ちょうちんの大きさが違う6枚の画像です。
2.外部サイト「バナー工房」で結合する
当初、ChatGPTに直接GIF動画を作ってほしいと頼んだのですが、「作れない」と返されてしまいました。そこで、昔ながらの少し怪しげな雰囲気もある無料サイト「バナー工房」さんを利用しました。
これは別にどこのサイトでもいいです。
私も、Google先生に聞いて、1番上に表示されたサイトでやってみたというだけです。
ここに生成した6枚の画像を取り込み、1枚ずつの切り替え感覚を設定していきます。
3.速度設定は「0.7秒」
ここで一番苦労したのが、画像の切り替え速度です。
0.1秒から7秒までと、かなり細かく設定できるのですが、GIFアイコンは、読者のタイムラインの中を一瞬で流れていくものです。
その一瞬の間に「あ、動いてる!」と認知してもらわなければなりません。
1秒からちょっとずつ時間を短くして、見え方を調整しました。
・ 1.0秒:やってみると動きがゆっくりすぎて、間延びした感じになります。
・0.5秒:逆に速すぎて、マカミくんがものすごい勢いで激しく呼吸している、落ち着かないアイコンになってしまいました。
何度も試して行き着いたのが、「0.7秒」または「0.8秒」という速さです。
これくらいの速度だと、タイムラインをシューッとスクロールして流し見している時でも、自然に「呼吸している動き」が目で追える、ちょうどいい塩梅になります。
反映されない人がいる?
この方法を発信したところ、多くの方がリスタックや引用で広めてくださったのですが、中にはイケハヤさんや他の方が試しても、うまく反映されないという現象が起きているようです。
実は、枚数を増やしてよりスムーズな動きにするために、改めてChatGPTに「GIFを作って」と指示したところ、今度はChatGPT内でGIFを生成してくれました。
その生成AIが作ったGIF動画は、動いたり動かなかったりしています。
もしかすると、このようにAIが直接書き出したファイルだと、何かの関係でSubstack側にうまく認識されないのかもしれません。
私は全くプログラミングの知識がないので、原因は分かりません。ごめんなさい……
もし反映されなくて困っている方は、手間はかかりますが、静止画をバラバラに保存してから「バナー工房」などの外部サイトで結合する方法を試してみてください。
おわりに:ブームは巡る
17年も前の2009年の流行を、まさか今になって再現することになるとは思ってもみませんでした。
よくファッション業界ではブームは回ると言われますよね。
私が中学生だった20年前に大流行したルーズソックスが、今また女子高生の間で流行っているそうです。
約20年、つまり親が子供を育て上げ、世代が一つ変わるくらいの周期でブームは再来する。
そう考えると、17年前のTwitterの流行が今のSubstackに巡ってくるのも、ある種の必然なのかもしれません。
当時の雰囲気を知りたい方は、ChatGPTやGeminiに聞くのもいいですが、本家本元のGrokなどに聞いて情報収集してみると面白いヒントが得られるはずです。
古くて新しい「動くアイコン」、皆さんもぜひ遊び心で試してみてはいかがでしょうか?
【作品たち】
ChatGPT作成
今のアイコン
背景色がころころ変わって非常に見た目がうるさい。要修正。
【追記】iOSやPCブラウザではGIF動画をアイコンに設定できない可能性
令和8年5月8日追記
記事をたくさんの方に読んでいただき、本当にありがとうございます。
記事を読んでくださった方々から、「GIF動画をアイコンに登録しようとしても、うまく反映されずに静止画になってしまう」という報告がいくつか寄せられました。
そこで色々な方とやり取りをしていくうちに、原因が見えてきました。
どうやら、Android端末からであれば正しくGIF動画を設定できるようですが、iOS(iPhoneなど)やPCのブラウザからアイコンを設定して保存すると、GIFではなく静止画として処理されてしまうという現象が起きているようです。
実際に、以下のようなコメントをいただきました。
ですので、もしこれからGIFアイコンを設定される際は、Androidの端末をお持ちであれば、そちらから登録作業を行ってみてください。










シェアありがとうございますー!私も見よう見まねで試行錯誤して動かしてみました🙌
結城さんはsubstackに設定する時、PCやスマホで普通にプロフィールから設定されましたか??そこが結構苦戦しまして、結局はAPIで何とか設定してみました😂