以下略ちゃんの逆襲 ツイッターGOGO

わかりやすさに拘る以下略ちゃんの政治系ツイッターとの融合ハイブリッドブログ。小学4年生()でもわかる!

Twitterの動くアイコンの作り方と現状…回転して光る?アイコン…Twitterデザインの歴史

time 2018/06/26

Twitterの動くアイコンの作り方と現状…回転して光る?アイコン…Twitterデザインの歴史
この記事の所要時間: 52

sponsored link

Twitterのデザインの歴史とアイコン

動く画像の作り方

以下略ちゃんの現在のTwitterアイコンは、これです。


回転しています。

 

「どうやって動かすんですか?」「なぜ光っているんですか?」というご質問をいただくことがあります。

今回は、Twitterの動くアイコンについて解説してみたいと思います。

 

この動く画像は、「GIFアニメ」です。GIFアニメとは、「複数の静止画像」を1つの画像に重ね合わせた動画(GIFに変換した画像)の名称です。

この回転する子猫のGIFアニメは、10枚の静止画像から出来ています。

背景が「青」の子猫の画像が9枚、背景が「ピンク」の子猫の画像が1枚、を重ね合わせています。

番号が「子猫」の頭の位置

まず最初に、背景が「青」の子猫の画像を一枚作り、それを45度ずつ回転させて8枚の画像を作りました。

1と9は、同じ画像です。

10は、同じ画像を拡大して、背景を「ピンク」にしたものです。子猫が拡大されていることによって、色の変化と同時に飛び出して見える効果を狙っています。

光っているように錯覚するのも、この効果によるものです。

この10枚の画像を使って、オンラインで画像を加工、編集できる「バナー工房」というサイトで、GIFアニメに加工しました。

以上が、以下略ちゃんのアイコン画像がどのようにできているかの説明ですが、問題はこれをTwitterにどのようにアップロードするかです。



今ではもう動くアイコンは設定できない

GIFアニメの作り方を説明しておきながら恐縮なのですが、2018年6月現在、GIFアニメをアップロードしても動きません。

複数の画像のうち、最初の1枚が表示されるだけです。

以下略ちゃんがTwitterに登録した2011年当時、PCサイトのTwitterのデザインはこのようなかんじでした。

今のようなヘッダー画像はなく、四角いアイコンの右にプロフィールが入っているだけのシンプルなデザインでした。

自分の画像は四角いアイコンだけ。このデザインの時代、GIFアニメを設定すると動くアイコンにできました。

 

2012年になって、米Twitterは9月18日(現地時間)、アカウントのプロフィールページのデザインを変更したと発表しました。

自分を表現するための「ヘッダー画像」が新設され、大きな画像をアップロードすることができるようになりました。

「アイコン画像」と「大きなヘッダー画像」で自分をアピールすることが可能になりました。12月12日には、すべてのユーザーのデザインがこのヘッダー付きのものに変わりました。

このデザイン以降、アイコンにGIFアニメをアップロードしても、動くことはなくなりました。

このデザイン以前にGIFアニメを設定した人だけが、その後もアイコンが動き続けています。

アプリなど別な方法でそれ以降も設定できる方法があったのかもしれませんが、今、動いている人は、おそらく2012年以前に、アイコン設定した人だけです。

動いている人も、アイコン画像を新しくしてしまえば、動かなくなってしまいます。

 

2014年、ヘッダー画像が画面幅いっぱいに

その後、2014年4月に現在のように、ヘッダー画像が大きく、画面幅いっぱいに表示されるようになり、アイコンはヘッダー中央ではなく左側に表示されるようになりました。

 

2017年、アイコンが四角から丸に

2017年6月16日には、Twitterのアイコンが丸くなるというアップデートが実施されました。それまで四角だったアイコンが突然、丸く表示されてしまったので、多くの人のアイコンが悲惨なことになってしまいました。


以下略ちゃんの動くアイコンも、四角いものでした。偶然、回転するタイプでしたので、アイコンが丸く表示されることになっても、何の不都合もなく、今日までグルグル回り続けているのです。

sponsored link

down

コメントする




日本語が含まれない投稿、無関係なURL(スパム対策)、誹謗中傷、差別的な書き込みは表示されません。


お願い

【お願い】転載は記事の3分の1未満まででお願いします。記事等を転載される場合は必ず当ブログのURLを直リンクでご紹介下さい。

転載の際は、当ブログのアクセスを奪わないように十分にご配慮ください。

ページの丸ごとキャプチャー、コピペ転載は禁止。写真の転載、動画への転載は一切お断りします。

 



sponsored link

カテゴリー

Amazonで商品検索

この検索窓は以下略ちゃんが参加しているアマゾン・アソシエイトです。

楽天