スマホのスクショ画像をモックアップ(筐体画像)にはめ込む無料Webサービスがあるんです、簡単なんです

2018年08月30日
8
0
初級パソコン術

筆者は時々、自身のiPhoneでのスクリーンショットを記事に貼るんですが、その時にスクショ画像の周りにはiPhoneの本体(筐体)も写っている画像を載せることが多いんですが、それを「どうやって画像加工しているの?」と不思議に思う方がいらっしゃる様子です(笑)

そう、下記の右画像(スマホ閲覧の場合には下の画像)がそれですね、それぞれクリック拡大出来ます ^^

筆者はこれはパソコンソフトでの特別な画像編集加工はしてなくて、ネットの無料サービスを利用して簡単作成してるだけなんです。

以前はその種の画像編集ソフトを駆使して、パソコンでハメコミ合成なるテクニックを使って作成したものですが、最近は、ポンポンポンって感じで、ただ画面表示の順に従ってクリックして行くだけでこんな合成画像を作ってくれる無料サービスがあるものですから、もうすっかりそういうサービスをフル活用するようになりました。 何の苦労もなく綺麗なハメコミ合成画像を作成してくれるんですから(笑)

筆者がよく利用するのは【 MockUPhone 】と言う海外サイトなんですけど、下記ブログカードをクリックするとそのサイトが開きます。


MockUPhone

MockUPhone is a free tool that helps you wrap app screenshots in different mobile devices. Support iPhone mockup, iPad mockup, Android mockup and TV mockup.



MockUPhone サイトの利用の仕方

表示された MockUPhone サイト画面の、、、


iOSやAndroidやその他のアイコン類部分をクリックすると分かりますが、スマホ・タブレット等のモックアップ(筐体画像)が数多く用意されていて、それにあなたのスマホ画面のスクショをワンタッチでハメコミ合成出来て、しかも無料でダウンロード出来ちゃうとっても便利なサービスなんです。

他の同様サービスの中には、作成してダウンロードしたハメコミ画像に、そのサイトのクレジットが強制的に書き込まれてしまったり、クレジット表示を削除したいなら有料で消してあげます なんて不愉快なサイトもありますが、この MockUPhone サイトはそのようなことは全くなく、安心して無料利用出来ますから筆者は度々お世話になっているんです ^^

必ずご自身の利用しているスマートフォンと同じ機種のモックアップを選択する

ご自身のスマホ機種に合わせたモックアップ画像を選択しませんと、スクショとモックアップサイズの比率が合わず正常なハメコミ画像が得られなくなりますから気をつけて選択して、表示された破線枠内に、必要なスクショ画像を下図のようにマウスでドラッグ&ドロップします

なお、はめ込むスクショ画像は縮小したりしないで、原寸そのままのサイズでドラッグ&ドロップした方が綺麗に仕上がるようです。

具体的操作の流れは画面表示に従えば簡単に完了するんですが、筆者的に「ここはこうなる」と言う要点だけ書くことにします。

ドラッグ&ドロップしたスクショがサイトに読み込み完了したら、その下の[ Generate product mockups ]ボタンをクリックすることで、合成画像作成が始まりますが、作成完了までにはちょっと時間が掛かりますのでそのまま待ちましょう。

作成が完了しますと上図のような画面が表示されますので、下の[ Download my mockups ]ボタンをクリックします。 すると、下図のようなポップアップ画面が現れますので、、、

ハメコミ合成した画像はメールで受信する

メールアドレスを記入してから [ Download ] ボタンをクリックします。 海外サイトにメールアドレスを記入するのをセキュリティ面で不安視する人も多いと思いますが、筆者のこれまでのこのサイトでの経験では、ファイル受信時以外には宣伝メール等は1度も届いたことがありません(もしかしたら届いているのかもしれませんが、メールソフトが迷惑メールとして弾いているのかもしれません(笑))が、不安な方は利用は避けましょう。

利用しているメールソフトによってはセキュリティ警告が表示される場合がある

このメールアドレスには、作成したハメコミ合成画像の圧縮ファイル「mockup.zip」をダウンロードする為のURLが書かれたメールが届くんですが、利用しているメールソフトのセキュリティレベルが高い場合には、下図のような警告が表示される場合もあります(笑)

下図のようにそれを無視して(笑)クリックすると、やっと完成したハメコミ合成画像の圧縮ファイル「mockup.zip」がダウンロード完了します。

完成したハメコミ合成画像はとても大判画像なんです

