「隠し領域」とは何か
Xのカルーセル投稿では、複数枚の画像がタイムライン上で横に並びます。この時、各画像は中央付近だけが切り取られて表示されます。画像をタップして開くと全体が見えます。この差を利用して、タイムラインでは2枚がつながった1枚の絵に見え、開くと外側にもう少し絵が続いている、という見せ方ができます。
このツールは、その「タイムラインで見える範囲」と「開いた時だけ見える範囲」を分けて作るためのものです。通常の分割ツールとの違いは、表示範囲の外側に透明な余白を付けられる点にあります。
通常の分割ツールとの使い分け
| 通常の画像分割 | 隠し領域つき | |
|---|---|---|
| 分割枚数 | 2〜4枚 | 2枚 |
| 元画像の使い方 | 全体を分ける | 好きな40:17の範囲を選ぶ |
| 外側の余白 | なし | 透明余白を任意の幅で追加 |
| 向いている用途 | 横長の図解や写真をそのまま分ける | タップで見える範囲に仕掛けを作る |
数字の意味
- 40:17:2枚合わせた時の一枚絵の比率です。この範囲がタイムラインでつながって見えます。
- 20:17:1枚あたりの表示範囲です。40:17をちょうど半分にした比率にあたります。
- 透明余白:表示範囲の左右に足す部分です。ここはタイムラインでは見えず、画像を開いた時に現れます。
余白の幅に上限はありませんが、広げるほど1枚の画像が横に長くなり、開いた時の表示が小さくなります。まずは狭めに設定して、実際の見え方を確認しながら広げるのが失敗の少ない進め方です。
作業の順番
- 元画像を読み込みます。縦長でも正方形でも、選択枠が収まるサイズへ自動調整されます。
- 青い枠をドラッグして、一枚絵として見せたい40:17の範囲を決めます。この時、中央線に顔や文字が重ならないようにします。
- 画像1・画像2それぞれのプレビューで、オレンジの境界をドラッグして透明余白の幅を決めます。左右は連動し、画像1と画像2は別々に設定できます。
- 「透明余白つきで2枚に分割」を押し、保存します。
- Xへ投稿する時は、画像1・画像2の順番で添付します。
透明部分を活かすアイデア
保存したPNGの透明部分は、画像編集アプリで描き足せます。この作業を前提にすると、次のような見せ方ができます。
- タイムラインでは絵だけ、開くと左右に補足テキストが現れる
- タイムラインでは人物、開くと背景の続きが現れる
- タイムラインでは問いかけ、開くと答えが現れる
透明のまま投稿した場合、開いた時にはXの背景色で塗られた余白として表示されます。ダークモードとライトモードで背景色が変わるため、透明のまま使う場合は両方で確認してください。
うまくいかない時
- つながって見えない:投稿順が逆になっている可能性があります。ファイル名の番号を確認してください。
- 中央で絵が途切れて見える:中央線に重要な要素が乗っています。選択枠の位置をずらして取り直してください。
- 上下が切れた:40:17は横長の比率です。枠の外に出る上下は含まれません。
- 端末で見え方が違う:切り抜き位置はX側の仕様に依存します。本番前に下書きで確認してください。
読み込んだ画像と分割結果は、ツール内でブラウザ上のみで処理され、サーバーへ送信する仕組みは入っていません。GIFを読み込んだ場合は先頭フレームを静止画として扱い、完成画像はPNGで保存します。
ふくふく文鳥