サイトのモックアップ（ノートPCとスマホのスクリーンショット）

サイトのモックアップ（ノートPCとスマホのスクリーンショット）: 用途

パソコン用のサイトのスクリーンショットと、必要ならスマホ用も選んでください（なければスマホにも同じ画像が使われます）。ツールが画像をノートPCとスマホにはめ込み、影を付けて、グラデーションまたは透明の背景に配置します。

横長、正方形、Instagramの縦長の各サイズと、リンク用画像（1200×630）があります。

使い方

1. パソコン用とスマホ用のスクリーンショットを選びます。
2. 背景の色とサイズを選びます。
3. モックアップをPNGでダウンロードします。

使うタイミング

• 完成したサイトをクライアントに見せる。
• デザイナーや代理店のポートフォリオ投稿。
• 提案書や見積書用の画像。

よくある質問

どのサイズのスクリーンショットを使えばいいですか？

ノートPCには、16:10または16:9の比率の画面全体のスクリーンショット（例：1440×900）。スマホには、端末のスクリーンショットかブラウザのスマホ表示のスクリーンショット（例：390×844）です。大きい画像は上から切り取られます。

パソコンでスマホ版のスクリーンショットを撮るには？

Chromeでデベロッパーツール（F12）を開き、デバイスモード（Ctrl+Shift+M）をオンにしてスマホを選び、3点メニューの「スクリーンショットをキャプチャ」を使います。

本当に無料？

はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。

関連ツール