Apple製品だけでなく、SamsungやSurfaceも!モックアップ画像を合成できるMacアプリ「Mockups」

シェアしてもらえると励みになります!

Oct 19 2014Mockups6

Apple製品の画面に文字や画像を合成してブログのアイキャッチ画像やプレゼン資料を作っている人をよく見かけます。 カッコイイですよね。私も作りたい!と思い、ネットで探していたのですが、Photoshopの無料素材はたくさんあるのですが、なんか難しそう・・・ 今回は有料ですが、かんたんにApple製品やSamsung、Surfaceなどのモックアップ画像を合成できるMacアプリ「Mockups」を紹介します。 テンプレートもあって、カッコイイ画像をすぐ作ることができますよ!

Mockups App
カテゴリ: 開発ツール 価格: ¥300(記事公開時)
デベロッパ名: Mojtaba Komeili

以下の記事を参考にしました。

Apple製品のモックアップ画像をかんたんに合成できるMacアプリ「Mockups」 – iTea3.0

Mockupsの使い方

「 Mockups」を起動します。すると、このような画面が表示されます。 「Custom Template」はまっさらな状態から始まります。また「LADIIN」「Experience」という2つのテンプレートが準備されています。 Oct 19 2014Mockups9

Express Templateをクリックすると、Device Typeから合成画像を作成したいデバイスを選択できます。いろいろ選択できますが、iPhoneは今のところ6、6Plusは選択できません。 Oct 19 2014Mockups7 今回はテンプレートの「Experience」を使ってみます。選択し、「Create Project」をクリック。 Oct 19 2014Mockups8 このような画像が表示されます。大きめに表示されるので、全画面表示をオススメします。 Oct 19 2014Mockups10 右の「Attributes」-「Rotation」で縦置き、横置きを選択できます。 デバイスを変更した場合は、「Device Type」で変更できます。 「Properties」ではズームやレイアウトを確認できます。 Oct 19 2014Mockups11 「Layers」では「Visible」のチェックを外すと表示されなくなります。 また、iPhone SilverをiPhone Blackのレイヤーの前にドラッグ&ドロップすることで、iPhone Blackが前に表示されます。 ドラッグ&ドロップでレイヤーを自由に変更できます。 Oct 19 2014Mockups1 中央の「Add New Object」をクリックすることでデバイスを新しく挿入できます。 今回はMacBookを追加しました。MacBook Proしか選択できませんでした。 「Add New Label」で新しいテキストを、「Add New image」で新しい画像を挿入できます。 Oct 19 2014Mockups2 MacBookを選択し、「Attributes」-「Browse」をクリックすることで、合成画像を作成することができます。簡単ですね! Oct 19 2014Mockups3 保存するときは、右上の「Export」をクリックし、保存先を指定します。 「Share」をクリックすることで、TwitterやFacebookにシェアすることもできるようです。 Oct 19 2014Mockups4 できあがった画像もいい感じです。 Oct 19 2014Mockups5

あとがき

「Mockups」は300円かかりますが、かんたんにカッコイイ合成画像を作ることができます。プレゼンをする機会もこれからあるので、これからも使っていきたいと思います。 ただ、MacBookを選択しているのに、iPhone5sやSilverと表示されたりなど、少し動作が安定しない時がありました。少し気になりますね。アップデートに期待です。 興味がある人はぜひ使ってみてください!

Mockups App
カテゴリ: 開発ツール 価格: ¥300(記事公開時)
デベロッパ名: Mojtaba Komeili