デバイスプレビュー
実機に近い文脈でアイコンを見ます。読みにくさ、ズレ、背景との衝突を書き出し前に拾えます。
モックアップ
3 モード：
- iPhone — 壁紙付きホーム画面グリッド。
- MacBook — macOS の Dock と Launchpad。
- Web — タブの favicon と Apple touch icon。
切り替え
- メインキャンバスで編集。
- プレビュー横（または上）のデバイスアイコンをクリック。
- モックアップがすぐ更新されます。
見るポイント
iPhone
- 小さいサイズでも判別できるか。
- 前景と背景のコントラスト。
- 周りのアプリアイコンとパディングが揃っているか。
MacBook
- Dock で映えるか。
- メニューバーや Finder サイズまで小さくしても読めるか。
- Squircle / 角丸が macOS らしいか。
Web
- 16×16 px の favicon が潰れていないか。
- ホーム画面の Apple touch icon が埋もれないか。
- タブで透明背景が破綻していないか。
非破壊
モックアップは参考だけ。書き出しファイルはデバイス枠なしの生アイコンです。
コツ
- iPhone モックで明るい壁紙と暗い壁紙の両方。
- 透明背景なら Web プレビューで白以外のページも見る。
- 書き出し前にキャンバスを拡大して小サイズのキレを確認。
最終更新日