# モックアップ 作成ツール > モックアップ 作成は、公開Webページを端末の枠に入れてPNG画像を一枚作る無料のオンラインツールです。 モックアップ 作成は、公開されているWebページのスクリーンショットをブラウザウィンドウ、ノートPC、スマートフォンの枠に入れて、PNG画像を1枚にまとめるツールです。アカウント登録なしでも無料で使えますが、セキュリティ確認が必要です。ログインしているユーザーはクレジットで支払います。ポートフォリオ、事例紹介、クライアントへの確認に役立ちます。 ## 主な仕様 - 入力：公開されたhttpまたはhttpsのアドレス。撮影されるのはページの最初の画面だけです。 - フレームはツールがCSSで描画します。背景：Ocean、Sunset、Mintのグラデーション、スレート、白、透明。 - 出力：1xまたは2xのピクセル密度で、PNG画像を1枚。 - アカウント登録なしで無料です。各モックアップは2回のレンダリングを使い、どちらも訪問者ごとの1分あたり10回、1日あたり50回の制限にカウントされます。セキュリティ確認は2回行われます。1回目のレンダリングではWebアドレスを読み込むため、1日あたり5件のWebアドレスの制限にもカウントされます。ログイン済みの場合、モックアップは2クレジット（2回のレンダリング）を消費します。 - ファイルは自動的に削除されます。アカウント登録なしの場合は変換後10分、無料アカウントの場合は1日で削除されます。 - 開発者は、APIキーを付けてPOST https://api.aiipworld.com/v1/renderを送信すると、同じレンダリングを実行できます。詳しくはスクリーンショットAPIページをご覧ください。 ## 使い方 1. 公開されているWebページのアドレスを入力します。http://またはhttps://で始まるアドレスを入力してください。 2. フレームを選びます。「ブラウザウィンドウ」「ノートパソコン」「スマートフォン」のいずれかをクリックします。 3. 背景を選び、余白を設定します。ページの読み込みが遅い場合は、追加の待機時間を設定してください。 4. ピクセル密度を1xか2xから選び、「モックアップを作成」をクリックして結果が表示されるまで待ちます。 5. 「ダウンロード」をクリックしてPNGを保存します。ログインしている場合は、かかったクレジットも表示されます。 ## モックアップ 作成の流れ モックアップは、ページを端末の画面に表示したように見せる画像です。このツールでは、専用のデザインソフトを使わずに2段階でモックアップを作れます。 まず公開Webページのアドレスを入力すると、ツールはレンダリングサーバー上のヘッドレスブラウザでページを読み込みます。 JavaScriptは撮影時に既定で実行されるため、スクリプトで描画されたコンテンツも画像に写ります。ページの表示が後から続く場合は、追加の待機時間を使うと、描画が終わってから撮影できます。追加の待機時間は短い時間です。 ## 3つのフレームの違い ブラウザウィンドウのフレームは、1280 x 800ピクセルでページを撮影します。アドレスバーには、URLのホスト名が表示されます。 ノートパソコンのフレームも1280 x 800ピクセルで撮影します。画面は75%に縮小され、ノートパソコンの形をした枠と台座に収まります。 スマートフォンのフレームは390 x 844ピクセルで撮影し、角丸の枠に入れます。モバイル表示のページに向いています。 ## 2回のレンダリングで作る理由 モックアップは、2回のレンダリングで作られます。1回目は、ページをJPEG（品質85）で撮影します。 ブラウザはその画像を、無料HTMLの上限である256 KBに収まるように圧縮し、フレームの中に配置します。2回目は、そのHTMLをPNGに変換します。 レンダリングはそれぞれ課金対象です。ログインしている場合、1つのモックアップは2回のレンダリングを使い、2クレジットかかります。アカウント登録なしの場合は、両方のレンダリングが無料の制限に数えられ、セキュリティ確認も2回行われます。ログインしている場合、結果には、かかったクレジットが表示されます。 ## 背景・余白・サイズの設定 背景は、Ocean、Sunset、Mintのグラデーション、「スレート」「白」「透明」から1つ選びます。「透明」を選ぶと、背景のない透過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ページ向けの簡単なスクリーンショット枠作成ツールとして使えます。このタイプのツールは、デバイスフレーム作成ツールとも呼ばれます。フレームはツールが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を保存して事例紹介やポートフォリオに配置できます。ブラウザウィンドウはデスクトップの見た目、ノートパソコンはノートパソコンの見た目、スマートフォンはモバイルページに向いています。1枚の画像なので、どこで使っても配置は同じです。 ### iPhoneやMacBookのモックアップも作れますか？ 厳密な意味では、iPhoneやMacBookのようなブランド付きの端末は表示しません。ノートパソコンとスマートフォンのフレームは、HTMLとCSSで描いた一般的な形です。ブランド付きの端末ではなく、端末の形をしたフレームで囲みます。 ## 関連ツール - [サイト スクリーンショットを無料で作成](https://aiipworld.com/ja/tools/website-screenshot/index.md) - [ページ全体のスクリーンショット](https://aiipworld.com/ja/tools/full-page-screenshot/index.md) - [HTML 画像 変換ツール](https://aiipworld.com/ja/tools/html-to-image/index.md) - [OGP 画像 作成ツール](https://aiipworld.com/ja/tools/og-image-generator/index.md) - [WebページをPDFに変換](https://aiipworld.com/ja/tools/url-to-pdf/index.md) ページ： https://aiipworld.com/ja/tools/website-mockup-generator/