ダウンロードした圧縮ファイルを解凍すると、何故か同じ画像が縦横2枚が同梱されておりますが、その各画像サイズは 2000px × 2000px と言う大きな画像で、スマホ画像の周り余白は透過(透明化)処理がされておりますから、ご自身のブログ記事などにそれを貼る場合には透過(透明化)処理を維持したままでトリミングしたり画像サイズ縮小を行う必要があります。

編集後記

筆者がこの【 MockUPhone 】サイトから目的の圧縮ファイルを受信して、その画像をもう何年も何度も利用して来ておりますが、ウイルスやらマルウェアをパソコンに送り込まれてしまったなどということは1回も起きておりませんし(笑)、ウイルスバスタークラウドにも1回も引っかかったりしておりませんので「安全」かと思いますが、それでも「気になる・安全性に不安」な方は利用は避けましょう ^^


あなたのブログはモバイルフレンドリーですか?
Google モバイルフレンドリーテスト

あなたのブログ内分析はGTmetrixが強力です!
GTmetrix


検索からの方はトップページへもどうぞ



関連記事
ぼっちん

Comments 8

There are no comments yet.

二階堂朱哩  

こんばんは!

前回の記事で画像を見て「いいなこれ」と思ってたんですよ(笑)
うわ。でも英語かぁ!アレルギーがっ!!!
利用頻度少ないしな……と言い訳しつつしっかりメモしておきます♪

別件ですがfavicon変えてみました。Chromeとかでは表示されるんですが、ニュースリーダーには反映されず。
調べた二種類のタグを入れてみたけどダメでした。なんでだろぉ(T-T)うぅ

2018/08/30 (Thu) 23:41
ぼっちん

ぼっちん  

To 二階堂朱哩さん

朱哩さん、おはようございます ^^
またまた食いついちゃいましたか~(笑)

うわ。でも英語かぁ!アレルギーがっ!!!
えっ? 今の時代、そんなこと言っちゃいけませんよ~(笑)
Chromeだったら、英語サイトを開いたら自動的に「このページを翻訳しますか」ってポップアップが出ますし、出なかったら画像のない部分でマウスの右クリックすると、そのコンテキストメニューに「日本語に翻訳」ってありますから、クリックすれば翻訳されて表示されるんですから、そういうツールを使ったら良いんです。
翻訳精度もけっこう高くなった時代ですからちゃんと意味は分かりますよ~ (^_^)ニコニコ

別件ですがfavicon変えてみました。Chromeとかでは表示されるんですが、ニュースリーダーには反映されず。
調べた二種類のタグを入れてみたけどダメでした。なんでだろぉ(T-T)うぅ

そのニュースリーダーってどれのことなんでしょう? 名称が同じようなアプリっていっぱいありますから、具体的にどのアプリ?のものなのか教えてくださいね。
確認してみますから ^^

ファビコンもスマホのショートカットアイコンも直ぐに完成したのは知ってますよ~ さすがです「うまい」 (≧ω≦。)プププ

2018/08/31 (Fri) 07:34

二階堂朱哩  

To ぼっちん先生

