とにかくいますぐモックアップ画像が必要！そんな時には『Smartmockups』

SNSのポストやバナー画像、またはOGP画像の作成時など、突然モックアップ画像が欲しくなる時ってありませんか？時間をかけて取り組める場合は、テンプレートを探してPhotoshopで作ったり、Artboard Studioなどの専用ツールを使ったりすると思います。しかし、あまり時間をかけたくない場合は新しいツールの導入やログインをせずにモックアップ画像が作れると良いですよね。

https://smartmockups.com/

今回紹介する『Smartmockups』は、無料かつ登録不要でモックアップ画像を自動作成、ダウンロードできるWebサービスです。ダウンロードできるサイズも横幅が1280pxとなっており、SNSやOGP画像として使用する際には十分な画質でモックアップを作成することができます。

関連記事

SNSの最適な画像サイズ解説！Threadsを含む2024年最新の8種類まとめ

この記事では、8つの主要SNSの画像サイズについて、プロフィールページに使用する画像と投稿時に使用する画像のサイズをサービスごとに一枚の画像にまとめています。適切なサイズで画像を投稿することは、ブランドのメッセージを意図した形でオーディエンスに届けるために重要なポイントとなります。ぜひこの記事の内容を参考にSNSへの投稿画像を作成してみてください。X（旧Twitter）では、以下の画像設置ケースについてまとめています。プロフィール関連画像アイコン画像ヘッダー画像タイムライン投稿画像1枚画像2枚画

Smartmockupsの使い方はとても簡単で、Webサイト上から使いたいテンプレートを探して、埋め込みたい画像をアップロードするだけ。アップロードした画像を使って自動でモックアップ画像を作成してくれます。今回はおそらく利用頻度の高い、アプリやWebサイトの利用体験を想起させるようなiPhoneモックアップを作成してみましょう。

Smartmockupsでは、テンプレートの種類が細かくカテゴリー分けされており、ヘッダーのナビゲーションから「Technology > Smartphones」を選択することでスマートフォンのテンプレート一覧が表示されます。一覧画面内のフィルターを使用してiPhone14, 15などの機種名でさらに細かく絞り込むこともできます。

https://smartmockups.com/mockups/smartphone

テクノロジー関連のカテゴリーではスマートフォンの他に、Apple Watchやテレビ、またInstagramのポストなどのSNS投稿のモックアップも存在します。中には動画を作成してくれるものもあり、その多くが無料で利用可能です。

有料版のものも含めるとスマートフォンのモックアップテンプレートだけでも1,893種類も提供されており、モックアップでの使用を想定されたクオリティの高い写真が多く並びます。すぐにモックアップ画像が作れるというメリット以外にも、そもそも提供されているテンプレートの質が高いことも大きな特徴です。

今回は、こちらのテンプレートを使用します。使用したいテンプレートを選んだら、あとは"Upload from"ボタンで埋め込みたい画像をアップロード。するとテンプレートにアップロードした画像が当てはめられた状態のプレビューを確認することができます。無料版では、細かいカスタマイズはできないものの、これだけでも十分なクオリティのモックアップ画像になっていることがわかると思います。

最終的に完成したモックアップ画像はこのようになりました。

実はこのSmartmockups、2024年9月27日からは今回紹介したようなWebサイト上からの利用ができなくなり、Canva上のモックアップ機能としてのみ使用することができるようになります。これは、2021年にSmartmockupsがCanvaに買収されていることによるものであり、Canva上でのモックアップサービス提供に集中するための決定であるとのことです。

9月以降は、「すぐに簡単にモックアップが作れる」という訳ではなくなってしまうものの、同等のクオリティのモックアップ作成はCanvaで行うことができるため、テンプレートのクオリティが気に入った方はCanva上での利用を検討してみても良いかもしれません。

UIデザインに関する記事をもっと読む

「UIデザイン」に関連する記事一覧

「より良い未来」をつくるデザイナーのためのWork & Lifeマガジン『unprinted』では、UIデザインに関する学習コンテンツや最新情報など、デザイナーのためのコンテンツを配信中