イラストレーター不要!画像の埋め込みができるMagic Mockups

Magic Mockupsの埋め込み画像サンプル

画像を埋め込みする場合、イラストレーター(Illustrator)を使う事が多いと思います。 ですがイラストレーターを使わなくても画像の埋め込みができるwebサービスがあります。

それが「Magic Mockups」というサイト。

Magic Mockupsとは

Magic Mockups

Magic Mockupsは、予め用意されたスマホ、パソコン、タブレットなどの画像に、手持ちの画像を埋め込む事ができる無料モックアップツールです。 予め用意されている画像は上記の3パターンのみですが、どの画像もクオリティが高く綺麗で、著作権フリーのCC0となっています。

CC0 とは、科学者や教育関係者、アーティスト、その他の著作権保護コンテンツの作者・所有者が、著作権による利益を放棄し、作品を完全にパブリック・ドメインに置くことを可能にするものです。 CC0によって、他の人たちは、著作権による制限を受けないで、自由に、作品に機能を追加し、拡張し、再利用することができるようになります。

また用意されている画像はCC0のため、商用利用する事もでき、リンクなどのクレジット表記も必要ありません。

さらに埋め込み画像の作成方法も簡単で、手持ちの画像ファイルを選択するだけで、10秒で画像の埋め込みができます。 (埋め込みというより、はめ込み画像なのかもしれません)

ただし埋め込みできる画像は次の種類のみとなっているため、WEBサイトよりもブログなどのアイキャッチ画像向けなのかもしれません。

  • LAPTOP
  • スマートフォン
  • タブレット
  • IMAC
  • その他

LAPTOP

LAPTOPサンプル

LAPTOP(ノートパソコン)は全12種類の画像が用意されています。
またノートパソコンとスマホの画像もあり、その両方に手持ちの画像を埋め込む事ができます。さらに掲載したサンプル写真のようにヴィンテージスタイルの形式から、一般的なシチュエーションでのパターンも用意されています。

スマートフォン

スマートフォンサンプル

スマートフォンも全12種類の画像が用意されています。こちらもスマホ単体以外にも、タブレットやパソコンと組み合わされた画像もあります。

タブレット

タブレットサンプル

タブレットは全3種類の画像が用意されてます。こちらもデスクトップPCやスマホと組み合わされた画像があります。

IMAC

IMACサンプル

IMACは全2種類となってます。ただし他のスマホなどのカテゴリに含まれる画像も入ってます。

その他

その他サンプル

その他は2種類あり、額縁などの写真に埋め込む事ができます。とてもユニークなんですが、種類が少ないのがちょっと残念。

Magic Mockups使い方

Magic Mockupsの使い方はとても簡単です。 埋め込み画像を作るまでの手順は次のようになってます。

  1. 用意された画像を選択
  2. 埋め込む画像を選択
  3. 作成した埋め込み画像をダウンロード

埋め込み画像の作成

まずはMagic Mockupsにアクセスします。

左上に「show」という項目があるので、各カテゴリをクリックすると用意された画像がデバイスごとに表示されます。 表示された画像の中からひな形としたい写真を選んでクリックして下さい。

画像の選び方

次に選択した画像の中にあるデバイスの画面をクリックします。

デバイス画面のクリック場所

そうするとダイアログが表示され、埋め込みたい手持ちの画像ファイルを選択する事ができます。

埋め込む画像

例えば埋め込む画像に左のような写真を選択し、実際に埋め込むとMagic Mockups上には次のように表示されます。

埋め込み後の表示例

これであとは作成した画像をダウンロードすれば、使用できるようになります。 ですが埋め込む画像はURLからも選択できます。

URLから選択

例えば、埋め込む画像をサイトのスクリーンショットなどにしたい場合は、そのサイトのURLを指定します。

URL入力場所

画面上に「Capture URL」という項目があるのでクリックします。 するとURLが入力できるようになるので、そこに画像に埋め込みたいサイトのURLを記入し「GO」をクリック。

これで下記画像のように、入力したURLのサイトが画像に埋め込まれます。 ただしサイトによっては埋め込み上の表示がおかしくなってしまう事もあるようです。 下記画像はおかしくなってしまった例です。

urlでサイトを埋め込んだ場合の例

作成した埋め込み画像をダウンロード

作成した埋め込み画像をダウンロードするには、画面上部にある「Download」というボタンをクリックし、取得したいサイズを選択します。

Downloadボタンの場所

ダウンロードサイズを選びクリックし、しばらく待つと下記のように「Size(s)960ready. Click on size again to download.」という文字が表示されます。

文字が表示される場所 拡大写真

その表示された文字の選択サイズ部分(上記の場合は960)をクリックすると、画像ファイルが開きます。 そしてそこから画像上で右クリックをし、「名前付けて画像を保存」を選択する事でダウンロードできます。

まとめ

こんな感じでイラストレーターを使わなくても、種類に限りがありますが埋め込み画像を作ることができます。

ちなみにMagic Mockups上で画像を埋め込む際に「2048×1536」など指定がありますが、サイズが違う画像を埋め込んでも自動でトリミングされます。 なのでサイズが違ってても全く問題ありません。

また選択するひな形写真によっては、エフェクトなどが掛かってますが、埋め込む画像にもしっかりとエフェクトが入る(ダウンロード後)ので、色合いの違いなどもでません。

Magic Mockupsはどちらかというとブログのアイキャッチ向けな気がしますが、ひな形となる写真は綺麗な画像が多いので、是非色々な用途で使用してみて下さい!