ユーザーが最初に目にする画面

macOS アプリを自分で配布すると、ユーザーは .dmg ファイルをダウンロードしてダブルクリックします。その瞬間、Finder ウィンドウが一つ開きます。 このウィンドウが、ユーザーとあなたのアプリが出会う最初の画面です。

よく作られた .dmg ウィンドウは通常このように見えます — 背景にガイド画像が敷かれ、左にアプリアイコン、右に Applications フォルダーのショートカットが置かれています。ユーザーはアプリアイコンを Applications の方へドラッグしてインストールを完了します。この「ドラッグしてインストール」は、macOS インディーアプリの事実上の標準的なインストール体験です。

このウィンドウは自然にできあがるものではありません。背景画像、ウィンドウサイズ、アイコンの位置とサイズをすべて自分で設定する必要があります。このシリーズでは、その .dmg ウィンドウをデザインする方法を扱います。

このシリーズは、署名・公証・staple まで完了した .app が手元にあるという前提から始まります。つまり、配布直前のアプリです。その過程は Developer ID 直接配布シリーズで扱いました。.dmg は直接配布 (Developer ID) チャネルの成果物であり、Mac App Store チャネルとは無関係です。

このシリーズで作るもの

2 編にわたって、以下を整えます。

  • (1 編、この記事) create-dmg ツール + .app だけを格納するステージングフォルダー + 背景画像の準備
  • (2 編) ウィンドウ・アイコン・ドロップリンクの座標設計 + 背景画像と座標の整合 + 自動化

シリーズを終えた時点で、次のものが揃っているはずです。

  • .app だけを分離して格納したステージングフォルダー
  • @2x Retina の規約に準拠し、DPI が正規化された背景画像
  • ウィンドウサイズとアイコン位置がすべて座標で決まった create-dmg コマンド
  • 毎リリースそのまま再利用できる形

サンプルアプリ — FocusTimer

過去のシリーズと同様、架空の macOS アプリ FocusTimer (集中時間を管理するシンプルなタイマーアプリ) を例として使います。FocusTimer、パス、座標値などはすべてサンプルです。実際にはご自身のアプリに合わせて変更してください。

DMG とは何か

DMG (.dmg) は macOS のディスクイメージ (disk image) ファイルです。一つのファイルの中にフォルダー・ファイル構造をまるごと収めた「仮想ディスク」と考えてください。ユーザーが .dmg をダブルクリックすると、macOS がそれをディスクのようにマウントし、その内容が Finder ウィンドウとして開きます。

アプリ配布に DMG を使う理由は次のとおりです。

  • アプリ (.app) は実際にはフォルダーです。フォルダーをそのままインターネットに公開するのは難しいですが、DMG で包むとファイル一つになります。
  • DMG ウィンドウの中に Applications フォルダーのショートカットを一緒に入れることで、ユーザーがドラッグ一つでインストールできるよう案内できます。
  • ウィンドウの背景、アイコンの位置などウィンドウの見た目をデザインでき、インストール体験をすっきりさせることができます。

ツール — create-dmg

DMG を手作りするには、hdiutil でイメージを作成し、マウントし、AppleScript で Finder ウィンドウを操作してアイコンを配置し、再度アンマウントするなど、複数の手順を踏む必要があります。面倒でミスが起きやすいです。

create-dmg はこのプロセスをコマンド一つにまとめてくれるオープンソースツールです。背景画像、ウィンドウサイズ、アイコン座標をオプションとして渡すだけで、完成した .dmg を作成してくれます。

Developer ID 直接配布シリーズ 1 編で事前ツールをインストールした際にすでにインストール済みです。まだの場合は Homebrew でインストールします。

brew install create-dmg

create-dmg という名前のプロジェクトが 2 つあります。この記事で使用するのは Homebrew でインストールされるコマンドラインツール (create-dmg/create-dmg) です。オプション名が異なる別のプロジェクトと混同しないでください。

ステップ 1 — .app だけを格納するステージングフォルダー

DMG の中にはアプリアイコン一つだけが綺麗に入っているべきです。しかし、アプリをビルド・エクスポートすると、その結果フォルダーには .app のほかに DistributionSummary.plist やパッケージングログなどの副産物ファイルも含まれています。このフォルダーをそのまま DMG にすると、副産物もウィンドウに表示されてしまいます。

そのため、.app だけを空のフォルダーにコピーして分離してから、そのフォルダーを DMG の材料として使います。この分離用フォルダーを一般にステージング (staging) フォルダーと呼びます。

# 副産物と混在しないよう .app だけを空のフォルダーにコピー
DMG_STAGE="build/dmg-stage"
rm -rf "$DMG_STAGE"
mkdir -p "$DMG_STAGE"
cp -R "build/export/FocusTimer.app" "$DMG_STAGE/"

