*

5分で完成!『placeit』でアプリ・Webサイトのプロモーション用画像をつくろう

placeit

タブレットやスマートフォンのディスプレイにアプリ・Webサイト(Webサービス)を表示したはめ込み画像を作成できるサービス『placeit』をご紹介します。

placeitとは

placeitは、スマホ・タブレットのディスプレイに好きな画像をはめ込めるWebサービスです。

  • 新規オープンするWebサイトの宣伝用画像を自分で作りたい
  • アプリやWebサイトをスマホで使っている場面をイメージさせるような画像がほしい

そんなとき単純なアプリやサイトのスクリーンショットだと、どうしてもインパクトに欠けますよね。placeitを利用して端末画像と組み合わせることで、よりユーザーの印象に残る”プロモーション向け画像”が作れます。

 

placeitの使い方

今回は弊社が運営するサイト「リサーチ・ブティック」を例に、使い方をご説明します。

まず初めに完成版の画像をお見せします。

プロモーション画像

画像が小さくて恐縮ですが、タブレットとスマホそれぞれの端末とサイトの画像が組み合わさっているのがわかるでしょうか?
※このサイトはレスポンシブデザインです。

これから以下の手順で、この組み合わせ画像を作成します。

ステップ1

左上のアイコンをクリック。

【placeitの使い方】ステップ1

ステップ2

画像をはめ込めるイメージ写真がずらっと並びます。

【placeitの使い方】ステップ2

今回は「Multi Stage」をクリックしてタブレットとスマホ、複数のデバイスが表示されるパターンの画像だけに絞り込みます。

【placeitの使い方】ステップ2-2

ステップ3

タブレットとスマホの組み合わせを選択。

【placeitの使い方】ステップ3

ステップ4

各デバイスにディスプレイにはめ込む画像の設定画面が開きました。

今回はタブレットの方には自前の画像ファイルを、スマホの方にはURL設定ではめ込み画像を設定してみます。

まずタブレットにはめ込む画像をセットしていきましょう。Aをクリックし、アップロードする画像ファイルを選択します。

【placeitの使い方】ステップ4

アップロードする画像ファイルはこちら。

リサーチ・ブティックトップページ

ステップ5

スクロールバーで画像サイズを調節して「crop」ボタンで確定します。

【placeitの使い方】ステップ5

ステップ6

次にスマホのディスプレイにはめ込む画像をセットしていきます。

まず画面上部の「Grap Screenshot From URL」をクリックして「image B」を選択。

【placeitの使い方】ステップ6

ステップ7

次に画像化してスマホのディスプレイにはめ込みたいWebサイトのURLを設定します。

今回は「http://research-boutique.com/」と入力して「Go」をクリック。

【placeitの使い方】ステップ7

ステップ8

スマホのディスプレイにリサーチ・ブティック(http://research-boutique.com/)のトップページが表示されました。

【placeitの使い方】ステップ8

ステップ9

出来上がった画像をダウンロードして確認します。ここでは「SMALL」サイズでダウンロードしてみます。

※SMALL(400×300px)サイズは無料、それより大きいサイズは有料です。

140707-0012

ステップ10

前段でダウンロードした画像ファイルを見て、意図通りのものになっているかチェック。

プロモーション画像

タブレットとスマートフォンにWebサイトを表示した画像が出来ていますね。

これで作業完了です!

 

複数枚の静止画で紙芝居動画も作れる

上で説明した静止画だけでなく、何枚かの画像を紙芝居のようにして動画を作ることもできます。こちらの機能は手順を説明するための動画を作りたいときに使えそうです。

具体的な作業の流れは以下をご覧ください。ドラッグ&ドロップで直感的に出来上がる様がよくわかります。

 

私も試しに作ってみました。

以下は「リサーチ・ブティックのトップページから見積もり依頼へ進むまでの流れ」です。

 

トップページを開く。

placeitで動画作成1

「ネットリサーチ会社へ問い合わせる」をタップ。

rsb-ipad-step2

「お申し込みの流れ」ページが表示される。

rsb-ipad-step3

内容を確認し・・・

rsb-ipad-step4

「【無料】ネットリサーチ会社へ見積もり依頼/相談」をタップして見積もり依頼ページへ進む。

rsb-ipad-step5

このような感じです。

確かにサイトの画面だけでなく端末と手が組み合わさる方が、リアルさが増して伝わりやすくなるかもしれませんね。

 

ひとこと

アプリやWebサイトのプロモーション向け画像を作るのに便利なplaceit。作った画像はランディングページの上部にバーンと表示したりするのに使えそうですね。小さめの画像なら無料で作れますので、一度試してみてはいかがでしょうか?

 

placeit

ジャンル:画像加工

概要:スマホ・タブレットのディスプレイに好きな画像をはめ込めるWebサービス。

PR

関連記事

explee

ドラッグ&ドロップで直感操作!『explee』はプロモーション用のアニメ動画を作れるWebサービス

ブラウザ上で手軽にアニメーション動画を作れるWebサービス『explee』をご紹介します。 [

記事を読む

進むべき方向を示す

「需要をつくる」発想でWebサービスを考える

Webサービスの運営にしても商売にしても、一番難しく、そして一番重要なのが「需要を掴むこと」ではない

記事を読む

ドットインストール

無料で学べる!『ドットインストール』は3分動画でマスターする初心者向けプログラミング学習サイト

今回は、便利・役立つWebサイト(Webサービス)をご紹介します。 さて、あなたはプログラミン

記事を読む

PR

コメントを残す

PR

【Git】一つ前のcommitに戻す/他のブランチのcommitを取り込む

久しぶりにRailsでプログラムを書いている関係で、これまた久しぶりに

WordPressの子テーマで画像が表示されないときはstylesheet_directoryを使っているか確認する
WordPressの子テーマで画像が表示されないときはstylesheet_directoryを使っているか確認する

先日とあるお客様のWordPressサイトで「画像が表示されない」

おすすめGoogle拡張リスト
【保存版】情報収集を快適に!Chromeに入れておきたいオススメ拡張(エクステンション)8個

私はChromeをメインブラウザとして使っていますが、その理由のひとつ

Rubyで小数点第2位以下を切り捨てる方法

Rubyには標準で便利なメソッドがたくさん用意されています。数値の取り

BootstrapでWordPressサイトをレスポンシブデザイン化
【やって覚える】BootstrapでWordPressサイトをレスポンシブデザイン化する方法

  先日Googleから「4/21以降、サイトのスマホ

→もっと見る

  • feedlyでフォロー RSS登録ボタン
  • 株式会社YUKARIでは、ホームページリニューアルをメインにWeb制作事業を行っています。既存サイトへのWordPress導入・レスポンシブデザイン化からSEO強化まで何でもご相談ください。 ホームページリニューアルをお考えの方からのお問い合わせをお待ちしております。
PAGE TOP ↑