S-Mock
簡単モックメーカー / Screen Mockup
使い方 (How to use) 閉じる
  1. 各スマホ枠下の 「画像を選択」 ボタンからスクショ画像を読み込む(最大20台分)
    Click "画像を選択 (Choose File)" under each phone and load your screenshot. (Up to 20 phones)
  2. 各スマホ下のボタンで個別保存できます。用途に応じて選んでください。
    Per-phone save buttons:
    • 白背景 … 背景が白1色・影なしの PNG。背景削除ツール用。
      White: pure white background, no shadows. For use with a background remover.
    • 透過 … 四隅が 最初から透明 の PNG。
      Transparent: corners already transparent — paste directly into slides / LP.
  3. 上部の 「一括保存 / Bulk Save」 バーから、まとめて1つのZIPでダウンロード できます。
    Use the "Bulk Save" bar above to export everything as a single ZIP file.
    ※ 画像が読み込まれているスマホだけ が対象になります。空枠は自動でスキップ されるので、20台のうち5台にだけ画像を入れた場合は、その5台分だけがZIPに入ります。
    Only phones with a loaded image are included. Empty frames are automatically skipped — load images into just the slots you need.
    ※ スマホでの保存:個別保存・ZIP保存ともに 共有シート が開き、「ファイルに保存」「写真に保存」「他のアプリに送る」 など保存先を選択 できます。
    On mobile: both single and ZIP saves open the system Share Sheet, letting you pick where to save (Files / Photos / send to another app).
※ どうしても保存ボタンが効かない場合は、F12 → 矢印アイコン → スマホ枠を選択 → 右クリック → 「ノードのスクリーンショットをキャプチャ / Capture node screenshot」 でも同じ結果が得られます(この方法だと白背景になります)。
一括保存 / Bulk Save
上下の表示 / Status bar & Home bar
スクショそのまま:枠側の時刻バー・ホームバーを消し、実機スクショに写っている上下をそのまま表示します。トリミング不要で読み込めます。
枠側で描く:上下を切り落としたスクショ用。枠側が 9:41 のステータスバーとホームバーを描画します。
上部のカメラ / Camera cutout
iPhone:Dynamic Island(横長の角丸)。Pixel:中央のパンチホール(高さは iPhone と同じ 28px の真円)。
いずれも周りは背景なし(透過)なので、下のスクショがそのまま見えます。なしを選ぶと実機スクショに写っている上部だけになります。
書き出し形式 / Format
PNG:可逆圧縮。どこでも確実に開けます。
WebP:同じ見た目でファイルサイズが小さくなります(透過も保持)。個別保存・ZIP保存の両方に適用されます。