これで build/dmg-stage/ の中には FocusTimer.app が一つだけになります。DMG を作成する際に create-dmg にこのフォルダーを指定すると、ウィンドウにはアプリアイコンだけが綺麗に表示されます。(Applications フォルダーのショートカットは 2 編で create-dmg のオプションとして自動生成されます。)

ステップ 2 — 背景画像の準備

DMG ウィンドウデザインの核心は背景画像です。ここで最も詰まりやすい部分ですので、丁寧に見ていきましょう。

キャンバスサイズ — なぜ 1200×800 なのか

2 編で create-dmg に --window-size 600 400 を渡して DMG ウィンドウのサイズを決めます。このとき 600 と 400 の単位はピクセルではなくポイント (point) です。ポイントは macOS が使う論理的な座標単位です。

Retina ディスプレイでは、1 ポイントが 2 ピクセルとして描画されます。したがって、600×400 ポイントのウィンドウを隙間なく、鮮明に満たすには、背景画像はその 2 倍の 1200×800 ピクセルで作成する必要があります。これが @2x (2 倍解像度) の規約です。

まとめると — ウィンドウは 600×400 ポイント、背景画像は 1200×800 ピクセル。 この 2 倍の関係は、2 編で座標を設定する際にも重要になります。

背景には何を描くか

ここでよくある誤解を一つ解消しておきます。背景画像にはアプリアイコンや Applications フォルダーのアイコンを描き込みません。 それらのアイコンは create-dmg が実際のファイルをウィンドウ上に配置してくれます (2 編)。

背景画像に入れるのは装飾とガイド要素だけです。

  • アプリアイコンから Applications フォルダー方向を向く矢印 — ユーザーの視線と手を「こちらにドラッグしてください」と誘導する最も一般的なデザインです。
  • 必要であれば「ここにドラッグしてください」などの短い案内文
  • ブランドカラーや薄い背景パターン

つまり背景画像は**「アイコンが置かれる場所は空けておき、その間をつなぐガイドラインだけを描いた絵」**です。アイコンが置かれる左右 2 カ所 (2 編でそれぞれ 100 ポイント = 200 ピクセルのサイズ) は空けておき、その中央に矢印を配置する形です。

重要な落とし穴 — DPI

背景画像で最も頻繁に引っかかる落とし穴が DPI (1 インチあたりのピクセル数) です。

画像エディターから PNG をエクスポートすると、ファイルにはピクセル数 (1200×800) だけでなく DPI 値も一緒に保存されます。Finder は DMG の背景を描画する際に、この DPI を見て「この画像が何ポイントのサイズか」を逆算します。計算はおおよそ次のようになります。

ポイントサイズ = ピクセル数 ÷ (DPI ÷ 72)
  • DPI が 144 の場合: 1200 ÷ (144 ÷ 72) = 1200 ÷ 2 = 600 ポイント。ウィンドウ (600pt) をぴったり埋めます。✅
  • しかし一部の画像エディター (例: Pixelmator Pro) はエクスポート時に任意の DPI 値 (例: 338) を埋め込みます。DPI が 338 の場合: 1200 ÷ (338 ÷ 72) ≈ 256 ポイント。ウィンドウ (600pt) よりはるかに小さくなり、背景がウィンドウ左上隅に縮んで描画されます。❌

ピクセル数は同じ 1200×800 なのに、DPI が一つ違うだけで背景が崩れます。初めて遭遇すると原因を見つけるのが本当に難しいです。

解決策は、エクスポートした PNG の DPI を 144 に強制的に統一することです。macOS にデフォルトで組み込まれている sips コマンドで一行で解決します。

sips -s dpiWidth 144 -s dpiHeight 144 dmg-background.png

この一行を実行すれば、エディターがどんな DPI を埋め込んでいても 144 に設定され、1200×800 ピクセルが正確に 600×400 ポイントとして解釈されます。

要点 — 背景画像は ① 1200×800 ピクセルで作成し、② エクスポート後に sips で DPI を 144 に正規化する。この 2 つを守れば DPI の落とし穴を避けられます。

1 編まとめ

ここまで進んだ方は、以下が揃っているはずです。

  • ✅ create-dmg ツールのインストール + 役割の理解
  • ✅ .app だけを分離して格納したステージングフォルダー (build/dmg-stage/)
  • ✅ 1200×800 ピクセルで作成し、DPI を 144 に正規化した背景画像

材料は揃いました。しかし、まだ背景画像を表示してアイコンを配置するウィンドウがありません。ウィンドウをどのくらいの大きさで開くか、アプリアイコンと Applications ショートカットをそれぞれどこに置くか — これらすべては create-dmg に渡す座標で決まります。

次の編では、その座標を一つずつ設計し、背景画像の矢印が 2 つのアイコンの間に正確に配置されるよう背景のピクセル座標とウィンドウのポイント座標を合わせる方法、そしてこのプロセスを毎リリースに再利用できるよう自動化する方法を扱います。