paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

【2019年版】無料でモックアップ画像を作りまくれるWebサービスまとめ

f:id:paiza:20191009133511j:plain
どうも、まさとらん(@0310lan)です!

今回は、誰でも簡単にスマホ・PC向けのモックアップ画像を作成してダウンロードできる無料のWebサービスを厳選してご紹介します。

単純な画像だけでなく、カメラアングルを自在に変えられるものやWebエディタによる高度な編集ができるものまで、幅広いジャンルで活用できるものを集めています。

ご興味ある方は、ぜひ参考にしてみてください!

■超シンプルなスマホ向けモックアップ画像を作る

Mobile Mockup

f:id:paiza:20191009133553j:plain

スマホ用のデザイン画像やスクリーンショットなどをアップロードするだけで、ダウンロード可能なモックアップ画像を生成してくれる無料サービス。

オプションとして背景色やスマホフレームのテーマカラーを変更可能で、アップロードした画像はフレームへ収まるように調整もできます。ユーザー登録は不要なので、サイトにアクセスしてすぐに何度でも利用できるのが特徴でしょう。


また、類似サービスとして以下のようなモックアップ画像作成サービスもあります。

Cleanmock

f:id:paiza:20191009133631j:plain

こちらも画像をアップロードするだけなのですが、スマホフレームの種類がいくつか用意されているのが特徴です。

また、2枚の画像を1つの画面で表示したり、Webサイト用のモックアップ画像も作成できます。基本的な機能はすべて無料で使えますが、一部の有料テンプレートやオプション設定も含まれています。


<参考リンク>

 

■3D操作で自在にカメラアングルを変えてモックアップ画像を作る

ScreenCube

f:id:paiza:20191009133735j:plain

ブラウザ上で起動するエディタを使い、3DCGで再現されたスマホデバイスをマウスでグリグリ動かしながら好きなアングルに配置できるのが大きな特徴です。もちろん、自分が用意した画像をアップロードすれば、スマホデバイスの画面にピッタリ貼り付いてくれます。

スマホフレームはiPhone以外にもGalaxyやPixelも用意されています。オプションとして、影を付けたりスポットライトを当てたりすることも可能です。


また、シーンの選択も可能なので、たとえばテーブルの上で自由に配置・角度・サイズを決めて画像ファイルを書き出すことができます。

f:id:paiza:20191009133756j:plain

ファイルの書き出しはTwitterやInstagramなど、さまざまなサイズに最適化してダウンロードすることができるので便利です。


<参考リンク>

 

■動きを表現できるモックアップビデオを作る

Mock

f:id:paiza:20191009134020j:plain

MP4かMOV形式の動画ファイルをアップロードするだけで、スマホやPCのフレームにピッタリ最適化されたモックアップビデオを生成してくれるサービスです。

iPhone / iPad / Macbook Proなどをはじめ、いくつかのフレームが提供されているので好きなものを選択できます。


試しにモックアップビデオとして書き出したものが以下になります。(これはgif画像ですが、実際はmp4形式でダウンロードが可能です)

f:id:paiza:20191009140054g:plain

オプションで背景色を変更したり、各種SNS用のサイズに最適化した動画ファイルとしてもダウンロードできるようになっています。

有料プランでは、より多くの動画フォーマットに対応したり背景に画像を挿入することもできます。


<参考リンク>

 

■主要ブラウザを使ったモックアップ画像を作る

BrowserFrame

f:id:paiza:20191009134248j:plain

Chrome / Safari / Firefox / IE / Edge / Operaなどのブラウザフレームに、任意のWebページ画像をアップロードすればモックアップとして取得できるサービスです。


画像ファイルがなくてもURLを入力してモックアップ画像にすることも可能で、各種ブラウザはライト・ダークテーマが用意されているのも便利です。

f:id:paiza:20191009134258j:plain

オプションとして、ブラウザのパディング値・幅・高さなども調整できるようにパラメータが提供されています。


