こんにちは。
Webサイトやアプリのスクリーンショットを、見栄えの良いモックアップ画像として作成できるモックアップ作成アプリ「Mockup Generator」を公開しました。
ポートフォリオに使えるアプリだと思います！
Mockup Generator
mockup-make.vercel.app
モックアップ作成アプリとは
モックアップ作成アプリは、ブラウザ上で簡単にモックアップ画像を作成できるWebツールです。
URLからWebサイトの画像を取得する機能には対応していませんが、任意のサイズを選択すると、そのサイズに合わせたプレビュー枠を生成できます。
（2026/7 URLから画像を取得する機能対応できました！！）
表示したいWebサイトやアプリを配置してスクリーンショットを撮ることで、指定した比率の画像を簡単に作成できます。
また、より使いやすくするために、以下の機能も搭載しています。
- デスクトップ・タブレット・スマートフォンのデバイスモックアップ
- ドラッグ＆ドロップによる自由な配置
- サイズ・位置・回転などの調整
- PNG形式での書き出し
- ブログやポートフォリオ、SNS向け画像の作成
デザインツールに慣れていない方でも、手軽にモックアップ画像を作れることを目指して開発しました。
ご利用はこちら
Mockup Generator
mockup-make.vercel.app
ぜひ、ポートフォリオや制作実績、ブログ記事、SNS投稿などにご活用ください。
関連記事
裏話を書いているので気になる方はご参照ください！
【裏側話】URLからモックアップを作る機能を諦めた話｜ブラウザの制約にぶつかった
モックアップ作成アプリでURLから画像を生成する機能を断念した理由をご紹介。ブラウザの制約と現在採用している方法についてまとめました。
FANELAB
👆このあと、URLからモックアップ作る機能実装できました！！
👇頑張りを見てください！
URLからモックアップ作る機能実装できました！！！【Mockup Generator】
私が作ったポートフォリオ用のモックアップを作成するアプリ「Mockup Generator」。一番欲しかったのはURLからモックアップを作り、PNG画像で出力する機能だったのですが、CORS（Cross-Origin Resource Sh…
FANELAB