モックアップジェネレーター
WebサイトのURLを入力するだけで、そのサイトがパソコンとスマートフォンに表示された画像（モックアップ）を作れるWebアプリです。
ポートフォリオに制作実績の見栄えを載せる作業が毎回手間だったので、自分で作りました。
概要
| 項目 | 内容 |
|---|---|
| 種類 | 自主開発のWebアプリ |
| 公開状況 | 公開中（どなたでも使えます） |
| 主な機能 | URLから画面を取得／パソコンとスマホの画像を1枚に合成／画像のアップロードで差し替え |
| 出力 | 2048×2048ピクセルの正方形の画像（PNG） |
| 使った技術 | Cloudflare Workers、Cloudflare Browser Rendering、Canvas |
| 作った時期 | 2026年4月（9月に今の仕組みへ作り直し） |
作ったきっかけ
ポートフォリオで実績を紹介するときは、制作したサイトがパソコンとスマホでどう見えるかを、1枚の画像で見せるのが一番伝わります。
ただ、そのたびに画面を撮って、端末の枠の画像に合わせて、大きさをそろえて……という作業が発生していました。
手間がかかるので、パソコンのスクリーンショットを1枚載せるだけで済ませることも多く、スマホでの見え方までは、なかなか伝えきれていませんでした。
1回あたりは小さな手間でも、実績が増えるたびに同じ作業を繰り返すことになります。
そこで、URLを入れるだけで画像ができる仕組みを作りました。
できること
- URLを入れるだけで、パソコンとスマホの画面を同時に取得します。2つの画面を並行して撮るので、待ち時間が短くなります。
- 取得した画面を、パソコンとスマホの枠に合わせて1枚の画像に合成し、そのままダウンロードできます。
- サイトによってはURLから画面を取得できないことがあるので、手元のスクリーンショットをアップロードして差し替えることもできます。
工夫したこと
最初の版（2026年4月）は、別のサービスの上で動かしていました。
実際に使ってみると、次の問題が見つかりました。
- サーバー側に日本語のフォントがなく、日本語のサイトだと文字がまったく表示されない
- パソコンとスマホを順番に撮っていたので、1回に40〜60秒かかる
- 合成するときに画像を一度縮めていたので、完成した画像が粗くなる
そこで9月に、仕組みを丸ごと作り直しました。
今は、日本語のサイトもきちんと表示されます。
パソコンとスマホの画面も、縮めずに原寸のまま合成しています（パソコン 2560×1600、スマホ 780×1616 ピクセル相当）。
1日に使える回数には、サーバーの無料枠の上限があります（およそ40回）。
上限に達したときも、画像のアップロードからは作れるようにしています。
今の使い方
新しく公開できる実績ができたときに、このツールで画像を作っています。
クラウドソーシングサイトに載せているポートフォリオの画像も、ほとんどがこのツールで作ったものです。
業務に合わせたツールづくりも承ります
「毎回同じ作業をしている」「この確認に時間がかかる」といった、日々の小さな手間をツールにするご相談を承っています。
