デスクトップ、ノート、タブレット、スマホの嵌め込み画像が手軽に作れる「Smartmockups」

smartmockupsアイキャッチ

ブログのアイキャッチは、内容のイメージを読者に伝えるのに便利です。

なので、僕も時間の許す範囲内で、なるべく本文内容に合ったアイキャッチを探すようにしています。

ただ、「いくら探してもイメージに合った画像がない」なんてことも、しばしばあります。そういった時は、フリーで使えるはめ込み画像(モックアップ)サイトが便利だったりします。

というわけで今回は、フリーで使える嵌め込み画像サイト「Smartmockups」を知ったので紹介です。

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

Smartmockupsとは

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

Smartmockupsは、好きな画像をアップロードするだけで、デスクトップ、ノートパソコン、タブレット、スマホ、スマートウォッチの嵌め込み写真を手軽に作ることができるモックアップ作成サイトです。

ちょっと数えてみたところ、現時点で64種類のモックアップを作成できる雛型が揃っています。

雛形はそれぞれ以下のようなものがあります。

デスクトップ

Smartmockupsのデスクトップの雛形

ノートパソコン

Smartmockupsのラップトップの雛形

タブレット

Smartmockupsのタブレットの雛形

スマートフォン

Smartmockupsのスマホの雛形

スマートウォッチ

SmartmockupsのSmartWatchの雛形

Smartmockupsの使い方

Smartmockupsの使い方は簡単で、以下の手順で嵌め込み画像を作ることができます。

  1. 嵌め込み用の画像を用意する
  2. 画像を嵌め込む雛形を選ぶ
  3. 嵌め込み用画像をアップロードする
  4. 画面に合わせて嵌め込み用画像を切り取る
  5. 出来上がった画像をダウンロードする

以下で簡単に、使い方を説明します。

嵌め込み用の画像を用意する

例えば、Amazon Kindleに関する記事を書いたとして、Amazon Media Room: Images – Logosから以下のロゴを用意したとします。

Amazon Kindleのロゴ

これを別にそのままアイキャッチに使っても良いのですが、「前にも似たようなのを使ったなぁ」なんて時は、モックアップツールの出番です。

画像を嵌め込む雛形を選ぶ

次に、Smartmockupsから雛型を選択します。

画面上部に、メニューがあるので、そこから目的にあった雛型を選択します。

メニューから雛型を選択

雛形は、以下の中から選択します。

  • 全て表示
  • デスクトップ
  • ノートパソコン
  • タブレット
  • スマホ
  • スマートウォッチ

今回は、ノートパソコンに一覧の

Smartmockupsのスマホ雛形一覧

以下の雛形を選択しました。

選択したスマホ雛形一覧

嵌め込み用画像をアップロードする

次は画像のアップロードです。

選択した雛形の右側にある「Upload your image(イメージのアップロード)」ボタンをクリックして先程用意した「嵌め込み用画像」を選択してください。

選択したスマホ雛形一覧

画面に合わせて嵌め込み用画像を切り取る

すると、以下のような「画像内の画面幅に合わせた画像切り取り用のダイアログ」が表示されるので、大きさを調節して「Crop and Continue(切り取って続ける)」ボタンをクリックします。

嵌め込み用画像の切り取り

すると、こんな感じで嵌め込み画像が作成されます。

はめ込み画像が作成された

出来上がった画像をダウンロードする

あとは、画像の右側にある「Choose image size(イメージサイズの選択)」ボタンをクリックします。

はめ込み画像が作成された

すると、以下の4種類の中からダウンロードサイズを選んでダウンロードすることができます。

ダウンロードサイズを選べる

  • Original(印刷向けのオリジナルサイズ)
  • Large(WEB用の大きなサイズ)
  • Medium(ブログ向けの中間サイズ)
  • Small(小さなサイズ)
オリジナルサイズがラージサイズより小さい場合は、3種類までしか表示されない場合もあります。

オリジナルサイズをダウンロードして、以下のような画像が作成できました。

smartmockups

その他にも、雛形次第でいろいろなモックアップを作成できるかと思います。