<参考リンク>

 

■アプリストア向けのモックアップ画像を作る

Davinci Apps

f:id:paiza:20191009134345j:plain

iOS / Android向けのアプリストアで使える縦長のモックアップ画像を簡単に生成できるサービスです。


いくつか提供されているスマホフレームとテンプレートを選択したら、画像ファイルをアップロードするだけで完了します。

f:id:paiza:20191009134400j:plain

各画像のトップに好きなテキストを入力できるのが特徴。最大で10枚の画像を作成してダウンロードできるようになっています。

自分専用のマイページも提供されているので、プロジェクトの保存・編集が可能です。また、過去に作成した画像の履歴をたどってダウンロードできるのもポイントでしょう。


<参考リンク>

 

■高機能なWebエディタを使ったモックアップ画像を作る

Artboard Studio

f:id:paiza:20191009134448j:plain

スマホ・PCのフレームに画像をはめ込むだけでなく、文具・メモ帳・ノート・カップなどさまざまなアイテムを組み合わせて自由にモックアップ画像を作成できるサービスです。


ブラウザ上に起動するWebエディタを使い、画像のアップロードからさまざまな調整や組み合わせをおこなうことができます。

f:id:paiza:20191009134503j:plain

シェイプ画像や任意のテキストを挿入できるほか、レイヤー構造を活用してアイテムの重なり具合の調整も簡単です。

ユニークな点として、専用のURLを発行することで誰でもブラウザから閲覧してもらえる機能が提供されています。画像ファイルを添付して共有するよりも簡単なので便利に使えるでしょう。もちろんJPGやPNGでの書き出しにも対応しています。


<参考リンク>

 

■多種多様なモックアップ画像を作る

Smartmockups

f:id:paiza:20191009134628j:plain

スマホ・タブレット・PC・ウォッチ・TVなど、さまざまなフレームデバイス向けのモックアップ画像を作成&ダウンロードできるサービスです。

とにかく用意されているフレームが膨大であり、あらゆるシチュエーションの画像が提供されているのが大きな特徴でしょう。(有料テンプレートも含む)


さらに面白いのは、手持ちのロゴやイラストの画像を車・洋服・カップなどさまざまなアイテムに合成できる点です。

f:id:paiza:20191009134645j:plain

これによりWeb関連で使うモックアップ画像だけでなく、とても幅広いジャンルにも応用できるのが魅力です。

類似の無料サービスとしては、【 Magicmockups 】【 Dunnnk 】などもあるので合わせて参考にしてみてください。


<参考リンク>

 

■動画でプログラミングが学べるpaizaラーニング


動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。

Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。

■まとめ

今回は、誰でも無料でモックアップ画像を作成してダウンロードできるサービスを厳選してご紹介してみました。

Webサイトのコンテンツとして活用したり、自社サービスやアプリのプロモーション用に使うなど、さまざまな活用方法があるので非常に重宝するサービスばかりです。

無料で使えるサービスは少しずつ減ってきているので、ぜひブックマークして活用できるようにしておきましょう。





paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら

paizaラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら

paizaのスキルチェック





※このブログで紹介しているキャンペーンやイベント、およびサイト内の情報については、すべて記事公開時の情報となります。閲覧されたタイミングによっては状況が変わっている場合もございますのでご了承ください。

ITプログラマー・エンジニア転職・就活・学習のpaiza

プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編AI機械学習入門

エンジニアのためのプログラミング転職サイト|paiza転職

プログラミング スキルチェックエンジニア求人一覧

未経験からエンジニアを目指す人の転職サイト|EN:TRY

プログラミング スキルチェックエンジニア未経験可求人一覧

エンジニアを目指す学生の就活サイト|paiza新卒

プログラミング スキルチェックエンジニア求人一覧

ブラウザを開くだけで エディタ、Webサーバ、DB等の開発環境が整う|PaizaCloud