レスポンシブなモックアップ制作に！フリーなPSD素材・サービスまとめ。

レスポンシブ対応のWebサイトを紹介するときや、ちょっとしたモックアップを制作したいときに役立つ、便利なフレーム素材やサービスをご紹介します。MacやiPhoneなどのシンプルなフレーム素材から、キャプチャを用意してアップロードするもの、URLを指定するだけで出力してくれるツールまで、いろいろと知っておくと便利ですね！

モックアップを簡単に作成可能なWebサービス。

自分で作るのは手間だし時間がない！という方は、簡単に作成・DL可能なWebサービスを利用してみてはいかがでしょうか。

URLを指定すれば作成完了！ – Placeit

使用したいフレーム写真を選んでサイトのURLを指定すれば、簡単にイメージ画像がダウンロードできます。有料会員になれば、高解像度なものがダウンロードできます。フリーライセンスの場合、商用利用にはバックリンクが必要です。キャプチャをアップロードでも作成可能。
なんとビデオモックアップにも対応しています！※別途Recorditが必要
https://placeit.net/

素材となるイメージが豊富なため、非常に使い勝手がいいです。

商用利用でもOK！ – Frame

こちらも直観的に操作できるUIで、簡単にモックアップ・イメージ素材が作成できます。特に明記されていなければ、どの素材も基本的に商用フリーで利用できます。もちろんURL指定でも作成できます。
http://frame.lab25.co.uk/

簡単にすぐに作成できますよ。

スクリーンショットを上げるだけ！ – iPhone Screenshot Maker

フレームを選んで画像をアップロードするだけの簡単作成サービス。鏡面反射や影つき、ステータスバーのカットやキャリアの文字入れなど、各種オプションも用意されていて便利です。フレームも豊富なため、作成したいイメージに合わせて選択できますね！ただし20枚/日制限があるようなので注意してください。ゲームボーイかわいい。
http://iphone-screenshot.com/

よく使われるこういったモックアップが簡単に作成できます。

モックアップをダウンロードして自分で作成。

自分で作ったほうが柔軟に対応できる！という方は、以下から素材PSDをダウンロードしてご利用ください。使いやすそうな素材を、いくつかご紹介します。

Responsive Showcase Psd – Pixeden

Mac・iPad・iPhoneなどレイヤーごとに分けられ、すぐに利用できるフレーム素材PSD。
http://www.pixeden.com/psd-web-elements/responsive-showcase-psd

Free Sketch & PSD templates – Mockuuups Freebies

スマホやタブレットを使った10種類以上のPSD写真素材がダウンロードできます。
https://www.mockuuups.com/freebies/

Vector Apple Outline Device PSD – Pixeden

ちょっと変わり種のアウトラインで描かれたフレーム素材。
http://www.pixeden.com/psd-web-elements/vector-apple-outline-device-psd

Minimal Apple Product Templates – WeGraphics

apple製品がミニマルに描かれたモックアップ素材。シンプルで使いやすそうです。
http://wegraphics.net/downloads/minimal-apple-product-templates/

そのほかのモックアップ素材

思わず使いたくなる、素敵な画像素材をピックアップしてご紹介します。

https://developer.apple.com/app-store/marketing/guidelines/#images
→アップル公式のモックアップイメージ。Apple Watchもありマス。
https://dribbble.com/shots/1721145-6-Photorealistic-iPhone-5-mockups
→iPhone5を手に持った、モックアップ用の写真素材集。
http://graphicburger.com/flat-mockups-stationery-items/
→少しズレますが、フラットデザインでかわいいステーショナリー素材。
http://freebiesbug.com/psd-freebies/mockups-psd-freebies/
→大量のモックアップ素材からお目当てのものを探せます。

いかがでしたでしょうか。うっかり使いたくなる、素敵な素材がたくさんありました！こういうのはいざ探すとなると意外と面倒なので、決まったものをストックしておきたいですね。ではまた！

※各種素材をご利用の際は、ライセンスを再度ご確認ください

クレジット・リンク不要／商用可／アプリOK！アイコンフリー素材まとめ【2015年4月版】

ウェブ制作でお悩みの方へ。

ネット通販やウェブ制作、ECサポート事業を行っている（株）ビリオンプラン・ジャパンが運営しています。ランディングページやサイト制作、自社メディアを使った集客提案、中国をはじめとする海外ローカライズ作業など幅広く対応いたします。

ウェブ制作のお悩み、ご相談ください。

ビリオンプラン・ジャパンは日本を拠点に、香港などの海外グループ会社も生かし各種サービスをご提供しています。まずはお気軽にご相談くださいませ。

CONTACT
48時間以内に返信します

または、お電話でも承ります。
※ただいま新規ウェブ制作の受付は停止しております
10:00 - 19:00（土日祝休み）

06-6271-7761

ABOUT ME

おむおデザイナー／編集Twitter:@BILLIONPLAN_JP: 大阪在住WEBデザイナー。制作会社、EC業界でデザイナーをやった後に、ゲームアプリの世界へ。そんなにゲーム好きじゃないことに気づいてウェブに出戻り。その後ビリオンプラン立ち上げに参加。ご相談はこちらにお願いします。フェネック飼いたい。 →記事一覧