WEBマスターの手帳 > WEB担当者 > iPhoneやMacの「はめ込み画像&動画」が簡単に作れる「Placeit」が楽しい!

WEB担当者

2015年8月10日

iPhoneやMacの「はめ込み画像&動画」が簡単に作れる「Placeit」が楽しい!

Twitter 2 Facebook 1 Google+ はてブ 1 Pocket 4 チャットワーク Eight Feedly

iPhoneやMacなどの画面に自社WEBサイト画面が表示されている「はめ込み画像」を作りたい!そう思ったことはありませんか?

Photoshopなどで頑張ってもいいですが、画面のスクリーンショット画像をアップロードするだけで、iPhoneやMacなどの「はめ込み画像(モックアップ画像)」が作れるWEBサービスをご紹介します。

スポンサード

侍エンジニア塾無料体験レッスン獲得プログラム

はめ込み画像ってどんな画像?

文章で説明するよりも見ていただいた方が早いと思います。iPhoneやMacの画面にスクリーンショットをはめ込んだ画像とはこんな画像です。

iPhoneやMacの画面にスクリーンショットをはめ込んだ画像

iPhoneやMacのはめ込み画像が作れる「Placeit」

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」をクリックします。
Placeitではめ込み画像を作る

画像のアップロードが済むと、画像の使用する範囲選択の画面が表示されますので、表示する範囲をしていします。(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」のようなサービスはありがたいですね。

関連キーワード:

この記事をシェアして頂けると嬉しいです

LINEで送る
Pocket

この記事に対するあなたの評価をお教え下さい

星印をクリックして5段階評価で、この記事に対する、あなたの評価をお教え下さい。

ヒドイイマイチ普通良い凄く良い
Loading...

Webサイトのターゲット像を明確にする【ペルソナ作成シート】

ペルソナ作成シート

あなたのWebマーケティングをよりレベルアップさせよう!

Webサイトや企業ブログ、SNSであなたが相手にするのはどんな人か?それを明確にするための「ペルソナ作成シート」を無料でプレゼントいたします。

WEBマスターの手帳をフォローして最新情報をゲットしよう!

友だち追加

あなたにオススメする記事

この記事と同じカテゴリーの記事

この記事を書いた人

遠藤 聡
中小企業のWEB担当者&ソーシャルメディア担当者としてWEBサイトの管理運用から企業ブログ、Facebookページ、Twitter、YouTubeチャンネルの管理運用(企画&実施)を行なっております。 具体的なサービス内容はサービス詳細ページをご覧ください。

コメント

  •  Web担当者の勉強会
  • ソーシャルメディア活用チェックシートのダウンロード
  • ペルソナ作成シートのダウンロード
  • @webmaster_note
  • Instagram

最新記事一覧

カテゴリー

ピックアップ記事一覧

人気記事ランキング

  • 本日
  • 週間
  • 月間
  • 殿堂

本日の人気記事

週間の人気記事

月間の人気記事

殿堂の人気記事