Xでクリックすると絵が変化する画像って、たまに見かけたりしませんか？
例えばコチラ👆の投稿のように、サムネイルではなにも描かれていなかった部分が、画像をクリックして開くと、隠れていた絵や文字が見えてくる……。
初めて見ると「どうやって作ってるの？」と気になりますよね🤔
魔法でも使ってるなも！？
擬人化シンナモ、この世には魔法なんてないなもよ……。
実はこれ、仕組みが分かればそんなに難しくないんです！
そこで今回は、実際に作ってみた画像を紹介しながら、ChatGPTの画像生成機能とCanvaを使い、『クリックしたら絵が変化する画像』の作り方やコツを紹介していきます🙌
『クリックすると絵が変化する画像』とは？
Xで見かける「クリックすると絵が変わる画像」とは、タイムライン上で見たときと、画像をクリックして開いたときで、見え方が変わるように作られた画像のことです。
仕組みとしては、Xの画像表示仕様とPNG画像の透過機能を利用したもの☝️
PNG画像では、何も塗っていない部分を「白」ではなく「無色透明」にでき、透明になった部分は、画像の後ろにある背景色がそのまま見えます。
そしてXでは、タイムライン上の背景は白く表示され、画像をクリックして開くと、拡大表示画面の背景は黒く表示されます。
そのため、画像の中に白く描いた部分と透明な部分を混ぜておくと、タイムライン上ではどちらも白っぽく見えて、違いがほとんど分かりません。
ところが画像を開くと、透明部分の後ろに黒い背景が見えるため、隠れていた部分が浮き出て見えます。
つまり、画像そのものが変化しているのではなく、背景色の違いによって、別の絵に見えるということです😌
生成AIとCanvaで”変わる絵”を作る手順
ここからは、ChatGPTの画像生成機能とCanvaを使って、「クリックすると絵が変わる画像」を作る手順を紹介していきます。
流れはシンプルで、
- ChatGPTの画像生成機能で白黒絵を生成する
- Canvaで背景と黒塗り部分を透過する
- Canvaで線画を白色にし、それぞれの絵を合成する
という3ステップです！
今回は、『クリック前は一人しかいなかったのに、クリックすると実はもう一人いる』という構想で作っていくなも。
1.白黒絵を生成する
まずは、ChatGPTの画像生成機能で白黒絵を作ります。
カラー絵やグレーを入れた絵でもできるけど、白黒で作るのが比較的簡単でオススメなも！
このとき大事なのは、残したい線画と透過させたい黒塗り部分をはっきり分けておくこと。
線画、黒塗り、白背景が分かれているほど、次の工程で「どこを透明にするか」「どこを線として残すか」が判断しやすくなります。
実際に生成した絵👇
2.背景と黒塗り部分を透過する
次に、クリック後に浮き出したい絵の背景と、黒く塗られている部分を、Canvaを使って透過していきましょう！
今回の絵でいうと、白い背景＋帽子や服などの黒ベタ部分ですね。
ここを透過することで、Xで画像を開いたときに、拡大表示画面の黒い背景が透けて見えるようになります。
背景と黒塗り部分を透過した絵👇
ポイントは、黒い部分をすべて消すのではなく、線画として残したい線は残す！
黒い部分をまとめて透過すると、輪郭線や細い線まで一緒に消えてしまい、クリック後に見せたい絵が崩れてしまいます。
この調整をしておくと、次の工程で線画を白色に変えたときに、黒背景の上でもキャラクターの形がきれいに浮かび上がります。
クリック前から見せたい絵は背景の透過だけでOKなも！
3.線画を白色にし、それぞれの絵を一枚の画像に収める
背景と黒塗り部分を透過できたら、残した線画をCanvaを使って白色に変更します。
黒い線画のままだと、タイムライン上の表示で、クリック前では隠したかったはずの絵が見えてしまいます。
そこで、残っている線画だけを白色に変えて、クリック後に浮き出て見えるようにしていきましょう！
Canvaでの線画色変更方法👇
- 編集したい画像を選択
- 編集を押し、「画像を編集」欄を表示
- フィルターの「すべて表示」を選択
- フィルター内の「ダブルトーン・カスタム」を選択し、「ハイライト」と「シャドウ」を白色にする（画像の背景は認識しやすい黒へ変更）
線画を白くしたら、クリック前から見せたい絵と、クリック後に浮き出てほしい白い線画を、1枚の画像の中に配置していきましょう。
それぞれの絵の位置を調整し、最期に透過情報を残したままPNG形式で保存すれば、Xに投稿する画像の完成です🎉
完成した”変わる絵”がコチラ👇
すご～い！ちゃんと隠れていた絵が出てきたなも～！
どことなく不穏な感じがあってカッコいいなも✨
作ってみて分かったコツ
実際に作ってみると、手順自体はシンプルですが、きれいに見せるには少しコツが必要でした。
ここからは、実際に作ってみて分かったコツをまとめていきます！
ChatGPTの画像生成機能で生成
1.別の色に変更してから透過する
黒塗りの部分や背景がうまく透過できないときは、消したい部分だけを別の色に変更してから透過すると作業しやすくなります。
線画も黒、塗りつぶし部分も黒のままだと、生成AIや透過ツールが「残す線」と「消す部分」を見分けにくくなり、その結果、黒ベタだけでなく、輪郭線や細い線まで消えてしまうことが……😱
そんなときは、透過したい黒塗り部分だけを赤や青などに変えてから処理すると、消す場所が分かりやすくなります！
少し手間はかかりますが、線画をきれいに残したいときに便利な方法です🙌
2.別の透過ツールを使う
生成AIでも画像の透過はできますが、黒塗り部分だけを消して線画のみ残したり、白色のまま残したいなどの細かい調整は少し難しい場合があります。
特に、線画と黒ベタ部分がくっついている画像だと、残したい線まで一緒に消えてしまうことも……💦
うまくいかないときは、生成AIだけで何度も直すより、無料の画像透過サイトや画像編集ツールを使った方が早いです。
背景だけを消したい場合は透過サイト、細かく部分指定したい場合は画像編集ツール、というように使い分けると作業しやすくなるでしょう☝️
3.最初の白黒絵をシンプルに作る
最初に作る白黒絵は、できるだけシンプルな構図にしておくのがおすすめです！
細かい線やグレーの影が多いと、透過するときに線が欠けたり、どこを残すべきか分かりにくくなったりします。
特に黒塗り部分と線画が近い場所は、まとめて透過されやすいので注意が必要なも！
「あとから透過する前提」で作るなら、最初の段階では描き込みすぎず、キャラクターの形が分かるくらいのシンプルな白黒絵にしておくと失敗しにくいです🙂↕️
4.完成後に必ずXで表示確認する
画像が完成したら、最後に必ずXへ投稿して見え方を確認しましょう！
Canva上ではきれいに見えていても、Xに投稿すると、タイムライン上の表示サイズや背景色の見え方によって印象が変わることがあります。
特に確認したいのはこの二つ👇
- タイムライン上で、クリック前に見せたい絵だけが見えているか
- 画像を開いたときに、白い線画や透過部分がきれいに浮き出て見えるか
スマホとPCで見え方が少し違う場合もあるから、できれば両方で確認しておくと安心なも✨
うまく見えない時は、線の太さや配置・透過部分の量を調整すると変化が分かりやすくなるはずなも！
注意点
今回の方法は、Xの表示仕様とPNG画像の透過を利用したものなので、いくつか注意点があります。
ここからは、作る前に知っておきたい注意点をまとめていきましょう！
X公式の仕様として断定できない部分もあるから、あくまで参考としてみてほしいなも。
1.Xのテーマカラーに注意する
この画像トリックは、タイムラインの白い背景と、画像を開いたときの黒い背景の差を利用しています。
そのため、Xのテーマカラーをダークモードにしている人には、クリックする前から隠したい部分が見えてしまう場合があります。
本来は画像を開いたときに見せたい部分が、タイムライン上ですでに見えてしまうということです。
つまり、この仕組みはすべての人に同じ見え方をするわけではありません！
投稿前に確認するときは、ライトモードだけでなく、できればダークモードでも見え方をチェックしておくと安心です😌
2.PNG画像のサイズにも注意
Xに透過PNGを投稿するときは、画像サイズや投稿方法にも注意が必要です。
「900px×900px未満なら無変換」といった情報もありますが、現在の公式仕様としては断定しにくいため、その時々の仕様に合った編集方法で作成していきましょう！
この方法は透過が残っていることが前提なので、完成後は一度テスト投稿して、クリック前とクリック後の見え方を確認しておくのがおすすめです。
ちなみに、スマホのXアプリから透過PNGを投稿すると、JPEG変換される場合があって、透過が消失しちゃうから注意なも💦
まとめ
今回は、ChatGPTの画像生成機能とCanvaを使って、「クリックすると絵が変わったように見える画像」を作ってみました。
一見難しい手法のように見えますが、仕組みを理解し、画像生成AIとCanvaを駆使することによって、思った以上にそれっぽい画像が作れます🙌
ただ、生成AIを使った透過の調整は少し苦戦するかもしれません。
黒塗り部分だけを消したいのに線画まで消えてしまったり、Canva上ではよく見えてもXに投稿すると印象が変わったり……。
それでも、うまく表示されたときはかなり面白く、達成感もあるでしょう！
Xのネタ投稿や、画像生成AIを使った遊びとしてはかなり楽しいので、興味がある人は一度試してみる価値ありです✨
合わせて読みたい
🫧綺麗で美しいクリームソーダ🫧
このクリームソーダに名前をつけるなら、あなたはどんな名前をつけますか？
