アプリやWebサービスの紹介サイト制作時に役立つジェネレーターと素材まとめ

アプリやWebサービスの紹介サイト制作時に役立つジェネレーターと素材まとめ

スマートフォンアプリやWebサービスの紹介サイトなどでよく見かける、スクリーンショットを各デバイスに埋め込んでいるような画像などを手軽に作成することができる便利なジェネレーターツールと素材をそれぞれ3種類ずつ紹介します。中には単純なデバイスに画像を埋め込むだけでなく、実際に使用しているようなリアルな感じで作成できるものもあります。

2013年10月7日 追記
Free iPad & iPhone 5s Mockups – PSD」を追記しました。
2014年9月1日 追記
Frame」を追記しました。

MockUPhone

MockUPhone

様々なデバイスに画像を合成できるもので、向きも縦・横・斜めの3パターン(一部は縦・横のみ)用意されています。
使い方も簡単で、合成したい機種を選んで画像をドラッグすれば作成されます。
機種も多数用意されており、iPhone(5sと5cも有)・iPad・iPad mini・Nexus 4・Galaxy S4・Windoes Phoneがあります。

PlaceIt

PlaceIt

同じくPC・スマートフォン・タブレットなどに画像を埋め込むことができますが、先ほどのものとは違い、実際にそのアプリやサイトを使ったり見ているかのようなシチュエーションの画像が作成できます。
こちらも使い方は簡単で、ベースとなる背景イメージを選択後に画像をドラッグすれば合成されます。
更にわざわざ画像を用意しなくても、埋め込みたいサイトのURLを指定するだけで自動的にキャプチャを埋め込むことまでできたりとおすすめです。

※小さくて見辛いですけど、今回の記事のアイキャッチもこのサービスを使用して作成した画像を使用しています。

Frame

Frame

同じくPC・スマートフォン・タブレットなどに画像を埋め込むことができ、デスクトップ・タブレット・モバイルなど、デバイスもひと通り用意されています。

iPhone Screenshot Maker

iPhone Screenshot Maker

同じく画像を埋め込むことができるサービスで、iPhone各種・iPad・iPad mini・Mac・Nexus S・ゲームボーイから機種を選択でき、使い方はデバイスを選択して画像をドラッグすれば合成されます。
またオプションも幾つか設定でき、ディスプレイフィットや反射エフェクトの有無、ステータスバーの選択や出力画像のサイズ指定などあります。

Free iPhone Mockups – PSD

Free iPhone Mockups - PSD

PSD素材で4種類のシチュエーションが用意されています。

Free iPad & iPhone 5s Mockups – PSD

Free iPad & iPhone 5s Mockups - PSD

iPhone 5sとiPadを使用した4種類のシチュエーションが用意されています。

Free iPhone Mockup PSD White

Free iPhone Mockup PSD White

同じくPSD素材ですがこちらは手とiPhoneは別レイヤーになっていて背景もないので、背景画像を簡単に変更できます。

iPhone5 Mockup Template Free PSD download

iPhone5 Mockup Template Free PSD download

同じくPSD素材で、こちらも上記と同様に手とiPhoneは別レイヤーになっているので、好きな背景へ簡単に変更できます。

以上、アプリやWebサービスの紹介サイト制作時に役立つジェネレーターと素材まとめでした。
単純にPCやスマートフォンのモックアップ素材を探しているという方は、以前に幾つかまとめているのでご覧になってみてください。

Back to Top

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。