おはようございます♪
通勤電車でぼっちん先生の過去記事を読み漁っていたところです。ふふふ。
faviconはいつかもっとシンプルなロゴとかにしたいなぁと思いつつデザイン力がなかったので(^^;;
リーダーは「Inoreader」をスマホアプリで利用してます。それを見ていてこちらとよつばさんのサイトが目立ってたんです♪
あ!電車降りねば!行ってきます(^o^)/

2018/08/31 (Fri) 08:05
ぼっちん

ぼっちん  

To 二階堂朱哩さん

朱哩さん おやおや、通勤電車の中からのコメントですかぁ w(゜o゜)wワオ!!(笑)

いま「Inoreader」をiPhone Xにインストして確認してみましたら、ほんとにFC2の馬アイコンになっちゃってましたね (^_^; アハハ…
まず筆者のブログの設定は
<link rel="icon" href="https://blog-imgs-92.fc2.com/o/o/p/oops0011/favicon.ico"> ← ファビコン
<link rel="apple-touch-icon" href="https://blog-imgs-92.fc2.com/o/o/p/oops0011/apple-touch-icon.png"> ←スマホホーム画面用アイコン
このようにしてあるんです。

朱哩さんの設定ソースを覗くと
<link rel="apple-touch-icon" href="https://blog-imgs-119-origin.fc2.com/a/k/a/akareeta/20180827001443087.png"> ←スマホホーム画面用アイコン
<link rel="icon" href="https://blog-imgs-119-origin.fc2.com/a/k/a/akareeta/favicon.ico">
<link rel="shortcut icon" href="https://blog-imgs-119-origin.fc2.com/a/k/a/akareeta/favicon.ico" />
このようになっております。
1行目のスマホホーム画面用アイコンのアイコン名を「apple-touch-icon.png」と修正してみてください。
ただし、その前にファイルアップロードの方のファイル名も「20180827001443087.png」から「apple-touch-icon.png」に修正しておく必要があります。
そうすれば3行目の設定は不要になる筈です。

ただ、他の方法 ↓ もあります(笑)

リーダーに表示されるのはファビコンではなくて「アイコン」のようですから、3行目のファイル名が「favicon.ico」になってしまっている為にリーダーの方がアイコンとして検出出来ないのではないかと思います。
現在、一行目のままでもスマホホーム画面用アイコンとして登録は正常に出来ておりますから、そのファイル名は変更しなくても、3行目の「favicon.ico」となっているものを「apple-touch-icon.png」にしてもOKかと思います(笑)
こちらも当然ファイルアップロードのファイル名も変更しなくてはなりません。
とにかく3行目の設定は「.ico」と言う拡張子ではリーダーがアイコンとして検出出来なくて表示出来ないものと思われます ^^

2018/08/31 (Fri) 10:16

二階堂朱哩  

To ぼっちん先生

通勤約2時間なので座れた時はネットタイムです♪(←ほぼ座れない)

インストールまでして頂いて・・・お手を煩わせてしまってすいません(´;ω;`)
サイトをいくつか見て3行目の形だったり、それはダメで2行目と書いてあったりだったのでとりあえず2行目だけやってダメだったので3行目を追加した次第でありました。
むむむ。解説を読んでも難しい。
ひとまずファイル名を「apple-touch-icon.png」に変えて再アップロードし、1行目URLも「apple-touch-icon.png」に指定しました。
そして3行目を削除。でも見れず。
では3行目を.iconから「apple-touch-icon.png」に変更して追加してみよう。・・・見れない。
リーダーの再読み込みが必要?「削除→再登録」でもダメ。
まぁ、ブラウザで見えてるから良しとすれば良いんですが、なんか消化不良な感覚です(;´∀`)むむむ

余談ですが、最新の記事のタイトルを草稿中に「まだ」と書いておいてそのまま最初投稿してしまったのでリーダーで見ると「まだ」なのが恥ずかしい(笑)草稿中でも忘れないようにちゃんとタイトル入れておこう・・・と心に決めた瞬間でした。

2018/08/31 (Fri) 12:43
ぼっちん

ぼっちん  

To 二階堂朱哩さん

(~ヘ~;)ウーン 何故でしょうねぇ (^^ゞポリポリ
私もいろいろやってみました(笑)
弊ブログのアイコン自体を他のデザインにして入れ替えてみましたが「以前のまま」のアイコンがリーダーに表示されたまま全く変更出来ませんでした (^_^; アハハ…

「Inoreader」のキャッシュを削除しても朱哩さんの最新記事の「まだ」のまま表示されたりしてて(爆)
このあたり、アイコン変更が利かないことに関連があるのかもしれませんね。

(~ヘ~;)ウーン 結論として「私には解りません」としかお答え出来ないですよ~ (^_^; アハハ…
何やら「Inoreader」無料版のシステムそのものを疑いますが (^^ゞポリポリ

お役に立てなくてごめんなさいね~ m(_ _)m

2018/08/31 (Fri) 13:30

二階堂朱哩  

To ぼっちん先生

うぁぁ・・・検証までしていただいて本当にすいません(´;ω;`)
自分にとって使いにくいと思って消した「Feedly」を入れてみたらこちらはちゃんと見れました!
ぼっちん先生のは「W」が反映されてます。
Inoreaderがダメなのか・・・むぅ。
お騒がせしてしまい・・・しばらくおとなしくしておきます・・・
(´;ω;`)
本当にありがとうございました!!

2018/08/31 (Fri) 17:23
ぼっちん

ぼっちん  

To 二階堂朱哩さん

自分にとって使いにくいと思って消した「Feedly」を入れてみたらこちらはちゃんと見れました!
ぼっちん先生のは「W」が反映されてます。

おっ(笑) それじゃやっぱり「Inoreader」が変ってところで落ち着きましたね~(笑)
私はずっと前にパソコン版のFeedlyをちょっとの期間使ったことがあったんですけど、よく覚えてはいないんですけど「これはマズイ(^^;; アセアセ」ってことで焦って削除したことがあったんですよね (^^ゞポリポリ
何だったのか今では全く思い出せないんですけど (^_^; アハハ…

お騒がせしてしまい・・・しばらくおとなしくしておきます・・・
私としたら楽しく検証出来たんですから、何も不快感なんて感じてないですよ~ (≧ω≦。)プププ

2018/08/31 (Fri) 17:52

Leave a reply