アイキャッチなどに!無料で美しいはめ込み画像が作れるモックアップツールまとめ

僕は、アイキャッチなどにフリーで使える写真などを、よく使わせていただいています。

フリーの写真は、現在沢山あり、写真検索サイトなどで調べたら、大抵イメージに合ったものが見つかります。

ただ、検索するキーワードによっては、イメージと合った写真が出てこないなんて事もたまにあります。

そんな時、僕は写真同士を組み合わせて新たな写真が作れる料モックアップツールを利用すると、ある程度イメージ通りの写真がつくれたりします。。

そんな、無料モックアップツールを、これまでいろいろ紹介してきたら、結構あったのでまとめておきたいともいます。

スポンサーリンク
レクタングル(大)広告

モックアップツールとは

今回紹介するモックアップツールは、写真と写真とを組み合わせて新しい写真を作成するツールのことです。

例えば、以下の2つの画像を組み合わせて(はめ込んで)

キャンバスとなる写真寝ログ  寝ながら出来るコトや使えるモノを紹介

以下のような写真を作成するツールのことです。

smartmockups0

こんな感じで様々な端末のはめ込み画像を作成することができます。

smartmockups(スマホ)

以下では、基本無料で利用できるモックアップツールをいくつか紹介したいと思います。

MockDrop

MockDrop

MockDrop

ドラッグ&ドロップすることで、とても手軽に「手持ちの画像」と「端末画像」を組み合わせたはめ込み画像が作成できるモックアップツールです。

現在、以下のはめ込み画像を作成することができます。

  • デスクトップパソコン
  • ノートパソコン
  • スマートフォン
  • タブレット
  • 腕時計

この手のモックアップツールの中では、最も軽くて使いやすいツールです。

アイキャッチ用に良い写真が見つからないときにモックアップツールは何かと便利です。 というのも、どうしても良い写真が見つからないときは、...

Smartmockups

Smartmockups - Create product screenshots with just a few clicks, for free!

Smartmockups

とにかく雛形の種類が豊富です。現時点で150種類以上の雛形があります。

また、他のモックアップツールは、画像の大きさを枠に合わせるものが多いですが、これは枠の大きさに厳密にトリミングして嵌め込むので綺麗なモックアップ写真が作れます。

現在、以下のはめ込み画像を作成することができます。

  • デスクトップパソコン
  • ノートパソコン
  • スマートフォン
  • タブレット
  • 腕時計

フィルタリングまた、iOS、男性、女性、手が写っているなどでフィルタリングもできて探しやすいです。

Smartmockupsの

URLから、サイトのスクリーンショットを撮ってモックアップを作ることもできます。

ブログのアイキャッチは、内容のイメージを読者に伝えるのに便利です。 なので、僕も時間の許す範囲内で、なるべく本文内容に合ったアイキャッ...

Dunnnk

Dunnnk - Generate Product Mockups For Free

Dunnnk

アップル製品の雛形が多いモックアップ作成ツールです。

画像をアップロードするだけという単純作業で、いきなりはめ込み画像を作ってしまうことができます。

現在、以下のカテゴリに属するはめ込み画像を作成することができます。

  • iPhone
  • Android
  • MacBook
  • iPad
  • iMac
  • Apple Watch
先日、はめ込み画像を手軽につくれるサイトとして以下を書きました。 上記の「Awesome Product shots」は、様々な端...

Magic Mockups

Magic Mockups • Free real-life mockup generator

Magic Mockups

数はさほどを多くはないですが、こちらもCC0写真を用いてはめ込み画像が作れます。

このモックアップツールの特徴としては、以下のように、ノートパソコンとスマホといったような2種類の画像を用いたはめ込み画像を作成できる雛形もあります。

2種類の画像用いたはめ込み画像

加えて、URLからスクリーンショットを撮影して作成することも可能です。

現在、以下のようなカテゴリに属する雛型を利用することができます。

  • ノートパソコン
  • スマートフォン
  • タブレット
  • iMac
  • 額縁

額縁の雛形もあまり見かけないような気がします。

