はじめに
日頃 iOS アプリエンジニアとして活動している私は、個人アプリ開発でデザインも自身で行うなど、趣味レベルでデザイン領域を嗜むことがよくあります。今回は、そんな私が デザインデータを見る時に注視しているポイント をご紹介します。
- あ、、そこ適当にしがちだ…
- へぇ！そんな視点で見てるんだ！
- お！！私は問題なさそうだ！
こんな気付きを得てもらえたらと思い、執筆しました。
最後まで読んでいただけますと幸いです。
前提
iOS アプリのデザインデータであることを前提とします
Font
文字ラベルに指定されている フォントの種類 は必ず確認を行います。フォントの種類でそのデザイナーが Apple 製品の フォント事情にどれだけ詳しいかがわかる くらい重要だと私は考えています。
例えば、Apple 公式サイトの日本語フォントには「SF Pro JP」という Apple オリジナルの非公開フォントが使われています。これにできるだけ近いフォントを採用するという こだわり は、個人的には好きですね。他にも、Android と iOS で表示差異が大きくならないフォントを利用するなどの視点もアプリデザインでは必要になってきます。
Margin, Width, Height
オブジェクトのX・Y軸、縦・横幅を決定する要素に 規則性があるか は非常に重要です。ソフトウェアエンジニアは 再利用性 を重要視して効率よく UI 設計することを目指します。ですから、規則性がないと再利用が可能な 汎用的設計 を行うことができないのです。
私は、利用する Margin を定数として定義 しておき、それ以外を利用できないように制約をかけています。これによって、デザイナーのミスをプロダクトに反映してしまう 多重ミスを防止 できています。
extension CGFloat {
static let space2: CGFloat = 2
static let space4: CGFloat = 4
static let space6: CGFloat = 6
static let space8: CGFloat = 8
}
Color
色の管理方法に関しては、デザイン時とプログラミング時でほぼ同じなので、デザインデータ内での色管理が プロダクトの質と開発効率に直結 してきます。下記3点は特に注意が必要です。
- ネーミング（ex: primary_*, secondary_*）
- ダークモードとライトモード
- 利用用途（ex: Text Color, Error）
Auto Layout
AutoLayout は iOS の UI 設計方法ですが、それに近い挙動を再現できるデザインツールも存在します。つまり、文字数・画像サイズ・画面サイズなどが 動的に変動したときのデザイン がどれだけカバーできているかということです。
モバイルアプリケーションは特に 表示領域が限定的 であるため、コンテンツによる UI の変動が激しめです。ですから、ここの充実度合いからモバイルアプリのデザイン経験値をなんとなく知ることができてしまうかもしれません。
Design Tool
最近では Figma, Sketch, AdobeXD を使うケースが多いかと思います。エンジニアの開発ツールと同じく、デザインツールにも 世代交代タイミング がありますので、それを追えているかは一つのチェックポイントになっていることがあります。
さいごに
最後まで読んでいただき、ありがとうございます！
今回紹介したものは表面的なものが多めですが、 デザインシステム にも繋がる非常に重要なパーツであると考えています。
ぜひ皆さんも、エンジニアとデザイナーとの コミュニケーションの種 に使っていただければと思います。