01
長押し画像ラボ
画像はこの端末から送信されません
画像を作成
1枚の画像を長押しで表示
01 · 元画像
長押しで変化させる画像
02 · ライブ確認
画像を押して変化を確認
オリジナル作例
1つのファイルに、2つの瞬間
印象に残る変化は、共通する人物や構図を残しながら、意味のある一点を切り替えています。各作例を長押しして明暗の表示を比べ、自分の2枚をどう組み合わせるか考えてみましょう。
02
昼から夜へ
03
前振りからオチへ
実用的な3ステップ
長押しで変化する画像の作り方
この変化はフィルターやスクリプトではなく、PNGファイル自体の透明度で生まれます。1枚の画像を市松状に隠す方法と、2枚を明るい背景・暗い背景で入れ替える方法があります。両方の表示を確認し、完成PNGをそのまま投稿します。
- 01
1枚または2枚の画像を選ぶ
1枚モードでは、画像全体を隠す、暗い部分を残す、見せたい範囲を手動で塗る、の3通りから選べます。2枚入れ替えでは、タイムラインで見せる表画像と、長押し後に見せる隠し画像を選びます。PNG、JPEG、WebPに対応しています。
- 02
明暗の両方で確認する
ライブプレビューを押すと背景が切り替わります。1枚モードでは明度、線画、見せる範囲を調整します。2枚モードでは表と隠しの優先度を少しずつ動かします。プレビューとダウンロードは同じPNGなので、投稿前に弱点を確認できます。
- 03
PNGのままダウンロードする
完成したファイルをPNGで保存し、そのファイルを直接ポストに添付します。JPEGに変換する編集アプリやメッセージアプリを経由しないでください。アップロード後は、読者が使う端末で投稿を開き、広く共有する前に2つの表示を確認します。
仕組みを理解する
1枚のPNGに2つの表示が生まれる仕組み
1枚モードでは、隠す部分を1ピクセルごとの市松模様にし、半分を完全透明にします。Xの白いタイムラインでは細かな透明と不透明が平均化され、画像が白く薄まります。黒い全画面ビューアでは同じ格子に黒が入り、色とコントラストが戻ります。この格子を維持するため、透明パレットを持つPNG8で書き出します。
2枚入れ替えモードは別のアルファ合成を使います。透明ピクセルの色と不透明度を計算し、白背景では表画像、黒背景では隠し画像を優先します。どちらのモードにも動画や実行コードは入っていません。JPEGへ変換すると透明度がなくなるため、両方の効果が失われます。
明るい背景での表示
1枚モードでは、市松状の透明部分が白いタイムラインに平均化され、画像の大部分が白へ薄まります。残す暗部や手動で塗った場所は不透明のままです。2枚モードでは表画像を明るい階調へ割り当てます。どちらも形がはっきりした画像ほど伝わります。
暗い背景での表示
1枚モードでは、透明な格子に黒が入ることで元の色とコントラストが戻ります。2枚モードでは隠し画像を暗い階調へ割り当て、白の寄与が消えたときに細部が見えるようにします。明るい輪郭は、変化後の驚きを特にはっきり見せます。
2枚モードがグレースケールになる理由
1枚モードは元画像の色ピクセルと完全透明ピクセルを交互に置くため、カラーを保てます。一方、任意のフルカラー画像2枚は、1ピクセルの共通した不透明度だけで白と黒の両背景に正しく再現できません。2枚モードは制御したグレー階調に分け、安定した入れ替えを作ります。
元画像の選び方
変化がはっきり見える2枚を選ぶ
ほとんどの画像を組み合わせられますが、どの2枚でもタイムライン上で伝わるわけではありません。スライダーを細かく動かす前に、組み合わせを見直しましょう。次の4点は、細部を追加するよりも大きな差を生みます。
01
主役の輪郭を合わせる
2枚とも、主役をほぼ同じ場所に置きます。顔から顔へ、同じポーズのキャラクターへ、ロゴから同じ大きさの記号へ変えると、意図した変身として読めます。主役が反対側の隅にある無関係な2枚は、背景が変わった瞬間に雑然として見えます。
02
共通のトリミングを使う
2枚の元画像は、選択した出力比率に合わせて中央で切り取られます。ダウンロード前に正方形、縦長、横長を比べ、重要な要素を端から離してください。キャラクター絵には縦長、さまざまなフィードには正方形、横構図の2枚には横長が使いやすい選択です。
03
明暗差が分かる画像を使う
最初の画像の濃い輪郭と、隠し画像の明るいハイライトは変換後も残りやすい要素です。霧のような低コントラスト、細かな肌の質感、小さなグラデーション、複雑な写真背景は混ざりやすくなります。縮小した時点で主役が分かりにくいなら、先にトリミングして整理します。
04
スマホの大きさで判断する
多くの人は大きなデスクトップ画面ではなく、細いフィードで画像を見つけます。プレビューから少し離れるか、ブラウザ幅を狭くしてください。変化前だけでも完成した絵に見え、背景が変わった後は1秒ほどで隠し内容を理解できる状態が理想です。
投稿前の確認
透過PNGをXに投稿する方法
ダウンロードから表示まで、ファイルの透明度を保つ必要があります。PNGをファイルまたは写真ライブラリから直接添付してください。編集アプリ、予約投稿サービス、クリップボード、チャットアプリが平坦な画像として書き出すと、見た目が普通でも変化に必要な情報はすでに失われています。
Xの画像ビューアは、アプリのバージョン、端末、テーマによって変わることがあります。自分がアップロードした下書きを最終テストにしてください。画像を全画面で開き、表示される場合はオリジナルや高画質の表示を使います。「長押しで変化」など短い案内を添えると、もう1つの絵があることを伝えられます。
- 1
拡張子が .png の完成ファイルをダウンロードします。端末上で .jpg や .jpeg になっている場合は、画像メーカーに戻ってもう一度保存してください。
- 2
PNGを新しい添付画像として直接アップロードします。スクリーンショット、クリップボード経由のコピー、透明度を保てないアプリでの再保存は避けます。
- 3
アップロードが完了するまで待ってから投稿します。添付画像を開き、明るいタイムライン表示で隠し画像が早く見えすぎていないか確認します。
- 4
同じ画像を全画面で開きます。オリジナルまたは高画質表示がある端末ではそれを使い、暗い背景で2枚目が現れることを確認します。
- 5
読者にiOSとAndroidの両方が重要なら、現在のXアプリとWebで一度ずつテストします。表示動作が違っても意味が通じるよう、キャプション単体でも分かる内容にします。
すぐできる切り分け
長押ししても変化しないとき
まず、このページのプレビューで完成画像を確認します。ここで両方の表示が機能するならPNGは正常で、アップロードまたは表示の途中に原因があります。片方が弱い場合は、隠し方、明度、手動マスク、元画像の組み合わせ、または優先度を変えます。
01変化前から隠し画像が見える
1枚モードでは「全部隠す」を選ぶか、暗部の範囲を下げて不透明な部分を減らします。2枚モードでは隠し画像に大きな明るい部分がある可能性があります。より暗い画像を選ぶか、優先度を表画像側へ動かします。少し痕跡が見えるのは自然な場合もあります。
02長押しメニューは出るが絵が変わらない
長押し操作と背景の変化は別の動作です。Xの一部バージョンでは長押しでメニューが開き、画像を全画面またはオリジナル表示にしたとき背景が変わります。先に画像を開き、アプリに表示される場合はオリジナルや高画質の項目を試してください。
03投稿では1枚の平坦な画像にしか見えない
拡張子と透明度を確認します。スクリーンショットやJPEGへの変換はアルファチャンネルを完全に削除します。PNGを再ダウンロードして直接アップロードしてください。ローカルファイルを白と黒の背景で開けば、投稿の前後どちらで変換されたかも切り分けられます。
04細い線や小さな文字が消える
1枚モードでは自動線画をオンにするか、重要な線を手動で塗るか、元画像で太くします。2枚モードでは、線が消えた側へ優先度を動かします。細い文字に必須情報を置かず、大きな形と明暗差のある輪郭を使うと安定します。
05PNGの容量が大きくて投稿できない
細部の多いPNGはファイル容量が大きくなります。容量を抑えたい場合は「高画質化」をオフにするか、小さい出力比率や元画像を選んでください。ダウンロードボタン横の数値が実際の出力サイズです。元画像の寸法ではなく、ライブプレビューで鮮明さを判断してください。
変化の使い方
長押しする理由があるアイデア
良い作例では、最初の表示に役割があり、変化後に発見があります。無関係な画像へ入れ替えるだけではなく、2枚目が意味を付け足す組み合わせを選びましょう。
ラフから完成イラストへ
明るい表示に下描き、暗い表示に完成した輪郭、衣装、光の演出を置きます。ポーズをそろえると、単なる切り替えではなく変身として伝わります。
昼から夜へ
同じ風景の昼と夜を組み合わせます。窓、星、看板、キャラクターの瞳などを、黒い背景で現れる明るい細部として活用できます。
ビフォー・アフター
修復、スタイリング、制作過程、表情の変化を1つの画面で見せます。縮尺とカメラ位置を合わせ、背景の切り替えで変化した部分だけが分かるようにします。
前振りとオチ
最初の画像で視覚的な問いを作り、隠し画像で答えを出します。グレースケール変換とスマホ表示では小さな文字が読みにくいため、重要な言葉は短く大きくします。
画像はブラウザの外へ送信されません
画像の読み込み、ピクセル計算、プレビュー、PNG書き出しは、すべてこの端末のブラウザCanvasで行われます。元画像や完成ファイルをサーバーへ送信しません。タブを閉じると作業中の画像はページから消えるため、離れる前に完成PNGを保存してください。
- サーバーへの画像アップロードなし
- アカウント・メール登録なし
- 完成画像のクラウド保存なし
長押しで変化する画像のFAQ
画像を作ってから実際の投稿で変化を見るまでに、よく出てくる疑問へ短く答えます。
01この長押し画像メーカーは無料ですか？+
はい。アカウント、支払い、クレジット上限、透かしなしで透過PNGを作成し、ダウンロードできます。画像処理はブラウザ内で完結するため、サーバーの処理待ちもありません。
02元画像はどこかにアップロードされますか？+
いいえ。選択したファイルは端末内で読み込み、ブラウザCanvasで合成します。元画像も完成PNGもAPIへ送信しません。言語設定など通常のページ設定をブラウザが保持することはありますが、この画像メーカーで使った画像は保存しません。
03対応する画像形式と出力形式は？+
20MB未満のPNG、JPEG、WebPを元画像として選べます。ダウンロードは透明パレットを持つPNG8です。1枚モードの市松格子と、2枚モードで計算したアルファ値を保つためです。SVGには対応せず、完成画像をJPEGへ変換すると効果は失われます。
04iPhoneで変化を見るには？+
現在のXアプリで投稿を開き、画像を全画面表示して、投稿の案内に合わせて画像を押すか長押しします。オリジナルまたは高画質表示がある場合はそれを使います。メニューや操作はアプリ更新で変わるため、公開前に自分の投稿で確認してください。
05Androidでも長押し画像は見られますか？+
透過PNG自体は透明度を保つ端末で機能しますが、Xが明るい背景と暗い背景をどう表示するかはAndroidのバージョンやテーマで異なることがあります。画像を全画面で開き、表示される場合はオリジナルまたは高画質を選び、読者が使う端末で確認してください。
062枚モードがグレースケールになるのはなぜ？+
1枚モードは元画像の色を保ちます。2枚のフルカラー画像は通常、1ピクセルの共通した不透明度だけで白と黒の両背景に正しく再現できないため、2枚モードは制御したグレー階調を使って計算を安定させます。
07画像の画質は下がりますか？+
選んだ比率に合わせて画像を切り取り、仕組み上必要な階調変換を行います。「高画質化」をオンにすると、長辺が最大2432ピクセルのプリセットで出力します。容量を抑えたい場合はオフにするか、小さい出力比率や元画像を選んでください。
08ネットで見つけた画像を使ってもよいですか？+
自分で作った画像、再利用の許可を得た画像、または予定する用途を認めるライセンスの画像を使ってください。公開された人気ポストでも、自由に転載できるとは限りません。内蔵サンプルとこのページの作例はオリジナルなので、自由に試せます。