Icon Composerでアプリアイコンを作ったときに考えたこと

WWDCのビデオやヒューマンインターフェイスガイドラインなどをチェックしながら、どうしようか考えていました。とりあえずざっくりIcon Composerであそんで雰囲気をつかんでから数ヶ月ほったらかしに。それからもう一度向き合って作成しました。

まずはそもそものデザインをどうするか、についてです。個人的には自由に作る方針でいいかなと思いました。ガイドラインはあくまでガイドラインということで…。

たとえばAppleのデザイナーが言うとおり、エッジがなめらかなほうがLiquid GlassのSpecularが自然に感じられます。しかし、そのためにわざわざ商標ロゴやコーポレートロゴなどのコーナーを丸めるのは現実的ではない気がします。Appleのアプリでは「Apple サポート」や「Apple TV」にロゴやタイポグラフィが含まれていますが、コーナーを丸くしていないように見えます。

いずれまたAppleがデザインのテーマを更新したとき柔軟に対応できるかどうか、ということを考えてもLiquid Glassのデザインシステムに依存したくないなと思いました。

既存のデザインをそこまで変えずに、でもiOSのトーンには合わせたいと思いました。そして一部のレイヤーにTranslucencyを適用しました。現実世界で考えたとき、光を通しそうなオブジェクトにはTranslucencyを適用し、そうでないものにはTranslucencyを適用しない「練りガラスのようなもの」という解釈にしました。

あとはSpecularが密集していると、うるさい見た目になる感じがしました。したがって線を減らすために一部のオブジェクトを結合してパスをまとめました。

SVGを使いたかったのですが、あきらめてPNGを使いました。なぜならベクター編集ソフトの調整レイヤーを使っているからです。

ダークとモノクロのアイコンで調整レイヤーを使っています。ダークでは全体が暗くなるようにしていて、モノクロではコントラストを上げています。厳密にやるならAPCAを見て色をそろえる手もありそうですが、めんどうなので調整レイヤーに逃げています。

そもそもアイコン全体がTranslucencyでかつ背景がシステムのデフォルトなら、ダークでの調整は不要だと思います。アイコンを設計した段階でたとえば「隣接するオブジェクトとのコントラスト比を1対3以上とする」というようなデザインにしていれば、モノクロでの調整も不要かもしれません。残念ながら自分はまったく考慮できていなかったので、コントラストを確保するためにモノクロでは調整しています。

Compositionを設定することでダークとモノクロでデザインを切り替えることができました。

ShadowはNeutralとChromaticからえらべます。ソファにミッフィーちゃんらしきものが置いてある部屋で説明していたAppleのデザイナーは「背景が白いときChromaticだと素敵な感じになる」ということを言っていた気がします。

これも現実世界で考えてみました。Translucencyを適用したものについてはステンドグラスよろしく色をともなう影ができそうなのでChromaticがいいかなと思いました。そうでない場合あるいはダークならNeutralでいいかなと。

Shadowの強さも設定できます。Appleのサンプルを確認しながら、なんとなく雰囲気としては最背面のレイヤーでは強くした方がいいと思いました。現実世界でもたぶんそうですよね。

そして背景はベタ塗りからグラデーションに変更しました。これもAppleのデザイナーが言うとおり、グラデーションがあると良い感じがしました。

Icon Composerのバージョン1.0（41）では、いまのところグループ（アプリアイコンにおけるレイヤー）を4つまでしか作れません。これがデザイン上の制約となっていることを最初に知っておく必要があるかもしれません。エラーメッセージが表示されていることに途中まで気がつかずに5つのグループで作業を進めていましたが、やむなしで4つのグループにまとめました。