ブログなどを書いていると、アイキャッチ画像探しに頭を悩ませることがあります。 僕の場合は、手軽に使えるということで、大抵はCC0ライセンス...

Frame: Awesome Product Shots

Frame- Awesome Product Shots

Frame: Awesome Product Shots

画像をアップロードするか、URLを指定することで、モックアップを作成することができます。

画像アップロードしたら、トリミングできるので、綺麗に作成することができます。

このツールの、URL指定は、ユーザーエージェントをパソコンかモバイルで選択できるので、ブラウザの設定などでユーザーエージェントを変更して接続する必要はありません(現在スクリーンショット機能は不具合か使えてないかも)。

現在、以下のカテゴリに属する雛型が利用できます。

  • デスクトップ(アップル)
  • デスクトップ(その他)
  • モバイル(iOS)
  • モバイル(Android)
  • タブレット(iOS)
  • タブレット(Android)
  • タブレット(その他)
以前、無料ソフトを使って簡単にはめ込み画像を作成する方法を紹介しました。 ただ、パソコンやスマホ、タブレットのはめ込み画像だったら...

Placeit

Free iPhone Mockup Generator & App Demo Videos by Placeit

Placeit

2500以上の雛形からモックアップを作成できるツールです。

種類の豊富さで言えば、一番多いかもしれません。カテゴリも以下のように多岐にわたっています。

雛形の種類が豊富なPlaceit

ただ、無料で利用するには、400×300pxと小さい解像度の写真しか利用できません。

無料で利用するには400×300の解像度の写真しか使えない

Placeitという、はめ込み画像に特化した無料で使えるツールがあったので紹介です。 以前、簡単に合成写真がつくれるWEBツールを紹介しま...

Browser Frame

Browser Frame

Browser Frame

様々なブラウザに画像はめ込んだ形のスクリーンショットを作成することができるツールです。

作成できるブラウザの種類は以下の通り。

メジャーブラウザを選択できる

  • Chrome(Mac)
  • Chrome(Windows)
  • Firefox(Mac)
  • Firefox(Windows)
  • Safari
  • IE
  • Opera
  • Edge

単に、ブラウザの外枠ではめ込み画像を作成するシンプルなツールです。

いろいろな「ブラウザへ画像を埋め込んだ形のスクリーンショット」を作ることができる「Browser Frame」というサービスがあったので紹...

PhotoFunia

All effects - PhotoFunia- Free pic editor online with library of picture effects & photo filters

PhotoFunia

こちらは、はめ込み画像を作成するツールというよりも、様々な合成写真を作成できるツールです。

画像に様々なエフェクトをかけて、遊ぶ感じに利用できる楽しいツールになっています。

こんな感じのはめ込みツールもあれば、

スタジアム

手書き風に仕上げられるものなど、500種類以上のエフェクトがあります。

手書き風

手軽に上にあるような合成写真を作れるPhotoFuniaというWEBサービスを見つけました。 これを使うことで、今まで画像編集ソフトが...

自分ではめ込み画像を作るには

はめ込み画像

どうしても、好みの雛形などが見つからない場合は、以下のような無料ツールを使った方法で、自分で作成することもできます。

今回は上の写真のようなはめ込み画像の簡単な作り方です。 上記のような画像はPhotoshopのような有料の画像編集ソフトを使え...

まとめ

こんな感じで、モックアップツール等を利用することで、フリーで利用できる写真の幅がさらに広がります。

ただ、いくらCC0写真(権利をできる限り放棄した写真)を用いた雛形を利用しても、嵌め込む写真が権利物だったり、肖像権に引っ掛かるものは利用できないので注意が必要です。あと、CC(クリエイティブ・コモンズ)の場合は、著作権表示義務があったり、改変禁止の場合は、利用しないように注意しないといけません。

というわけで、「書いた記事に合ったフリー画像が見つからない」とか「以前使ったアイキャッチと同じ写真は避けたい」といった場合は、今回紹介したツールを使えば、フリーで利用できる写真の幅が広がるかもしれません。