D&Dするだけで様々な端末の美しいはめ込み画像が作れるモックアップツール「mockDrop」

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

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

というのも、どうしても良い写真が見つからないときは、「テーマに合わせた画像」と「端末の画像」を組み合わせれば、何となくそれっぽいアイキャッチ画像になるからです。

例えば、Wordpressに関する記事を書いた場合は、WordPressロゴと組み合わせて以下のようにします。

MockDropでWordpress関連記事向けのアイキャッチを作成する

すると、訪問者が記事を開いたときに「Wordpressに関する記事だな」ということをイメージでとらえることができます。

当サイトではこれまで、いくつかはめ込み画像作成ツールを紹介してきました。

パソコン、スマホ、タブレットのはめ込み画像が手軽につくれる「Awesome Product shots」
以前、無料ソフトを使って簡単にはめ込み画像を作成する方法を紹介しました。 ただ、パソコンやスマホ、タブレットのはめ込み画像だったら...
アップル製品で綺麗なはめ込み写真を作ることができるモックアップツール「Dunnnk」
先日、はめ込み画像を手軽につくれるサイトとして以下を書きました。 上記の「Awesome Product shots」は、様々な端...
660種類もの素材から嵌め込み画像を手軽に合成できるサイト「Plcceit」
Placeitという、はめ込み画像に特化した無料で使えるツールがあったので紹介です。 以前、簡単に合成写真がつくれるWEBツールを紹介...

ただ、最近知ったMockDropは、画像をドラッグ&ドロップするだけで、とても簡単に綺麗なはめ込み画像が作れて、便利だったので紹介です。

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

MockDropとは

MockDrop

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

現在、スマートフォン、ノートパソコン、デスクトップパソコン、タブレット、腕時計のはめ込み画像を作成することができます。

スマートフォン

MockDropでスマートフォンを表示

ノートパソコン

MockDropでノートパソコンを表示

デスクトップ

MockDropでデスクトップパソコンを表示

タブレット

MockDropでタブレットを表示

腕時計

MockDropで腕時計を表示

こんな感じで、はめ込み画像の土台となる美しい写真がそろっています。

これらの画像の利用は、再販売をしない限り自由だそうです。

The images are free to use, just don’t resell them :)

MockDropの使い方

MockDropの大きな特徴として、使い方の簡単さがあると思います。

とりあえず、はめ込み用の画像を用意して、その画像をドラッグ&ドロップするだけで、綺麗な合成写真を作成することができます。

主な手順

主な手順としては以下のようになります。

  1. はめ込み用の画像を用意する
  2. MockDropの中から利用したい画像を選択する
  3. 用意したはめ込み用の画像をD&Dする
  4. 作成されたはめ込み画像をダウンロードして使用する

作成は、JavaScriptなどを利用して一瞬で終わるので、いろいろなパターンを手軽に試せます。

以下では、簡単なんで説明する必要もないかもしれませんが、それぞれの手順について説明します。

はめ込み用の画像を用意

例えば、「Googleに関する記事」を書いた場合は、以下のようなGoogleのロゴキャプチャして用意したとします。

Googleのロゴ

MockDropの中から利用したい画像を選択

MockDropを開いて、利用したい写真があったら、それをクリックします。

利用したい画像をクリックする

すると以下のように画像が強調表示されます。

選択した画像が強調表示される

用意したはめ込み用の画像をD&D

選択した画像に用意した画像をドラッグ&ドロップします。

用意した画像をD&Dする

すると、JavaScriptにより一瞬で、はめ込み処理が行われます。

JavaScriptにより一瞬だはめ込み処理が終わる

処理が早いので、いろいろな写真に対して、とりあえずはめ込んでみて良いものを選ぶなんてこともできます。

いろいろな写真にはめ込んでみて見比べる

作成されたはめ込み画像をダウンロードして使用

最後に気に入った写真を「Download」ボタンからダウンロードすればOKです。

ダウンロードボタンをクリックする

作成した画像は、以下のような感じになりました。

モックアップドロップで作成したはめ込み画像

まとめ

とりあえず、アイキャッチとかで困ったらこういったフリーで使えるモックアップツールを利用すると、「何となくそれっぽい画像」が作れると思います。

「アイキャッチをフリー写真の中から探したんだけど以前使ったものしかなかった」なんて場合は、MockDrop等のツールを使う手もありかもしれません。