ブログのアイキャッチは、内容のイメージを読者に伝えるのに便利です。
なので、僕も時間の許す範囲内で、なるべく本文内容に合ったアイキャッチを探すようにしています。
ただ、「いくら探してもイメージに合った画像がない」なんてこともしばしばをあります。そういった時は、フリーで使えるはめ込み画像（モックアップ）サイトが便利だったりします。
というわけで今回は、フリーで使える嵌め込み画像サイト「Smartmockups」を知ったので紹介です。
Smartmockupsとは
Smartmockupsは、好きな画像をアップロードするだけで、デスクトップ、ノートパソコン、タブレット、スマホ、スマートウォッチの嵌め込み写真を手軽に作ることができるモックアップ作成サイトです。
ちょっと数えてみたところ、現時点で64種類のモックアップを作成できる雛型が揃っています。
雛形はそれぞれ以下のようなものがあります。
デスクトップ
ノートパソコン
タブレット
スマートフォン
スマートウォッチ
Smartmockupsの使い方
Smartmockupsの使い方は簡単で、以下の手順で嵌め込み画像を作ることができます。
- 嵌め込み用の画像を用意する
- 画像を嵌め込む雛形を選ぶ
- 嵌め込み用画像をアップロードする
- 画面に合わせて嵌め込み用画像を切り取る
- 出来上がった画像をダウンロードする
以下で簡単に、使い方を説明します。
嵌め込み用の画像を用意する
例えば、Amazon Kindleに関する記事を書いたとして、Amazon Media Room: Images – Logosから以下のロゴを用意したとします。
これを別にそのままアイキャッチに使っても良いのですが、「前にも似たようなのを使ったなぁ」なんて時は、モックアップツールの出番です。
画像を嵌め込む雛形を選ぶ
次に、Smartmockupsからから雛型を選択します。
画面上部に、メニューがあるので、そこから目的にあった雛型を選択します。
雛形は、以下の中から選択します。
- 全て表示
- デスクトップ
- ノートパソコン
- タブレット
- スマホ
- スマートウォッチ
今回は、ノートパソコンに一覧の
以下の雛形を選択しました。
嵌め込み用画像をアップロードする
ツリーは画像のアップロードです。
選択した雛形の右側にある「Upload your image（イメージのアップロード）」ボタンをクリックして先程用意した「嵌め込み用画像」を選択してください。
画面に合わせて嵌め込み用画像を切り取る
すると、以下のような「画像内の画面幅に合わせた画像切り取り用のダイアログ」が表示されるので、大きさを調節して「Crop and Continue（切り取って続ける）」ボタンをクリックします。
すると、こんな感じで嵌め込み画像が作成されます。
出来上がった画像をダウンロードする
あとは、画像の右側にある「Choose image size（イメージサイズの選択）」ボタンをクリックします。
すると、以下の4種類の中からダウンロードサイズを選んでダウンロードすることができます。
- Original（印刷向けのオリジナルサイズ）
- Large（WEB用の大きなサイズ）
- Medium（ブログ向けの中間サイズ）
- Small（小さなサイズ）
オリジナルサイズをダウンロードして、以下のような画像が作成できました。
その他にも、雛形次第でいろいろなモックアップを作成できるかと思います。
ライセンス
Smartmockupsのライセンスは、以下のようになっています。
全てのイメージは、個人・商用利用ともロイヤリティーフリーです。また修正も自由です。
- 個人利用
- 商用利用
- テンプレート
- 出版物
いたずらや、不正使用とかでなければ、自由に使って良いようです。
まとめ
Smartmockupsは、それなりに種類もあって使い勝手も良いので、何かと便利に使えそうです。
僕の場合は、アイキャッチ画像に困ったらモックアップサイトを利用しているので、こういった使いやすいツールの選択肢がいろいろあるのは嬉しいです。
というわけで、「アイキャッチで良い画像が見つからない」とか「出版物などに使えるモックアップ画像ツールはないか」なんて場合には、重宝するかと思います。
サイト Smartmockups
その他にも、以下のようなツールもあるので、ブックマークにまとめておくとバリエーションが豊富な画像を作成できるかと思います。
