Twitterでクリックするだけで変化するトリック画像を分解してみた！

2013-09-02 11:00

この記事は約 4 分で読めます。

Twitterでサムネイル画像をクリックすると変化する不思議なトリック画像がTL(タイムライン)に流れてきました。どのように実現しているのか気になったので分解してみました。(追記：2013-09-02 17:00 自作のツイートを追加しました。)

まずは、見てみましょう

Twitter公式のWeb(PC/モバイル)、またはアプリでの閲覧推奨です。以下の画像をクリックして、Twitterで表示された後、再度画像をクリックして拡大表示します。

エレンをクリックしてみてください。※Twitter公式推奨 pic.twitter.com/gqqrl1WHcU
— 東山マキ (@wuhlnouveau) August 28, 2013

TL(タイムライン)のサムネイル表示では見えていなかったものが、クリックして拡大表示すると現れるという何とも不思議な画像です。

分解！透過PNGと背景色の組合せ

一瞬、何やら凄い技術を使ってるのかと思いますが、実は透過PNGと背景色の組合せで実現しています。
image-trick-tweet01
サムネイル表示の背景色は白ですが、拡大表示した際に背景色が黒に変わるため見えていなかった透過部分が表示される仕組みです。

使用するTwitterクライアントによっては、背景色が最初から黒だったり拡大表示後も背景色に変化がない場合などがあるため、公式のWeb(PC/モバイル)、またはアプリでの閲覧が推奨されています。
私は、公式以外のtwitterクライアントを使用していて、ダーク系のテーマに設定していたので、サムネイル表示の時点で既にすべて表示されているので、最初は何のことやらさっぱり分かりませんでした(汗)

他にもいろいろ！

他にも、いろいろチャレンジされている方がいたので、ご紹介します。

(追記：2013-09-02 17:00)
自作したツイートを以下に追加しました。

【閲覧注意】↓画像をクリックしてみてください。（※twitter公式での閲覧推奨）タネあかしはコチラ → / Twitterでクリックするだけで変化するトリック画像を分解してみた！ http://t.co/T6960hmOgQ pic.twitter.com/Ql1VWErztI
— SQUEEZE (@squeezejp) September 2, 2013

仮面ライダーディケイドがウィザードの世界通りすがるときいて！！＼ｲﾝﾋﾞｼﾞﾎﾞｩ／※公式からクリック推奨 pic.twitter.com/kk9m3Etv16
— 柊 (@FUBUKI) August 31, 2013

ジョジョオールスターバトルやりたすぎて仕事中に作った。承太郎をクリックしてみて！※Twitter公式推奨 pic.twitter.com/QsC9dAbgc7
— きょへ＠スタンド使い (@shoda114) August 29, 2013

右京さんをクリックしてみてね。いつか本編で観れますように！（※twitter公式での閲覧推奨） #aibou #相棒 pic.twitter.com/SguxktTqTQ
— かり (@discoverykari) August 31, 2013

おわりに

いかがでしたでしょうか。SNSでは、投稿できる画像の種類やサイズ、文章の文字数制限など表現方法が限定されてしまいますが、アイデア次第では面白いことができますね。

上記で紹介したツイート以外にも、面白いトリック画像ツイートを見つけたり、チャレンジ(作成)された方がいらっしゃったら教えていただけると嬉しいです。