モックアップ 作成ツール
モックアップ 作成は、公開されているWebページのスクリーンショットをブラウザウィンドウ、ノートPC、スマートフォンの枠に入れて、PNG画像を1枚にまとめるツールです。アカウント登録なしでも無料で使えますが、セキュリティ確認が必要です。ログインしているユーザーはクレジットで支払います。ポートフォリオ、事例紹介、クライアントへの確認に役立ちます。
- 撮影されるのは、ページの最初の画面だけです。画面より下のコンテンツは表示されません。
- 対象は公開されているアドレスだけです。スクリーンショットのアップロードはできません。ログインが必要なページでは、ログイン画面が表示されます。
- フレームに入れる前にページ画像を圧縮するため、小さな文字はぼやけて見えることがあります。
Webサイトのモックアップには2回のレンダリングが必要です。ページのキャプチャと、フレームへの配置にそれぞれ一回ずつ使います。ログイン時は合計2クレジットかかります。アカウント登録なしの場合は、どちらも無料の上限に数えられ、セキュリティ確認も二回行われます。
ページは上端部分のみキャプチャされ、通常のCSSで描いたフレームに配置されます。キャプチャは無料ツールのサイズ上限に収まるよう圧縮されます。
セキュリティ確認を完了すると、ボタンが有効になります。
結果
ここに画像が表示されます。
無料のWebツールでは、高さ2000pxまでのキャプチャしかできません。より高いキャプチャはAPIをご利用ください。
保存期間：Webツールの結果は10分後に削除され、履歴は保存されません。APIの結果は無料プランでは1日、StarterとProでは7日保存されます（BusinessとScaleでは30日）。
アカウント登録なしで利用可能
無料で毎分10、毎日50まで。
実ブラウザによるレンダリング
APIと同じエンジンであるヘッドレスChromium（画面を持たないブラウザエンジン）です。
自動的に削除
Webツールの結果は10分後に削除されます。
プライバシー：送信された内容は、このファイルを作成するためにのみ使用されます。作業用のコピーはジョブの終了時に削除され、結果は10分後に削除されます。詳しくはプライバシーポリシーをご覧ください。
curl -X POST https://api.aiipworld.com/v1/render \
-H "Authorization: Bearer $AIIPWORLD_API_KEY" \
-H "Content-Type: application/json" \
-d '{"html":"","output":"pdf","options":{}}'
# returns {"job_id": "...", "status": "queued"}; then poll:
curl https://api.aiipworld.com/v1/jobs/JOB_ID -H "Authorization: Bearer $AIIPWORLD_API_KEY"一括処理
Webツールは一度に1ドキュメントまで処理します。APIではドキュメントごとに一つのリクエストとなるため、プランが許す数だけスクリプトで処理できます。
詳細設定
ページ全体のキャプチャ（full_page）、領域を指定した切り抜き、リクエストヘッダー、カスタムユーザーエージェントはAPIのオプションです。詳しくはドキュメントをご覧ください。
保存期間
Webツールの結果は10分保存されます。無料APIの結果は1日、StarterとProの結果は7日、BusinessとScaleの結果は30日保存されます。Webツールでは、訪問者ごとに毎分10回、毎日50回まで変換できます。
ひとことで言うと
モックアップ 作成は、公開Webページを端末の枠に入れてPNG画像を一枚作る無料のオンラインツールです。
主な仕様
- アカウント登録なしの場合、ひとつのモックアップは二回のレンダリングを使い、どちらも毎分10・一日あたり50という訪問者ごとの制限に数えられます。セキュリティ確認は二回行われます。
- ログインしている場合、ひとつのモックアップは2クレジット（2回のレンダリング）かかります。
- 入力は公開されたhttpまたはhttpsのアドレスのみで、撮影されるのはページの最初の画面だけです。フレームはツールがCSSで描画し、背景はOcean、Sunset、Mintのグラデーション、Slate、White、Transparentから選べます。出力は1xまたは2xのピクセル密度の一枚のPNGです。
- アカウント登録なしで無料です。各モックアップは2回のレンダリングを使い、どちらも訪問者ごとの1分あたり10回、1日あたり50回の制限にカウントされます。セキュリティ確認もそれぞれ2回行われます。ログイン済みの場合、モックアップは2クレジット（2回のレンダリング）を消費します。
- ファイルは自動的に削除されます。アカウント登録なしの場合は変換後10分、無料アカウントの場合は1日で削除されます。
- 開発者は、APIキーを付けてPOST https://api.aiipworld.com/v1/renderを送信すると、同じレンダリングを実行できます。詳しくはスクリーンショットAPIページをご覧ください。
使い方
- 公開されているWebページのアドレスを入力します。http://またはhttps://で始まるアドレスを入力してください。
- フレームを選びます。「ブラウザウィンドウ」「ノートPC」「Phone（スマートフォン）」のいずれかをクリックします。
- 背景を選び、余白を設定します。ページの読み込みが遅い場合は、追加の待機時間を設定してください。
- ピクセル密度を1xか2xから選び、「モックアップを作成」をクリックして結果が表示されるまで待ちます。
- 「ダウンロード」をクリックしてPNGを保存します。ログインしている場合は、かかったクレジットも表示されます。
出力例
モックアップ 作成の流れ
モックアップは、ページを端末の画面に表示したように見せる画像です。このツールでは、専用のデザインソフトを使わずに2段階でモックアップを作れます。
まず公開Webページのアドレスを入力すると、ツールはレンダリングサーバー上のヘッドレスブラウザでページを読み込みます。
JavaScriptは撮影時に既定で実行されるため、スクリプトで描画されたコンテンツも画像に写ります。ページの表示が後から続く場合は、追加の待機時間を使うと、描画が終わってから撮影できます。追加の待機時間は短い時間です。
3つのフレームの違い
ブラウザウィンドウのフレームは、1280 x 800 pixelsでページを撮影します。アドレスバーには、URLのホスト名が表示されます。
ノートPCのフレームも1280 x 800 pixelsで撮影します。画面は75%に縮小され、ノートPCの形をした枠と台座に収まります。
スマートフォンのフレームは390 x 844 pixelsで撮影し、角丸の枠に入れます。モバイル表示のページに向いています。PC向けのフレームとは、最初の画面が異なる場合があります。
2回のレンダリングで作る理由
モックアップは、2回のレンダリングで作られます。1回目は、ページをJPEG（品質85）で撮影します。
ブラウザはその画像を、無料HTMLの上限である256 KBに収まるように圧縮し、フレームの中に配置します。2回目は、そのHTMLをPNGに変換します。
レンダリングはそれぞれ課金対象です。ログインしている場合、1つのモックアップは2回のレンダリングを使い、2クレジットかかります。アカウント登録なしの場合は、両方のレンダリングが無料の制限に数えられ、セキュリティ確認も2回行われます。結果には、かかったクレジットが表示されます。
背景・余白・サイズの設定
背景は、Ocean、Sunset、Mintのグラデーション、Slate、White、Transparentから1つ選びます。Transparentを選ぶと、背景のない透過PNGになります。デバイスを自分のデザインに配置したいときに使えます。
余白は、デバイスの周りの空間を決めます。余白を増やすと、フレームが大きな画像の中央に置かれ、周りに余裕ができます。
ピクセル密度は1xか2xから選びます。2xはピクセル数が増えるため、ファイルは大きくなります。原寸で表示する画像に向いています。
撮影した画像は圧縮されるため、細かい文字はぼやけて見えることがあります。小さな文字をはっきり読ませたい場合は、それを前提に計画してください。
ログインが必要なページの扱い
ツールは、ログインしていない訪問者としてページを読み込みます。ログインが必要なページでは、その奥のコンテンツではなくログイン画面が表示されます。
アドレスは公開されているものに限られます。プライベートネットワーク、localhost、クラウドのメタデータアドレスは対象外です。自分のパソコン上にあるページは撮影できません。
ログインだけで見られるページは、表示する許可がある公開デモ用ページやステージング用ページを使ってください。
モックアップの使い道
デザイナーは、完成したページを端末の枠に入れて、ポートフォリオで見せられます。
事例紹介では、モックアップでプロジェクトの成果を説明文と並べて示せます。
SNSの投稿やクライアントへの確認では、公開前にページが実際の画面でどう見えるかを伝えられます。
自分が所有するページ、または表示する許可があるページだけを使ってください。見た目を似せて編集したコピーではなく、実際のページを写す必要があります。
APIでモックアップを作成する方法
同じ2段階の処理は、APIでも使えます。1つ目のリクエストでページのスクリーンショットを取得し、2つ目のリクエストで、その画像をフレームに配置したHTMLからPNGを作ります。
APIキーは、Authorization: Bearerの後にキーを続けて送ります。リクエストは非同期で処理されます。POST /v1/renderは202とjob_idを返します。GET /v1/jobs/:idをポーリングして、statusがsucceeded、failed、timeoutのいずれかになるまで確認します。成功したら、download_urlからファイルをダウンロードします。
download_urlは有効時間が短いため、表示されたらすぐにダウンロードしてください。failedとtimeoutになったジョブのクレジットは返却されます。Webhookはまだ利用できないため、ジョブの完了はポーリングで確認するしかありません。
フレームの選び方
ページに合うフレームを選びます。Webサイトにはブラウザウィンドウのフレーム、モバイル表示のページにはスマートフォンのフレームが向いています。
使う前に、ページが公開されていることと、最初の画面に見せたい内容が表示されているかを確認してください。結果は10分後に削除されます。PNGをダウンロードして、控えを保存しておくと安心です。
出力は1枚の画像なので、提案書、投稿、スライドにそのまま使えます。別の作業は必要ありません。
スクリーンショット付きのデバイスフレーム
スクリーンショットモックアップは、ページの画像を枠に入れた画像です。このツールはページを撮影し、フレームと背景を加えて1枚のPNGを作ります。簡単なスクリーンショット枠作成ツールやデバイスフレーム作成ツールとしても使えます。Webページ向けのモックアップ作成ツール（website mockup generator）としても使えます。フレームはツールがHTMLとCSSで描いたもので、実際の端末を撮った写真ではありません。
見た目を整えるなら、グラデーションの背景と余白が効果の大部分を担います。アドレスを指定してページを撮影するため、手元の画像をアップロードして使うことはできません。
よくある質問
ウェブサイトのスクリーンショットをブラウザの枠に入れるには、どうすればよいですか？
公開されているWebページのアドレスを入力し、フレームで「ブラウザウィンドウ」を選ぶと作れます。背景を選んで「モックアップを作成」をクリックすると、ブラウザウィンドウの中にページが配置されます。アドレスのホスト名はアドレスバーに表示されます。
なぜ2回のレンダリングを使うのですか？
1回目でページを画像として撮影し、2回目でその画像をフレームで囲んでPNGに変換するためです。1つのモックアップに2回のレンダリングを使い、それぞれ別々に数えられます。
クレジットはいくらかかりますか？
ログインしている場合、1つのモックアップは2クレジットかかります。アカウント登録なしの場合は、両方のレンダリングが無料の制限に数えられ、セキュリティ確認も2回行われます。結果には、かかったクレジットが表示されます。
ページ全体を撮影できますか？
いいえ、撮影されるのは最初の画面だけです。画面より下のコンテンツは表示されません。フレームには、訪問者が最初に見る部分が表示されます。
自分で用意したスクリーンショットをアップロードできますか？
いいえ、アップロードはできません。公開Webページのアドレスを指定すると、ツールがページを撮影します。自分のパソコンで撮ったスクリーンショットは枠に入れられません。
フレームは機器メーカーのものですか？
いいえ、ツールがHTMLとCSSで描いたフレームです。端末の写真、ブランドの画像、第三者の素材は使っていません。
スクリーンショットが少しぼやけるのはなぜですか？
ページを一度JPEGで保存し、無料HTMLの上限である256 KBに収まるようにブラウザが圧縮するためです。小さな文字は鮮明さが下がることがあります。ページでは、できるだけ大きめの文字を使うと効果的です。
ログインが必要なページをモックアップにできますか？
直接は難しいです。ツールはログインしていない訪問者としてページを読み込むため、フレームにはログイン画面が表示されます。表示する許可がある公開ページを使ってください。
結果はどのくらい保存されますか？
10分後に削除されます。履歴は残りません。結果が表示されたら、すぐにPNGをダウンロードしてください。
ツールは無料ですか？
無料で使え、アカウント登録なしでも利用できます。アカウント登録なしの場合はセキュリティ確認が必要です。ログインしているユーザーはクレジットを使います。モックアップに透かしは入りません。
APIでも同じモックアップを作れますか？
はい、同じ2段階の処理をAPIで行えます。ページ用に1回、フレーム付きHTML用に1回、リクエストを送ります。それぞれが非同期のジョブなので、成功するまでポーリングしてください。
出力画像のサイズはどのくらいですか？
出力はPNG画像で、サイズはフレーム、余白、ピクセル密度によって変わります。ピクセル密度を2xにすると、1xより大きいファイルになります。
Webページのモックアップとは何ですか？
公開されているページを端末やブラウザの枠に入れて、画面に表示されているように見せた画像です。このツールは、アドレスから1枚のPNG画像を作ります。ポートフォリオ、事例紹介、クライアントへの確認に使えます。
デザインソフトなしで、クライアント向けのモックアップを作れますか？
はい、デザインソフトは必要ありません。公開ページのアドレスを入力し、フレームと背景を選んで、PNGをダウンロードします。撮影されるのは最初の画面だけなので、クライアントが見るのもページの上部です。
事例紹介にモックアップを入れられますか？
はい、PNGを保存して事例紹介やポートフォリオに配置できます。ブラウザウィンドウはデスクトップの見た目、ノートPCはノートPCの見た目、スマートフォンはモバイルページに向いています。1枚の画像なので、どこで使っても配置は同じです。
特定のメーカーの端末のモックアップも作れますか？
厳密な意味では、特定のメーカーの端末は表示しません。ノートPCとスマートフォンのフレームは、HTMLとCSSで描いた一般的な形です。ブランド付きの端末ではなく、端末の形をしたフレームで囲みます。
アプリ内や一括処理で使いたい場合
このツールはレンダリングAPIで動作するため、同じ画像を、お使いのコードから一回のHTTPリクエストで取得できます。 無料アカウントには、毎月100クレジットが含まれています。