iPhoneやMacなどの画面に自社WEBサイト画面が表示されている「はめ込み画像」を作りたい!そう思ったことはありませんか?
Photoshopなどで頑張ってもいいですが、画面のスクリーンショット画像をアップロードするだけで、iPhoneやMacなどの「はめ込み画像(モックアップ画像)」が作れるWEBサービスをご紹介します。
はめ込み画像ってどんな画像?
文章で説明するよりも見ていただいた方が早いと思います。iPhoneやMacの画面にスクリーンショットをはめ込んだ画像とはこんな画像です。
iPhoneやMacのはめ込み画像が作れる「Placeit」
「Placeit」では、簡単にiPhoneやMac画面のはめ込み画像を作成することができます。AppleWatchやiPad、Android、その他ダブレットやモニタ画面など、全1470種類ものテンプレートが用意されています。
Fancy iPhone Mockups & App Demo Videos by Placeit
選べる画像の種類と数が充実してる
選択できるデバイスの充実具合が半端ではありません。iPhone1つとっても様々な画像が用意されています。
はめ込み画像の作り方
はめ込み画像を作るのもとても簡単です。
作りたい「はめ込み画像」を選択する
自分の好きな画像をクリックして選ぶと作成画面が表示されます。任意の画像ファイルをアップロードして使う場合は「Upload images」をクリック。任意のWEBサイトURLやWEBサイトにアップロードされている画像URLを指定してスクリーンショット使って作成する場合は「Grab Screenshot From URL」をクリックします。
画像のアップロードが済むと、画像の使用する範囲選択の画面が表示されますので、表示する範囲をしていします。(URLを指定した場合は範囲選択はありません)
範囲選択が済むと、はめ込み画像が作成されます(作成が終わるまで多少時間がかかります)。作成が終わって、はめ込み画像を確認しOKであればDownloadをしましょう。
作成した「はめ込み画像」をダウンロードする
Small(400px×300px)サイズは無料でダウンロードが可能です。それよりも大きいサイズは有料となります。
WEBサービスのiPhoneやMacでのデモンストレーション動画も作れる!
Placeitの凄いところは「はめ込み画像」だけでなく「はめ込み動画」も作成できるところです!
実際に作ってみた動画
※BGMはPlaceitを使って動画を作成&ダウンロード後にiMovieで挿入しています。また無料版でダウンロードしたので透かし文字が入っています。
iPhoneやMacの画面に任意の映像をはめ込んだ「はめ込み動画」を作る
「はめ込み動画」は「はめ込み画像」に比べて少し手間がかかります。
作成したい動画を選択する
Placeitの画面左の分類項目の「Video」を選択し、作成したい「はめ込み動画」のテンプレートを選択します。動画によっては、人の動きとiPhoneなどの画面に表示される動画の動きを合わせる必要があるので、デモを見て確認することをお勧めします。
専用アプリのインストールが必要
任意の動画を使用する場合は、動画をアップロードすることができないので、Placeitが用意している「Recordit」というアプリをインストールする必要があります。
「Recordit」を使って動画を撮影する方法は次の動画(英語)をご参照ください。解説は英語ですが、動画を見ていれば操作方法はわかると思います。
MacにiPhoneの画面を表示させる方法はかなり簡単!iPhoneの操作画面をMacで録画する方法。をご参照ください。QuickTime Playerで録画までせずにMacの画面上に表示させるだけでも十分ですし、Reflectorを使ってもいいと思います。
はめ込む動画を確認する
はめ込む動画の撮影が終わったら、動画の確認画面が表示されるので、はめ込む動画としてOKかどうかをチェックしましょう。
OKの場合は「Looks Good!」をクリックすると、はめ込み動画の作成が始まります。画像の時よりも作成に時間がかかります。
作成した動画をダウンロードする
動画が完成したらダウンロードしましょう。YouTubeと同期すればYouTubeへ直接アップロードも可能です。
はめ込み動画のダウンロードは無料版はサイズも小さく、Placeitという透かし文字が入ります。デモンストレーション動画として使用する場合には$99の有料版でダウンロードしましょう。
WEBサービスやアプリのPRに使える
WEBサービスやアプリなどのPRで「スマートフォンでの使用イメージ」や「PCでの使用イメージ」などのシチュエーションを見せたいときに役立ちそうですね。
WEBサイトの紹介する場面でも使えそうです。はめ込み動画は少し作成に手間がかかりますが、ゼロから作ろうと思ったら、もっと手間がかかるので、「Placeit」のようなサービスはありがたいですね。