smartmockups2

smartmockups3

ライセンス

Smartmockupsのライセンスは、以下のようになっています。

Smartmockupsのライセンス

全てのイメージは、個人・商用利用ともロイヤリティーフリーです。また修正も自由です。

  • 個人利用
  • 商用利用
  • テンプレート
  • 出版物

いたずらや、不正使用とかでなければ、自由に使って良いようです。

まとめ

Smartmockupsは、それなりに種類もあって使い勝手も良いので、何かと便利に使えそうです。

僕の場合は、アイキャッチ画像に困ったらモックアップサイトを利用しているので、こういった使いやすいツールの選択肢がいろいろあるのは嬉しいです。

というわけで、「アイキャッチで良い画像が見つからない」とか「出版物などに使えるモックアップ画像ツールはないか」なんて場合には、重宝するかと思います。

サイト Smartmockups

その他にも、以下のようなツールもあるので、ブックマークにまとめておくとバリエーションが豊富な画像を作成できるかと思います。

Awesome Product shotsは現在、サービスが停止したようです。 以前、無料ソフトを使って簡単にはめ込み画像を作成する方...
アイキャッチ用に良い写真が見つからないときにモックアップツールは何かと便利です。 というのも、どうしても良い写真が見つからないときは、...
先日、はめ込み画像を手軽につくれるサイトとして以下を書きました。 上記の「Awesome Product shots」は、様々な端...
Placeitという、はめ込み画像に特化した無料で使えるツールがあったので紹介です。以前、簡単に合成写真がつくれるWEBツー...
手軽に上にあるような合成写真を作れるPhotoFuniaというWEBサービスを見つけました。 これを使うことで、今まで画像編集ソフトが...

『デスクトップ、ノート、タブレット、スマホの嵌め込み画像が手軽に作れる「Smartmockups」』へのコメント

  1. 名前:リコプテラ 投稿日:2016/02/29(月) 17:33:41 ID:4e29c960f

    はじめまして。
    プロフィール拝見しました。パワフルにご活躍されているようで、私も力をいただきました。ありがとうございます!

    つい先日からSimplicity2を使わせていただいてます。
    Wordpress自体初心者なのですが、設定など簡単でとても使いやすいです。そして何より、ブログが読みやすいデザインなので、とても気に入っています。
    昨晩いろいろ徹夜でいじってたのですが(笑)、広告関連でちょっと不都合発生。その件はフォーラムに書きましたのでそちらでよろしくお願いします。

    ところで、このSmartmockupsは良いですね!
    なぜか登場製品がすべてAppleだけど。でも、私はMacとiPhone使ってるので、さらに丁度良いのです(^_^)
    早速使ってみました。

    画像アップの時にトリミングできるのもいいですね。そしてはめ込み仕上がりも抜群!
    ところが、ダウンロードした画像をPhotoshopで開こうとしたら「不明または無効なJPEGマーカー云々・・・」というメッセージが出て開けません。
    ブラウザをSafariに変えてもう一度やってみると、先ほどは画像拡張子が「.jpg」だったのが「.png」になりました。今度は無事開けました。
    どうやら、Mac+Chromeの組み合わせで使うと、ダウンロード画像自体はPNG形式なのに拡張子が「.jpg」になってしまうようです。先ほどの画像も拡張子を変更したら開けました。
    ともかく、これはいろいろ使えそうです。良い物を紹介していただきました。ありがとうございます。

    長文失礼しました。今後ともよろしくお願いいたします。

  2. アバター画像 名前:わいひら 投稿日:2016/03/01(火) 14:44:18 ID:4da0d4dca

    はじめまして。

    こちらの方にお返事が遅れて申しわけありません。
    もう、フォーラムの方で見られたのは確認したのですが、一応ここにもトピックのリンクを貼っておきます。
    広告をサイドバートップに表示すると広告ラベルが消える。

    Smartmockupsにそんな不具合があったんですね。
    でも、このツール使いやすいですよね。これまで使ってきた同様のツールでトリミングできるものであれば、これが一番使いやすいような気がします。