アプリアイコン マスクプレビュー（iOS / Android / macOS）

アプリ開発者・デザイナー向けのオンラインプレビューツールです。1024pxのアイコン画像をアップロードするだけで、iOSのSquircle（スーパー楕円）、macOS、Androidのアダプティブアイコン（円形・角丸）など各OSのホーム画面で適用されるマスク形状を即時に確認できます。プレビュー結果は資料・ポートフォリオ用にPNG画像としてダウンロードも可能です。

💡 ツール概要

iOS / macOS / Android のホーム画面でアイコンがどう見えるかを、実機にインストールする前に素早く確認できるプレビューツールです。デザインの最終チェックや、ロゴが意図せずトリミングされないかの確認に役立ちます。

• iOS / macOS / Android の主要マスクに対応: iOS Squircle、macOS、Android Circle / Squircle の代表的なアイコン形状を切り替えて確認できます。
• セーフエリアガイド表示: 中央の安全領域を示すガイド線をプレビューに重ねて、ロゴなどの主要素がマスクで切り取られないか確認できます（ガイドはプレビュー専用で、ダウンロード画像には含まれません）。
• 即時プレビュー: OSやガイドの表示設定を変更すると即座にプレビューに反映されます。
• PNGダウンロード: プレビュー結果はマスク適用済みPNGとして書き出せます。資料・ポートフォリオ・クライアント確認用に便利です（ストア提出用のアイコンは1024px正方形のマスクなしPNGを使う必要があります）。
• プライバシー保護: 画像データはサーバーに送信されず、すべてお使いのブラウザ内でのみ処理されます。

🧐 よくある質問

Q. 「Squircle（スクワークル）」とは何ですか？

A. 正方形と円の中間の形状で、iOSやmacOSのアイコンで採用されている「スーパークリプス」とも呼ばれる滑らかな角丸のことです。CSSのborder-radiusで生成される単純な角丸とは曲率の連続性が異なり、より自然で有機的な印象を与える特徴があります。

Q. Androidの「アダプティブアイコン」とは何ですか？

A. Android 8.0 (Oreo) 以降で導入されたアイコン仕様です。この仕様により、デバイスメーカーが独自のマスク形状（円形、四角形、ティアドロップなど）を適用しても、アイコンの見た目に一貫性を持たせることができます。このツールでは、その中でも代表的な円形やSquircle形状での表示を確認できます。

Q. セーフエリアガイドは何を基準にしていますか？

A. 各プラットフォームのデザインガイドラインで推奨されている安全領域を基にしています。 - iOS/macOS: アイコン全体の中央約80%の領域です。 - Android: アダプティブアイコンの仕様で、どの形状でも確実に表示されると保証されている中央の円形領域（直径66%）を基準にしています。この円内にロゴなどの主要素を収めることが推奨されます。

📚 アプリアイコンの豆知識

アプリアイコンのデザインは、単なる画像の作成に留まりません。プラットフォームごとの「形状」という制約を理解することが重要です。かつてアプリアイコンは自由な形の正方形画像でしたが、iOS 7でAppleがSquircle形状を全面的に採用したことで、ホーム画面に統一感が生まれました。これは、UI全体で一貫したデザイン言語を構築するというAppleの思想を象徴しています。

一方、Googleは当初マテリアルデザインでより自由な形状を許容していましたが、デバイスメーカーごとにホーム画面の見た目が大きく異なってしまうという課題を解決するため、Android 8.0で「アダプティブアイコン」を導入しました。これにより、開発者はアイコンのコア部分のデザインに集中しつつ、OS側で表示の一貫性を担保できるようになりました。アイコンはアプリの「顔」であり、ユーザーが最初に触れるブランド要素です。こうしたOSの思想や仕様を理解することが、質の高いユーザー体験の第一歩となります。