座標で完成する DMG レイアウト

1 編では create-dmg ツールを紹介し、.app だけを格納したステージングフォルダーと背景画像を準備しました。

いよいよ最後のピース、レイアウトです。DMG ウィンドウをどのくらいの大きさで開くか、アプリアイコンと Applications ショートカットをそれぞれどこに置くか — これらすべては create-dmg に渡す座標で決まります。この記事ではその座標を一つずつ設計します。

1 編と同様、FocusTimer、座標値などはすべてサンプルです。

create-dmg コマンドの全体像

まず、完成したコマンドの全体を見てみましょう。サンプルアプリ FocusTimer 1.0 の DMG を作成するコマンドです。

create-dmg \
  --volname "FocusTimer 1.0" \
  --background build/dmg-background.png \
  --window-pos 200 120 \
  --window-size 600 400 \
  --icon-size 100 \
  --icon "FocusTimer.app" 175 190 \
  --hide-extension "FocusTimer.app" \
  --app-drop-link 425 190 \
  --no-internet-enable \
  "build/FocusTimer-1.0.dmg" \
  "build/dmg-stage/"

最後の 2 行が出力と材料です。

• build/FocusTimer-1.0.dmg — 作成される DMG ファイルのパス
• build/dmg-stage/ — 1 編で .app だけを格納したステージングフォルダー

その上の -- で始まる行がウィンドウとアイコンをデザインするオプションです。一つずつ見ていきましょう。

座標系を理解する

オプションを見る前に、座標がどのように機能するかを整理しておきます。

create-dmg の位置座標はすべて DMG ウィンドウ内の座標です。単位は 1 編で説明したポイント (point) です。

• 原点 (0, 0) はウィンドウの左上隅です。
• X は右に行くほど大きくなり、Y は下に行くほど大きくなります。(数学のグラフとは異なり、Y が下方向に増加する点に注意してください。)
• ウィンドウサイズを 600 400 に設定した場合、座標は横方向 0〜600、縦方向 0〜400 の範囲で動きます。

アイコンの位置座標は、そのアイコンの中心点を指します。アイコンの左上隅ではなく、真ん中です。

オプション一覧

いくつかは特に補足する価値があります。

--window-pos と --window-size — この 2 つは混同しやすいです。--window-pos はユーザーが DMG を開いたときそのウィンドウが画面 (デスクトップ) のどこに表示されるかで、--window-size はそのウィンドウ自体のサイズです。座標設計で重要なのは --window-size です。

--icon-size 100 — ウィンドウ内のアイコンが 100 ポイントのサイズで描画されます。この値は背景画像をデザインする際にも知っておく必要があります。アイコンが占める 100 ポイント (= 背景画像では 200 ピクセル) のスペースは背景で空けておく必要があるためです。

--icon と --app-drop-link — この 2 つがウィンドウの左右 2 つの主役です。--icon はユーザーがドラッグするアプリアイコン、--app-drop-link はドラッグ先の**Applications フォルダーショートカット**です。--app-drop-link はシンボリックリンクを別途作成する必要はなく、create-dmg が自動的に Applications ショートカットを作成して配置してくれます。

--hide-extension — これがないと、アイコンの下に FocusTimer.app と拡張子まで表示されます。非表示にすれば FocusTimer だけがすっきり表示されます。

--no-internet-enable — 「インターネット有効化 (internet-enable)」は昔の Safari がダウンロードした DMG を自動処理していた古い機能で、現在は使われていません。このオプションを指定すると、create-dmg がその処理ステップと関連する警告をスキップします。

座標設計 — 2 つのアイコンの配置

いよいよ核心です。ウィンドウサイズを 600 400 に設定したので、その中でアプリアイコンと Applications ショートカットをどこに置くか決めます。

サンプルコマンドでは次のように設定しています。

• アプリアイコン: --icon "FocusTimer.app" 175 190
• Applications ショートカット: --app-drop-link 425 190

これらの数値の意味を解説します。

X 軸 (水平方向) — 175 と 425

ウィンドウの幅は 600 ポイント、その中央は 300 です。2 つのアイコンを 175 と 425 に置くと、それぞれ中央から左に 125、右に 125 離れた位置になります。つまり、2 つのアイコンが中央を基準に左右対称に配置されます。アプリアイコンが左、Applications が右なので、「左から右へドラッグ」という自然な方向が生まれます。

Y 軸 (垂直方向) — 両方とも 190

ウィンドウの高さは 400 ポイント、その中央は 200 です。2 つのアイコンを同じ 190 に置くと、同じ高さに並んで配置され、正中央 (200) よりほんの少し上に位置します。アイコンのラベルがアイコンの下に付くため、少し上に上げておくと、ラベルも含めて視覚的に中央に来ます。

