アイキャッチ用に良い写真が見つからないときにモックアップツールは何かと便利です。
というのも、どうしても良い写真が見つからないときは、「テーマに合わせた画像」と「端末の画像」を組み合わせれば、何となくそれっぽいアイキャッチ画像になるからです。
例えば、Wordpressに関する記事を書いた場合は、WordPressロゴと組み合わせて以下のようにします。
すると、訪問者が記事を開いたときに「Wordpressに関する記事だな」ということをイメージでとらえることができます。
当サイトではこれまで、いくつかはめ込み画像作成ツールを紹介してきました。
ただ、最近知ったMockDropは、画像をドラッグ＆ドロップするだけで、とても簡単に綺麗なはめ込み画像が作れて、便利だったので紹介です。
目次
MockDropとは
MockDropは、とても手軽に「手持ちの画像」と「端末画像」を組み合わせたはめ込み画像が作成できるモックアップツールです。
現在、スマートフォン、ノートパソコン、デスクトップパソコン、タブレット、腕時計のはめ込み画像を作成することができます。
スマートフォン
ノートパソコン
デスクトップ
タブレット
腕時計
こんな感じで、はめ込み画像の土台となる美しい写真がそろっています。
これらの画像の利用は、再販売をしない限り自由だそうです。
The images are free to use, just don’t resell them :)
MockDropの使い方
MockDropの大きな特徴として、使い方の簡単さがあると思います。
とりあえず、はめ込み用の画像を用意して、その画像をドラッグ＆ドロップするだけで、綺麗な合成写真を作成することができます。
主な手順
主な手順としては以下のようになります。
- はめ込み用の画像を用意する
- MockDropの中から利用したい画像を選択する
- 用意したはめ込み用の画像をD&Dする
- 作成されたはめ込み画像をダウンロードして使用する
作成は、JavaScriptなどを利用して一瞬で終わるので、いろいろなパターンを手軽に試せます。
以下では、簡単なんで説明する必要もないかもしれませんが、それぞれの手順について説明します。
はめ込み用の画像を用意
例えば、「Googleに関する記事」を書いた場合は、以下のようなGoogleのロゴキャプチャして用意したとします。
MockDropの中から利用したい画像を選択
MockDropを開いて、利用したい写真があったら、それをクリックします。
すると以下のように画像が強調表示されます。
用意したはめ込み用の画像をD&D
選択した画像に用意した画像をドラッグ＆ドロップします。
すると、JavaScriptにより一瞬で、はめ込み処理が行われます。
処理が早いので、いろいろな写真に対して、とりあえずはめ込んでみて良いものを選ぶなんてこともできます。
作成されたはめ込み画像をダウンロードして使用
最後に気に入った写真を「Download」ボタンからダウンロードすればOKです。
作成した画像は、以下のような感じになりました。
まとめ
とりあえず、アイキャッチとかで困ったらこういったフリーで使えるモックアップツールを利用すると、「何となくそれっぽい画像」が作れると思います。
「アイキャッチをフリー写真の中から探したんだけど以前使ったものしかなかった」なんて場合は、MockDrop等のツールを使う手もありかもしれません。
