アイキャッチ画像に最適!デスクトップ・ノートパソコンやスマホ・タブレットへのはめ込み画像が簡単に作成出来るサービス一覧

【この記事を読むのに必要な時間は約 5 分です。】

ブログのアイキャッチ画像には、フリー画像のPixabayなどを利用している人も多いと思う。
今回は、いわゆるモックアップ(パソコンやスマホやタブレットの型枠)画像に自分の気に入った写真などをはめ込み、簡単にアイキャッチ画像が作成できるオンラインサービスを紹介したいと思う。

紹介するモックアップはめこみ画像作成オンラインサービス

今回紹介するオンラインサービスのモックアップはMac系のものが非常に多い。
私はWindowユーザーなので、Windows系のモックアップがあるサービスについてはそれとわかるように注記したいと思う。

また、基本的に以下の条件で選んでいる。

  • 無料で利用できる
  • 事前登録する必要がなく、すぐに利用できる
  • オンライン上で完成するもの
  • 好きな画像をアップロードできるもの

基本的な利用方法

全て英語のオンラインサービスだが、基本、利用手順は同じなので一例をあげて説明する。

サイトにたどり着いたら、表示される画像から好きな画像を選ぶ。
補足 こまかくソート出来るサイトもある。

はめ込みたい画像をアップロードする。

補足 画像のファイル形式によっては、アップロード出来ない場合があるので注意すること。

画像をはめこみ画面に合わせて調整する。

出来上がった画像を確認して、問題なければダウンロードする。

ダウンロードする画像サイズを選択する。

これで終了。細かい違いはあるが、どのオンラインサービスも概ね手順は一緒なので参考にして欲しい。
出来上がった画像は以下のとおり。

それでは、個別に紹介していく。

mockDrop

Free online device mockup images. Select your screenshot and drop it on the mockups.

Mac系のモックアップ中心。画像数は、全部で120程度でそれほど多くない。
all/Smartphone/Laptop/Desktop/Watch/Tabletに分類されていて、Mac系以外の無印系モックアップも少数ながらある。
モックアップ画面にカーソルを載せるとハイライトされるので、クリックして画像をアップロードし、完成後ダウンロードする。
こんな感じのモックアップはめこみ画像が出来上がる。

smartmockups

The best collection of free product mock-ups from the internet. Pick one, upload your design and download the final image ready for your projects.

Mac系のモックアップ中心。画像数は、全部で160程度でそれほど多くない。
Desktop/Laptop/Tablet/Smartphone/Watchに分類されていて、Mac系以外の無印系モックアップが少しだけある。
操作は直感的で画像サイズも選択でき、非常に扱いやすくオススメ。
こんな感じのモックアップはめこみ画像が出来上がる。背景はあるが、モックアップが強調されているものが多い。

Dunnnk

We generate beautiful product mockups. Upload your design and we'll give you a high resolution mockup in return.

Mac系のモックアップ。AppleWatchが多数。画像数は、全部で60程度で少なめ。
多少Android系モックアップがあるが、Windows系のモックアップはない。
画像サイズ等は選択できず、出来上がった画像をそのままダウンロードする。
こんな感じのモックアップはめこみ画像が出来上がる。

My SmartPhone

補足 そのまま画像を添付するとキャプションが表示されるが、編集、削除可能。

MAGIC MOCKUPS

Place your product screenshot in real-life environment

全てMac系のモックアップ。画像数は、全部で30程度で少ない。
なお、額縁のモックアップが2点ある。
画像選択画面は左側にあり一覧性が少し低い。
画像サイズは複数選択できる。
こんな感じのモックアップはめこみ画像が出来上がる。

Placeit

Insert your app screenshot into iPhone and iPad mockups templates for free. It's much faster than using a PSD mockup. Generate product mockups using our templat...

全てMac系のモックアップ。画像数は、全部で2,500程度以上ありとにかく多い。
モックアップには、TVとChromブラウザが別途用意されている。
また、複数のデバイスをはめ込むマルチモックアップスタイルも用意されている。
アップロードする画像のアスペクト比を気にする必要がある。
非常に残念なのが、無料で利用できる画像サイズが小さい。モックアップ画像によって横幅が600~400pxが上限になる。
こんな感じのモックアップはめこみ画像が出来上がる。

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.

モックアップは、Mac系以外も用意されている。画像数は、全部で100程度以上ある。
全て背景画像のないモックアップはめこみ画像になる。TV画面が別途いくつか用意されている。
アップロードする画像のアスペクト比を気にする必要がある。
アスペクト比が違うまま画像生成すると完成までの時間が遅く動作が非常に重い。
こんな感じのモックアップはめこみ画像が出来上がる。

補足1 画像をダウンロードしようとすると、メールアドレスの登録やSNSでのツイート等を促すボックスが表示される。
これらは無視して、右クリックから画像を保存すると良い。

補足2 画像の種類はpngファイルになる。

その他

Place.to

Place.to is a free tool to generate real world and mockup images. Generate free realistic product screenshots in seconds with drag-and-drop.

登録すれば無料で利用できる。ただし、無料で利用できる画像サイズは小さい。
基本、Mac系のモックアップ。DesktopにWindows系無印のモックアップが少しだけ。
画像数は、全部で200程度以上ある。

FRAME

Frame - AWESOME PRODUCT SHOTS

こちらも良く紹介されているオンラインサービスだが、私が確認した時点(2017年1月12日)では、ストップしている様子だった。

最後に

今回紹介したのは、モックアップはめ込み画像が簡単に作成できるオンラインサービスだ。
この他にも、自分の使いたい画像を簡単に色々な背景にはめ込み合成できるオンラインサービスもあるので、機会があれば紹介したいと思う。
以上