iOSアプリやWebサイト / WebサービスのスクリーンショットをiPhoneやiPad、iMacやMacBookといったデバイスのモックアップ画面に合成してくれるサービスや、アプリ紹介用のプレスキット作成サービスなどを、種類や用途別にまとめています。
（4/1更新）
ブログ記事など、アプリ紹介用のスクショ作成ツール
- Source Dunnnk
一番おすすめのツールがこれ。
実際に使用している写真に、スクリーンショットを綺麗に合成してくれます。
iPhone / Apple Watch / iPad / MacBook / iMac / Android など多機種のデザインテンプレートに対応しているのもGood！
画像をマウスオーバーしてUpload Designをクリック、合成したいスクリーンショットをアップロードするだけで良さげな感じに仕上がります。
- Source Smartmockups
こちらも、かなりおすすめのツール。
上記のDunnnkと同じく、iPhone / Apple Watch / iPad / MacBook / iMac / Android のデザインテンプレートが用意されています。
独自機能としては、URLを指定するとそのWebサイトのスクリーンショットを撮影してモックアップに合成してくれるという、とんでもなく便利な機能もあります。
- Source MockDrop
著作権フリー素材として配布されている素材から、iPhoneやiMac、MacBookがなどの画面にスクリーンショットを合成できるサービスです。
使い方は、お目当ての写真を選んでから画面部分をクリックするとポップアップが開くので、そこから合成したスクリーンショットの画像をアップロードするだけです。
- Source MockUPhone
ちょっとデザインテンプレートの更新が止まっちゃってますが、まだまだ十分使えます。
上記の2サービスは利用者が多くてデザインが被ることもありますが、こちらはシンプルで利用者も少ないのでその心配はありません。
ビデオやインタラクティブデモにも合成できるツール
- Source Placeit
この手のサービスで最も充実しているのがこちらの「Placeit」です。
iPhoneやiPad、iMacやMacBookはもちろんのこと、AndroidやSurfaceなどのモックアップ素材も豊富に用意されている上に、画像合成のみならず、ビデオやJavascriptのインタラクティブデモなどでアプリの紹介デモがいとも簡単に作れてしまいます。
ビデオ素材もかなり豊富に用意されています。
ページに埋め込めるCSS/HTML5モックアップ
- Source Luke James Taylor
CSSでWebページに埋め込んで使えるモックアップです。
iframeやimgタグで動画や画像をピッタリはめ込むことができます。
機種は、iPad Pro / iPhone 6s / iPhone 6s Plus / iPhone 5s / iPhone 4s / iPad Air 2 / iPad mini 3 があり。カラーは、ホワイトとゴールドの2色から選択できます。
CSSファイルをヘッダーで読み込んで、HTMLタグの<div class="ios-device__screen”>ここに</div> YouTubeの貼り付けコードや画像を入力するだけです。
- Source Pixelsign
- Download GitHub
HTML5で作成されたレスポンシブモックアップ。
iPhone 6 / iPhone 6 Plus / iPad Air / iMac / MacBook Pro / Galaxy S5 などがあります。
AppStore用のプレスキット作成ツール
- Source Screenshot Builder
基本有料のサービスになりましたが、無料でも使えます。
アプリのスクリーンショットをアップロードして、キャプションや背景を設定すると、それぞれの機種別にプレスキット用の画像が合成されます。最近のアップデートでは、iOSデバイスの他にAndroidにも対応し、Google Play用のプレスキットも作成できるようになっています。
- Source Press Kit Generator
AppStoreでリリースしているアプリのプレスキットを、簡単に自動生成できるジェネレーターがこちら。
AppStoreで販売しているiOSアプリのURLを入力するだけで、自動的にプレスキットが生成され、入力したメールアドレス宛にzipフォーマットで送信されてきます。スクリーンショットの他に、アプリの価格 / デベロッパー名 / デベロッパーURL / 説明分などが記載されたpdfが入っており、手直しせずにそのままの状態でも十分プレスキットとして使えます。