座標に正解があるわけではありません。上記の値は「600×400 のウィンドウに 100 ポイントのアイコン 2 つを左右対称に並べる」一つのバランスの取れた例に過ぎません。ご自身の背景デザインに合わせて自由に調整してください。

背景画像と座標の整合

ここで 1 編の @2x 規約が再び登場します。

アイコン座標 (175,190、425,190) はウィンドウのポイント座標です。しかし背景画像はその 2 倍の 1200×800 ピクセルです。背景画像に矢印を描くときは、ウィンドウ座標に2 を掛けたピクセル座標で考える必要があります。

背景画像のピクセル座標 = ウィンドウのポイント座標 × 2

サンプルの 2 つのアイコンを背景画像のピクセル座標に換算すると次のようになります。

したがって、背景画像 (1200×800) に視線誘導の矢印を描く際は、2 つのアイコンの位置であるピクセル (350, 380) と (850, 380) の間に描く必要があります。アイコンサイズが 100 ポイント = 200 ピクセルなので、各アイコンが占める 200 ピクセルの領域は空けておき、その間のスペースに矢印を配置すればいいです。

背景画像の絵と create-dmg のアイコン座標を同じ基準で合わせることが DMG デザインの核心です。ずれると矢印がアイコンを外れたり、アイコンに重なって描かれてしまいます。

検証と微調整

コマンドを実行すると build/FocusTimer-1.0.dmg が作成されます。作成された DMG をダブルクリックして実際に開いてみてください。

• 背景がウィンドウを隙間なく埋めているか？(隅に縮んでいる場合 → 1 編の DPI の落とし穴。sips で 144 に正規化する)
• アプリアイコンと Applications が背景の矢印の両端に適切に配置されているか？
• アイコンのラベルが切れたり重なったりしていないか？

座標は一度で完璧に合うことはほとんどありません。--icon と --app-drop-link の数値を少しずつ変えながらコマンドを再実行し、目視で確認するプロセスを数回繰り返せば大丈夫です。一度座標を確定したら、その後はほとんど変更する必要がありません。

毎リリースに再利用 — 自動化

DMG デザインは事実上一度だけ行う作業です。背景画像と座標を一度確定したら、その後のすべてのリリースで全く同じ設定を再利用します。

そのため、この create-dmg の呼び出しはリリースビルドスクリプトの一ステップとして組み込んでおくのが良いでしょう。スクリプトでは通常このような流れになります。

1. 署名・公証・staple が完了した .app をステージングフォルダーにコピー (1 編)
2. 背景画像をコピーした後、sips で DPI を 144 に正規化 (1 編の落とし穴を防ぐ)
3. 上記で設計した座標で create-dmg を実行
4. ステージングフォルダーなどの一時ファイルを削除

バージョン番号 (--volname の 1.0、出力ファイル名の FocusTimer-1.0.dmg) だけがリリースごとに変わるため、その部分だけをスクリプトの変数として切り出しておけば、毎回コマンドを修正する必要がなくなります。背景画像のパスとすべての座標は固定値としておきます。

背景画像の DPI 正規化 (sips) をスクリプトが毎回自動的に実行するようにしておくことをお勧めします。デザインの原本を再エクスポートして差し替えた際に DPI 正規化を忘れても、スクリプトが常に修正してくれるためです。

シリーズまとめ

2 編にわたる DMG デザインが完了しました。これで次のものが揃っています。

• ✅ (1 編) create-dmg + .app ステージングフォルダー + @2x・DPI 正規化された背景画像
• ✅ (2 編) ウィンドウ・アイコン座標の設計 + 背景のピクセル座標とウィンドウのポイント座標の整合 + 自動化

重要なポイントを改めて整理します。

• DMG ウィンドウは 600×400 ポイント、背景画像はその 2 倍の 1200×800 ピクセル (@2x)。
• 背景 PNG の DPI は必ず 144 に正規化する — そうすることで背景がウィンドウをぴったり埋める。
• アイコン座標はウィンドウ内のポイント座標、背景の絵の座標はその 2 倍のピクセル座標 — 両者を同じ基準で合わせる。
• 一度確定したデザインはビルドスクリプトに組み込み、毎リリースそのまま再利用する。

小さな矢印一つ、アイコンの位置が数ポイントずれるだけで、ユーザーの第一印象が変わります。.dmg ウィンドウはユーザーとあなたのアプリが初めて出会う場所ですから、一度丁寧にデザインしておく価値があります。

参考資料

• create-dmg — GitHub
• sips — macOS コマンドマニュアル