【PostSpark】スクショを綺麗にデバイスや枠に合成できるモックアップサービス
この記事では、スクリーンショットを綺麗な背景の枠に埋め込んだり、AndroidやiPhone、PCなどのモックアップ画像を作成できるウェブサービス「PostSpark」について書きます。
以下のようなことができます。
- Galaxy、Pixel、Nothing PhoneなどのAndroidデバイスのモックアップ画像を作成
- iPhone、iPad、MacBookなどのiOSデバイスのモックアップ画像を作成
- モックアップの拡大・位置調整
- 背景色を単色、グラデーション、任意の画像に切り替え
- レイアウトの変更（1列、2列など）
- ペンモードで好きな文字入力
- 比率（アスペクト比）の変更
- 回転
- コードモックアップ（CSSやHTMLコードを綺麗に表示）
- スクリーンショットモックアップ
- X（旧Twitter）モックアップ
- 影、透明度、ぼかし具合などのフィルター調整
- PNG、JPEG、WebPでの保存
- 6000×6000などの高解像度で保存
- ソフトのインストール、アカウント作成など不要。ウェブ上で完結
スマホやPCで撮影したスクリーンショットを綺麗にしてくれるサービスです。
2024年11月25日にリリースされて、僕は2024年12月くらいから使っています。リリース当初は無料プランでほとんど制限なく使えていましたが、2025年5月くらいから無料プランのデバイスモックアップだと画像下部に透かしが入るようになりました。
とはいえ、無料プランでも高解像度で保存できるし、自由にカスタマイズできるし、使い物にならないレベルではないです。
AndroidやiOSのデバイスモックアップって種類が限られていたり、あくまで枠画像だけの提供で埋め込むには自分で編集しないといけなかったり、無料プランだと大きな透かしや解像度制限があったりする中、本サービスは無料プランでも自由な印象です。
リリース元：world1dan（サイトのX、作者のX、Bluesky、ロードマップ）
リリース開始日：2024年11月25日（リリース履歴）
アクセス方法
以下リンクから開けます。
https://postspark.app/home本サービスはChrome拡張機能版もあるようです。僕は使っていないので分かりません。
使い方
テンプレートの選択
公式サイトにアクセスして、上部の「Templates」をクリックします。スクリーンショットやデバイスモックアップなど利用できる種類が表示されるのでクリックします。
試しに「Device Mockup」を選択します。
デバイスモックアップ
編集画面が開かれます。
埋め込みたいスクリーンショットを用意して、デバイスモックアップ内にドラッグ&ドロップします。
試しにAndroidスマホ（Xiaomi 15 Ultra）でスクリーンショットした画像を使ってみます。
ドラッグ&ドロップすると画像が追加されます。プレビューが表示されるので見やすいです。
レイアウトの選択
左側サイドバーでレイアウトを変更できます。デフォルトでは中央に一台分表示されています。斜めにしたり、二台並べたりできます。
星マークがついているのは有料プラン限定です。
二台にした場合は、もう一枚画像を追加できます。
デバイスの選択
中央下部の「Device」から機種を変更できます。
2025年6月6日時点では以下のデバイスが用意されていました。
- iPhone 16 Pro Max
- iPhone 16 Pro
- iPhone 16 Plus
- iPhone 16
- iPhone 15 Pro Max
- iPhone 15 Pro
- iPhone 15 Plus
- iPhone 15
- iPhone 13 Pro
- iPhone 13
- iPhone 13 Mini
- iPhone SE
- iPad Pro 12.9
- iPad 9
- iPad Air
- iPad Mini
- MacBook Air 13 Gen 4
- MacBook Pro 16 Gen 5
- MacBook Pro 14 Gen 5
- iMac 24
- Pro Display XDR
- Studio Display
- Pixel 7
- Galaxy S24 Ultra
- Nothing Phone
- Apple Watch S10
- Apple Watch Ultra 2
やっぱりiPhone（iOS）が主流なのか多かったです。
それぞれのデバイスは横向きにもできます。色も何種類か用意されています。
ペンモード（落書き）
中央下部のペンアイコン（
）をクリックします。
好きなサイズ、色で落書きできます。
位置・大きさ調整
中央下部の「
」ボタンをクリックします。
配置したい場所をクリックすると移動します。下部のスライダーで拡大縮小できます。
GIF画像を貼っておきます。
デバイスの上だけ拡大して注目させたい…みたいな時に役立ちます。
回転
中央下部の「
」アイコンをクリックします。XYZで調整できます。
斜めにした画像を貼っておきます。
僕はデフォルトのままをよく使っています。
比率の変更
中央下部のアスペクト比アイコン（
）をクリックします。好きな比率を選択します。
僕はデバイスモックアップの場合4:3を使っています。PCのスクリーンショットだと16:9です。
背景色の変更
下部のパレットアイコンでテーマを変更できます。
右側サイドバーのBackdrop内から背景色を変更できます。
| None | 背景なし（透過） |
| Solid | 単色 |
| Gradient | グラデーション |
| Image | 任意の画像 |
「Solid」にするとカラーパレットが表示されるので好きな色を指定します。
僕はよく透明の「None」、あるいは「Solid」の白を使っています。
僕はデザインセンスが本当に皆無で、以前デザインつよつよさんから「センスない場合はとにかくシンプルが一番いい」って教えられたので余計な装飾はしないようにしています(笑)
https://www.naporitansushi.com/chatting-changed-font/保存
右上の「Export」をクリックすると保存できます。
「
」アイコンで保存設定を開きます。サイズや拡張子を変更できます。
一度調整したら次回以降はその保存設定を維持してくれます。またいつでも変更可能です。
こういうウェブ上で動作する無料版のサービスだと、「解像度は720まで！高解像度は有料プランにしてね」みたいなケチなパターンが少なからずありますが、本サービスは6000×6000といった感じでかなり高解像度まで無料で出力できます。
「Quality」のスライダーを動かすだけです。
ただし、高解像度はその分出力に時間がかかり、容量（サイズ）も大きいです。試しにPNGで6750×5060にしたら容量が8.6MBでした。
僕はブログに貼り付ける場合、1000px以上あれば十分なので基本はそのまま（1×）にしています。
「Export」で保存されます。
実際に保存したデバイスモックアップ画像を貼っておきます。
無料版だと下部に「designed in PostSpark.app」と透かし（ウォーターマーク）が入ります。
スクリーンショットモックアップ
上部の「Templates」から「Screenshot」を選択します。
画像をドラッグ&ドロップしてレイアウトや背景色を調整します。綺麗なスクリーンショットができます。
コードモックアップ
「Templates」→「Code」を選択します。
コード画面が表示されるのでコードを書き込みます。試しに「Visual Studio Code」上で書いていた当サイトのカスタマイズ用CSSをコピペしてみました。
初期では「TypeScript」になっていました。クリックでドロップダウンリストが表示されるので好きな言語に切り替えられます。言語に応じたハイライト（装飾）になります。
上部のタイトルはマウスで選択して好きな文字に変えられます。
ダーク系統が好きな場合はテーマを変更するといいかもです。
CSSにしたコードスクリーンショットを貼っておきます。
X（旧Twitter）モックアップ
「Templates」→「X Post」を選択します。
下部にURLを入力する欄があるのでXのポストURLを貼り付けます。右にある更新ボタンを押すとプレビューに反映されます。
ポストが埋め込まれます。
他のモックアップ同様、背景色や余白具合、位置など調整できます。
実際にカスタマイズして保存した画像を貼っておきます。若干僕の名前が崩れていましたが、まぁ綺麗かなと思います。
有料プランへのアップグレード
右上の「Upgrade」ボタンをクリックします。
あるいは有料プラン限定機能をあえてクリックしてもOKです。左側サイドバーのレイアウト内にある星マークがついたやつとかです。
有料プランの価格、どんな機能が使えるようになるかのポップアップが表示されます。ここから支払いページに飛べます。
個人的には透かしなしと一括編集機能に魅力を感じていますが、有料プランにはしていません。
よくある質問
無料で利用できるのか？
リリース当初は確か無料プランのみでしたが、いつからか有料プランもできました。
Is PostSpark free to use?
We offer both free and paid options. A Pro subscription provides access to advanced features like shareable links, an image library, batch editing, and more.PostSparkは無料で使えるの？
PostSpark – Create screenshots and mockups
うん、無料プランもあるよ！でも、もっと便利な機能（シェア用リンクとか画像ライブラリ、まとめて編集できる機能とか）を使いたい場合は、有料のProプランがあるよ〜。
僕が使っていて感じる無料プランの唯一のデメリットは、デバイスモックアップとスクリーンショットで生成した画像下部に透かしが入ることです。
リリース当初は無料プランでも透かしは一切なかったんですが、有料プランが登場してから差別化させるためなのか無料プランに透かしが入るようになりました。
実際以下のような当サイトの過去記事で使われているモックアップ画像を見たら分かる通り、透かしが入っていません。僕が無理やり消したわけではなく、元々入っていなかったです。
とはいえ、悪意ある透かしではなく小さめなので我慢できる程度です。
逆に言えば、この透かしさえ我慢すれば、無料プランでも制限一切なしで使えるので良心的かもです。
リリース当初の透かしなし状態が凄すぎただけです。サービスによってはもっとがっつり透かしが入る場合もあるのでね。
僕が試した感じ、コードやX（旧Twitter）のモックアップには無料プランでも透かしが表示されませんでした。この2つは透かしなしで無料利用できるものも結構あるので、それに対抗する目的があるのかもですね。
「Ray.so」、「Screely」、「Pika」などです。
商用利用について
利用可能です。もちろん今後どうなるか分からないので、本記事で終わらずに実際公式サイトをよくチェックです。
Can I use PostSpark for commercial projects?
PostSpark – Create screenshots and mockups
Yes, you can use PostSpark for any purpose, including commercial use. There are no usage restrictions on the content you create, even if you are on the free plan.
PostSparkは商用プロジェクトに使ってもいいの？
うん、OKだよ！商用利用も含めて、どんな目的でも使えるよ。無料プランでも、作ったコンテンツに制限はないから安心してね〜。
感想
以上、スクリーンショットを綺麗な背景の枠に埋め込んだり、AndroidやiPhone、PCなどのモックアップ画像を作成できるウェブサービス「PostSpark」についてでした。