Mac ウィンドウモックアップ

アプリのスクリーンショットを、すっきりした macOS 風のウィンドウ枠に入れて見せられます。

ブラウザ内で動作
アップロード不要
アカウント不要

ブラウザツールを読み込んでいます…

Mac ウィンドウモックアップでできること

アプリの内容だけに切り抜いたスクリーンショットは周りのウィンドウがなくなり、スライドやローンチの投稿でただの長方形だと未完成に見えることがあります。このモックアップは、おなじみの赤・黄・緑のボタンが付いた macOS 風のタイトルバーと、アプリ名や現在の画面名などを入れられる中央の「ウィンドウのタイトル」を追加します。

「外観」を切り替えると、ダークモードのアプリ向けの暗いタイトルバーになります。ウィンドウはブラッシュのグラデーションの上に、角の丸み 12 px と影付きで置かれます。「余白」と「影」は「その他のオプション」にあります。ウェブアプリなら、ブラウザ枠でブラウザ上で動くことを伝えられます。

例

選ぶもの

1440 × 900 px のアプリのスクリーンショット
ウィンドウのタイトル：Lumen — 請求（既定値）

ダウンロード

screenshot-mac-window.png
1584 × 1084 px：40 px のタイトルバー、72 px のブラッシュの余白

余白は四辺とも幅の 5% です。この幅では、タイトルバーの高さは 40 px です。

Mac ウィンドウモックアップの使い方

ウィンドウの内容に切り抜いたアプリのスクリーンショットを、「ファイルを選択」で開くか貼り付けます。
「ウィンドウのタイトル」を入力し、「外観」と「背景」を選びます。
「その他のオプション」で「余白」と「影」を調整し、「.png をダウンロード」をクリックします。

知っておきたいこと

タイトルバーはシンプルな 1 行のバーです。ツールバーのアイコン、サイドバー、タブはありません。
長いタイトルは、ウィンドウのボタンと重ならないよう省略記号で短縮されます。
ウィンドウのボタンは常に macOS 風のカラーです。このページには Windows のタイトルバーはありません。

Mac ウィンドウモックアップについてよくある質問

Mac がなくても Mac ウィンドウのスクリーンショットを作れますか？

はい。どの OS でもアプリの内容だけをキャプチャしてここに読み込めば、その上に macOS 風のタイトルバーが描かれます。「ウィンドウのタイトル」をアプリに合わせれば、ネイティブのウィンドウのように見えます。

macOS のウィンドウのスクリーンショット（Cmd+Shift+4、Space）を使わないのはなぜですか？

Mac ならその方法も使えますが、大きな透明の影と、ごちゃごちゃした実際のタイトルバーまで写り込みます。このツールならすっきりした統一感のあるバーと背景が付くため、資料内のすべてのスクリーンショットがそろいます。

ウィンドウにはどんなタイトルを付ければよいですか？

「Lumen — 請求」のように、アプリ名に続けて画面名を書くと、実際の Mac アプリのウィンドウ名と同じ形になります。ボタンだけのすっきりしたバーにするなら空欄にしてください。