Android 向けの .NET MAUI で「<MauiSplashScreen BaseSize="..."> を変えてもロゴの見た目が変わらない」という相談はとても多いテーマです。本記事では、BaseSize の正体（ビルド時のヒントにすぎない）と、Android 12 以降の起動画面が OS によって強制レイアウトされる仕組みを、図解・コード例・具体的な SVG 編集手順まで踏み込んで解説します。最後に“確実にサイズを変える”ための実務的レシピもまとめます。
.NET MAUI スプラッシュスクリーンの BaseSize が効かない問題：結論から
- BaseSize はズームではない：MAUI のビルド時にアセット生成へ「この画像の基準は W×H（密度 1.0 相当）」と伝えるメタ情報であり、実行時の描画サイズは変えられません。
- Android 12+ は OS が自動スケーリング：新スプラッシュ API により、ロゴは中央配置＋システム既定のボックスにフィットするようOS 側で拡大・縮小されます。
- 見た目を変える最短の実務解：SVG を直接編集（viewBox／transform／余白追加）し、Clean → Rebuild で再生成させる。これが最も再現性が高く、チーム共有もしやすい。
質問の整理
- 対象：Android 用 .NET MAUI アプリ
- 設定：
MauiSplashScreenにsplash.svgを指定。BaseSize="520,800"などを変更してもロゴの見た目（大きさ）が変わらない。 - 疑問：BaseSize の本来の役割は？ 大きさを変えるにはどうすれば？
BaseSize の正体と内部動作（ビルド時ヒント）
MAUI はビルド時に Resizetizer（アセット生成タスク）を使って、各プラットフォーム用の画像／ベクター資産を作ります。<MauiSplashScreen BaseSize="W,H"> は、「このソース画像は密度 1.0（mdpi/1x）相当で W×H px」という基準密度を示すヒントです。これに基づき、次のような派生アセットが生成されます。
| プラットフォーム | 生成される代表的な資産 | BaseSize の使われ方 |
|---|---|---|
| Android（<12） | drawable-dpi（mdpi/hdpi/xhdpi/…）の PNG または VectorDrawable | mdpi=BaseSize として他密度へ倍率展開（1.5x, 2x, 3x など） |
| Android（12+） | スプラッシュ API 用のロゴ drawable（OS が使用） | 生成までは同じ。実行時の最終スケールは OS が決定 |
| iOS | 1x/2x/3x 画像セット | 1x=BaseSize として倍率展開 |
ポイントは、BaseSize は「アセットの基準サイズ」であり、「起動時にどう見えるか」は別の話だということ。Android では特に 12 以降、最終的な大きさはOS のスプラッシュ描画ルールに委ねられます。
Android 12 以降のスプラッシュの仕組み：OS が主導
Android 12（API 31）から、アプリ起動時のスプラッシュはシステム UI の一部として描画され、アプリ側が自由にレイアウトする余地は大きく制限されました。OS は以下の要件に従ってロゴを自動配置します。
- 画面中央にロゴ（animatedIcon/static drawable）を配置
- 定義済みのボックス（マスク）に収まるよう等比スケーリング
- 背景色はテーマ／指定色、ブランディング画像は別枠（任意）
このため、BaseSize の数値を変えても「見た目のスケール」は基本的に変わりません。変わるのは「ビルド成果物の解像度」だけで、OS の最終スケール計算に対して影響は限定的です。
「じゃあどうやってサイズを変えるの？」３つの実務パターン
パターン A：SVG を直接スケーリング（推奨）
最もシンプルでチームに共有しやすいのが、SVG 内でロゴ自体を拡大・縮小する方法です。viewBox と transform を使えば、見た目サイズを意図通りに調整できます。
- SVG をエディタで開く（Figma/Illustrator/Inkscape かテキストエディタ）
- viewBox を把握：
<svg viewBox="0 0 520 800">のように「座標系の幅×高さ」を確認 - ロゴのルート要素を
<g>でラップし、transform="scale(0.85)"などで等比縮小 - 縮小で中央からズレる場合は
translateを併用（例：transform="translate(39,60) scale(0.85)"） - 「小さく見せたい」なら透明の余白（背景に
fill="none"の矩形を追加）で囲うのも効果的 - 保存 → Clean → Rebuild
例：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 800">
<rect width="520" height="800" fill="none"/> <!-- 透明の余白 -->
<g transform="translate(26,40) scale(0.9)">
<!-- ロゴのパス群 -->
<path d="M...Z" fill="#ffffff" />
</g>
</svg>
メリット：Android 12+／旧 Android／iOS すべてで一貫した見た目に近づけられる／ソース管理しやすい。
注意：stroke の太さが縮小で相対的に太く（または細く）見えることがあるので、vector-effect="non-scaling-stroke" の有無や stroke-width の再調整を検討。
パターン B：パディング（余白）を意図的に増やす
ロゴの周囲に透明の余白を足すと、OS の「等比フィット」時に相対的に小さく見えます。ロゴを小さく見せたいときに有効です。上の例の <rect fill="none"> はまさにこのテクニックです。逆に大きく見せたいなら、余白を削る（ロゴのパスを viewBox いっぱいまで広げる）と効果的です。
パターン C（Android 上級者向け）：drawable の <inset> を使う
Android のスプラッシュは drawable（アイコン）を受け取り、OS がそれをボックスに当てはめます。drawable 側を <inset> で包むと、アイコンに「装飾的な余白」を持たせられ、見た目のスケールを微調整できます。
例（Resources/drawable/my_splash_logo.xml）：
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="24dp"
android:insetTop="24dp"
android:insetRight="24dp"
android:insetBottom="24dp">
<vector
android:width="520dp"
android:height="800dp"
android:viewportWidth="520"
android:viewportHeight="800">
<path android:fillColor="#FFFFFFFF" android:pathData="M...Z"/>
</vector>
</inset>
そして styles.xml（v31 以上）で、MAUI が設定するデフォルトの windowSplashScreenAnimatedIcon を @drawable/my_splash_logo に差し替えます。
※プロジェクトの生成物や MAUI 既定テーマと競合しないよう、ファイル名とターゲット（values-v31）の使い分けに注意。ビルド後は obj/…/res/ に期待通り反映されているか確認しましょう。
BaseSize をいじっても変わらないのは正常動作
BaseSize を 520×800 から 260×400 にしても、生成される mdpi の基準が変わるだけで OS の最終スケールは同じです。以下のイメージで理解すると納得しやすいでしょう。
| 段階 | 処理主体 | 何をしているか | BaseSize の影響 |
|---|---|---|---|
| ビルド | MAUI/Resizetizer | 各密度向けアセット生成（mdpi/hdpi/…） | ある（mdpi の基準ピクセルが変わる） |
| 起動時（Android 12+） | OS（システム UI） | 中央配置・既定ボックスへ等比スケーリング | なし（見た目のサイズは OS が決める） |
実務レシピ：SVG を使ったサイズ調整の手順（完全版）
- 現在のソースを把握
Resources/Splash/splash.svgのviewBoxとwidth/heightを確認。width/heightは未指定または100%推奨。- ロゴの原点（0,0）と中心が viewBox のどこにあるかを把握。
- スケール戦略を決める
- 小さく見せたい：
scale(0.85)などで縮小、または透明余白を足す。 - 大きく見せたい：
scale(1.1)などで拡大、または余白を減らす（ロゴを viewBox いっぱいに）
- 小さく見せたい：
- 中心合わせ
- 縮小すると位置がズレやすいので
translateを併用して中央に戻す。 - 中心座標は
viewBoxの半分（例：520×800 → 中心 260,400）。
- 縮小すると位置がズレやすいので
- 塗りと線を調整
- 線（
stroke）を使うロゴは縮小で相対的に細/太に見えます。stroke-widthを調整、またはvector-effect="non-scaling-stroke"を検討。 - 複雑なフィルター（ブラー、マスク）はビルドで落ちることがあるため、できるだけパスに焼き込む（アウトライン化）。
- 線（
- 保存 → Clean → Rebuild
- MAUI のアセット生成は インクリメンタルビルド が効くため、必ず Clean を挟むと確実です。
- 出力確認：
obj/Debug/net8.0-android/res/drawable-*に新しい生成物が並んでいるかを見る。
- 実機で確認
- Android 12 以上（Pixel 系）と 11 以下（古めの端末/エミュレータ）で差を比較。
- 画面比率やカットアウト（ノッチ）でも体感が変わるため、複数端末で見るのが安全。
コード例：XAML と SVG の最小構成
プロジェクトファイル（.csproj）の例：
<ItemGroup>
<MauiSplashScreen Include="Resources\Splash\splash.svg"
Color="#121212"
BaseSize="520,800" />
</ItemGroup>
縮小をかけた splash.svg（抜粋）：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 800">
<!-- 透明余白で安全マージンを確保 -->
<rect width="520" height="800" fill="none"/>
<!-- ロゴ本体を 90% に縮小して中央寄せ -->
<g transform="translate(26,40) scale(0.9)">
<path d="M...Z" fill="#FFFFFF" />
</g>
</svg>
ビジュアルを安定させるためのヒント集
- 単色化：スプラッシュのロゴはほとんどのブランドで単色または 2 色以内が無難。コントラスト比を上げるとあらゆる端末で映えます。
- 角丸や細線の最小値：極細の線は縮小で消える／ガタつくことがあります。最小 2～3 px（mdpi 換算）を目安に。
- 余白の黄金律：ロゴの外接矩形に対して上下左右 10～20% 程度の透明余白を確保すると、OS の自動スケールでも安定します。
- 背景色：
MauiSplashScreenのColorは「起動画面の背景」。ブランドカラーを正確に使い、ダーク／ライトに依存しない色を選ぶと安全です。
よくある落とし穴と対処
| 症状 | 原因 | 対処 |
|---|---|---|
| BaseSize を変えても大きさが同じ | BaseSize はビルド時ヒント。実行時のスケールは OS が決める | SVG を編集（scale / 余白追加）。Clean → Rebuild |
| 端末によって見え方が違う | 画面比率・解像度・Android バージョン差 | 複数端末で検証／余白を多めに取る |
| 線が太く（または細く）見える | 等比縮小で stroke が相対変化 | stroke-width の再調整 or non-scaling-stroke |
| ビルド後も変化しない | 生成キャッシュが残っている | Clean／bin・obj 削除→再ビルド、生成物を obj/.../res/ で確認 |
| Android 12 だけやけに大きい／小さい | OS のスプラッシュ API による統一スケール | SVG で見た目を固定、または <inset> で調整 |
前提知識：ベクター（SVG）推奨の理由
- 劣化しない：高解像度端末でもエッジが崩れない。
- 1 ソースで全密度対応：PNG を密度別に量産する運用コストが不要。
- ビルド時間と APK サイズ：PNG 多数より小さく、更新差分も取りやすい。
PNG/JPG を使う場合は、各密度（mdpi/hdpi/…）に対して適切な画素サイズを出し分けないと、OS のスケーリングでぼやけやすくなります。スプラッシュに限っては SVG 一択と考えて問題ありません。
「BaseSize の本来の役割」を正しく使う
BaseSize は、「ソースの基準ピクセル」を Resizetizer に教える設定です。例えば BaseSize=520×800 なら mdpi を 520×800 px とみなし、hdpi=780×1200、xhdpi=1040×1600… といった倍率展開が行われます。これは主に ビルド成果物の解像度に効きますが、Android 12+ では最終の見た目サイズを直接コントロールしません。従って「BaseSize を調整して見た目をコントロールする」という設計は、現在の Android 環境では成立しにくいのです。
Android 11 以下もサポートするプロジェクトでの考え方
Android 11 以下ではアプリ側のテーマやレイアウトで起動画面を構成するため、端末依存で「やや大きく」出ることがあります。SVG の余白をやや多めに取り、12+ でも 11 以下でも自然に見える折衷案に寄せるのが実務的です。ブランドガイドラインが厳密な場合は、12+／11 以下で SVG を分ける（ビルド条件で切替）という戦略も可能です。
検証チェックリスト
- Pixel（12+）と Galaxy／Xperia（多サイズ）で確認
- ライト／ダークで背景コントラストを再確認
- 横向き起動（ゲームなど）でのセンタリング
- 低性能端末でのブラー／アンチエイリアスの出方
- CI ビルドで
bin/objをキャッシュしていないか（生成物が古い可能性）
トラブル対応：それでもサイズが合わないとき
- 生成物の突き合わせ：
obj/Debug/net8.0-android/res/以下のdrawable-*に想定のロゴが入っているか。 - テーマ差し替えの影響：独自
styles.xmlでwindowSplashScreenAnimatedIconを別 drawable にしていないか。 - SVG の互換性：フィルター／マスク／グラデーションメッシュは避け、パスに焼く。
- キャッシュのクリア：IDE を再起動し、
bin/objを削除してからビルド。
サンプル：実案件での調整ダイアリー（擬似例）
要求：「ロゴが大きく見えすぎる。ベースは 520×800、余白をもう少し持たせたい。」
- 初回：
scale(0.9)で縮小。中心ズレが発生 →translate(26,40)で補正。 - 2 回目：曲線の細線がかすれる →
stroke-widthを +0.5 px、アンチエイリアス前提で微調整。 - 3 回目：Android 11 端末で相対的に大きい → 透明余白を上下 5% 追加。
- 最終：ブランドレビュー通過。iOS でも同じ SVG を使い回し、コスト削減。
Q&A（よくある質問）
Q：BaseSize を大きくすれば、大きく表示されますか？
A：いいえ。BaseSize はビルド時の基準で、Android 12+ の見た目は OS が決めます。大きさを変えるには SVG を編集してください。
Q：BaseSize はいくつにするのが正解？
A：ロゴの元デザインに近い値（mdpi 相当）で問題ありません。最終見た目は SVG 側で担保する方が安定します。
Q：PNG にすればコントロールしやすい？
A：いいえ。PNG にしても OS の最終スケールは同じですし、密度別の量産・画質低下のリスクが増えます。SVG を推奨します。
Q：Android 12+ だけ別サイズにしたい。
A：ビルド条件で drawable を切り替えるか、values-v31 のスタイルを分岐させる設計が必要です。まずは SVG の余白やスケールで全体最適を目指すのが簡単です。
最小チェックリスト（この順に実行）
- SVG を編集（
scale/viewBox/余白）して意図のサイズに。 - プロジェクトを Clean → Rebuild。
obj/.../res/の生成物を目視確認。- Android 12+／11 以下の端末で見比べ。
- 必要なら
<inset>やvalues-v31のスタイルで最終微調整。
まとめ
- BaseSize は「基準サイズの宣言」でありズームではない。実行時の見た目は変わらない。
- Android 12+ は OS がロゴを強制レイアウト。アプリ側が任意のピクセルで支配することはできない。
- 見た目の大きさを変える最短手段は SVG を編集。
viewBox、transform、透明余白の 3 点で制御し、Clean → Rebuild で反映。 - PNG より SVG を優先し、複数端末での検証と生成物の確認を習慣化する。
付録：BaseSize と密度倍率の目安（参考）
| 密度（Android） | 倍率 | BaseSize が 520×800 の場合 |
|---|---|---|
| mdpi | 1.0x | 520×800 |
| hdpi | 1.5x | 780×1200 |
| xhdpi | 2.0x | 1040×1600 |
| xxhdpi | 3.0x | 1560×2400 |
| xxxhdpi | 4.0x | 2080×3200 |
この表はあくまで生成時の解像度目安であり、実行時の見た目スケールは OS が決める点を忘れないでください。
付録：チェック用テンプレート SVG
サイズ調整の検証に使える単純なテンプレート（中央円＋テキスト）。scale／translate の効果が視覚的に確認しやすい構成です。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 800">
<rect width="520" height="800" fill="none"/>
<g transform="translate(52,80) scale(0.8)">
<circle cx="208" cy="288" r="160" fill="#FFFFFF"/>
<text x="208" y="300" font-family="Arial, sans-serif" font-size="72"
text-anchor="middle" fill="#121212">MAUI</text>
</g>
</svg>
最後に：チーム共有のコツ
- デザインと開発の共通言語を作る：「Android 12+ は OS スケール」を前提ルールとして周知。
- SVG ガイド：許可するエフェクト／最小線幅／余白率／色数などの規定を README に明文化。
- PR にビルド成果物のサムネイルを添付：検証工数を圧縮。
要点の再掲：
BaseSize は「ソース画像の基準サイズ」を Resizetizer に伝えるだけで、実行時の表示サイズは OS が決定します。見た目の大きさを変えたい場合は、SVG を直接編集してスケールや余白を調整し、Clean → Rebuild で新しいアセットを生成させましょう。これが .NET MAUI のスプラッシュスクリーンを最短距離で思い通りに整える方法です。
コメント