どうも、まさとらん(@0310lan)です!
今回は、誰でも簡単にスマホ・PC向けのモックアップ画像を作成してダウンロードできる無料のWebサービスを厳選してご紹介します。
単純な画像だけでなく、カメラアングルを自在に変えられるものやWebエディタによる高度な編集ができるものまで、幅広いジャンルで活用できるものを集めています。
ご興味ある方は、ぜひ参考にしてみてください!
■超シンプルなスマホ向けモックアップ画像を作る
【 Mobile Mockup 】
スマホ用のデザイン画像やスクリーンショットなどをアップロードするだけで、ダウンロード可能なモックアップ画像を生成してくれる無料サービス。
オプションとして背景色やスマホフレームのテーマカラーを変更可能で、アップロードした画像はフレームへ収まるように調整もできます。ユーザー登録は不要なので、サイトにアクセスしてすぐに何度でも利用できるのが特徴でしょう。
また、類似サービスとして以下のようなモックアップ画像作成サービスもあります。
【 Cleanmock 】
こちらも画像をアップロードするだけなのですが、スマホフレームの種類がいくつか用意されているのが特徴です。
また、2枚の画像を1つの画面で表示したり、Webサイト用のモックアップ画像も作成できます。基本的な機能はすべて無料で使えますが、一部の有料テンプレートやオプション設定も含まれています。
<参考リンク>
■3D操作で自在にカメラアングルを変えてモックアップ画像を作る
【 ScreenCube 】
ブラウザ上で起動するエディタを使い、3DCGで再現されたスマホデバイスをマウスでグリグリ動かしながら好きなアングルに配置できるのが大きな特徴です。もちろん、自分が用意した画像をアップロードすれば、スマホデバイスの画面にピッタリ貼り付いてくれます。
スマホフレームはiPhone以外にもGalaxyやPixelも用意されています。オプションとして、影を付けたりスポットライトを当てたりすることも可能です。
また、シーンの選択も可能なので、たとえばテーブルの上で自由に配置・角度・サイズを決めて画像ファイルを書き出すことができます。
ファイルの書き出しはTwitterやInstagramなど、さまざまなサイズに最適化してダウンロードすることができるので便利です。
<参考リンク>
■動きを表現できるモックアップビデオを作る
【 Mock 】
MP4かMOV形式の動画ファイルをアップロードするだけで、スマホやPCのフレームにピッタリ最適化されたモックアップビデオを生成してくれるサービスです。
iPhone / iPad / Macbook Proなどをはじめ、いくつかのフレームが提供されているので好きなものを選択できます。
試しにモックアップビデオとして書き出したものが以下になります。(これはgif画像ですが、実際はmp4形式でダウンロードが可能です)
オプションで背景色を変更したり、各種SNS用のサイズに最適化した動画ファイルとしてもダウンロードできるようになっています。
有料プランでは、より多くの動画フォーマットに対応したり背景に画像を挿入することもできます。
<参考リンク>
■主要ブラウザを使ったモックアップ画像を作る
【 BrowserFrame 】
Chrome / Safari / Firefox / IE / Edge / Operaなどのブラウザフレームに、任意のWebページ画像をアップロードすればモックアップとして取得できるサービスです。
画像ファイルがなくてもURLを入力してモックアップ画像にすることも可能で、各種ブラウザはライト・ダークテーマが用意されているのも便利です。
オプションとして、ブラウザのパディング値・幅・高さなども調整できるようにパラメータが提供されています。
<参考リンク>
■アプリストア向けのモックアップ画像を作る
【 Davinci Apps 】
iOS / Android向けのアプリストアで使える縦長のモックアップ画像を簡単に生成できるサービスです。
いくつか提供されているスマホフレームとテンプレートを選択したら、画像ファイルをアップロードするだけで完了します。
各画像のトップに好きなテキストを入力できるのが特徴。最大で10枚の画像を作成してダウンロードできるようになっています。
自分専用のマイページも提供されているので、プロジェクトの保存・編集が可能です。また、過去に作成した画像の履歴をたどってダウンロードできるのもポイントでしょう。
<参考リンク>
■高機能なWebエディタを使ったモックアップ画像を作る
【 Artboard Studio 】
スマホ・PCのフレームに画像をはめ込むだけでなく、文具・メモ帳・ノート・カップなどさまざまなアイテムを組み合わせて自由にモックアップ画像を作成できるサービスです。
ブラウザ上に起動するWebエディタを使い、画像のアップロードからさまざまな調整や組み合わせをおこなうことができます。
シェイプ画像や任意のテキストを挿入できるほか、レイヤー構造を活用してアイテムの重なり具合の調整も簡単です。
ユニークな点として、専用のURLを発行することで誰でもブラウザから閲覧してもらえる機能が提供されています。画像ファイルを添付して共有するよりも簡単なので便利に使えるでしょう。もちろんJPGやPNGでの書き出しにも対応しています。
<参考リンク>
■多種多様なモックアップ画像を作る
【 Smartmockups 】
スマホ・タブレット・PC・ウォッチ・TVなど、さまざまなフレームデバイス向けのモックアップ画像を作成&ダウンロードできるサービスです。
とにかく用意されているフレームが膨大であり、あらゆるシチュエーションの画像が提供されているのが大きな特徴でしょう。(有料テンプレートも含む)
さらに面白いのは、手持ちのロゴやイラストの画像を車・洋服・カップなどさまざまなアイテムに合成できる点です。
これによりWeb関連で使うモックアップ画像だけでなく、とても幅広いジャンルにも応用できるのが魅力です。
類似の無料サービスとしては、【 Magicmockups 】【 Dunnnk 】などもあるので合わせて参考にしてみてください。
<参考リンク>
■動画でプログラミングが学べるpaizaラーニング
動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。
「Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。
■まとめ
今回は、誰でも無料でモックアップ画像を作成してダウンロードできるサービスを厳選してご紹介してみました。
Webサイトのコンテンツとして活用したり、自社サービスやアプリのプロモーション用に使うなど、さまざまな活用方法があるので非常に重宝するサービスばかりです。
無料で使えるサービスは少しずつ減ってきているので、ぜひブックマークして活用できるようにしておきましょう。
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら