デザイナーとエンジニアの垣根を取り払う勉強会「CollaboTips」で発表しました、Size Classのお話です。

1. 佐久間にの / ゆこびん
Collabo Tips vol.1
iOS
Xcode
フリーランス デザイナー
Size Class 導入
デザイナーさん向け
design × code

2. 佐久間にの（ゆこびん）@yucovin
美術モデル
イラストレーター
デザイナー
デザイン、イラストは
紙媒体が多め。本も。
Webもやります。
なんでも屋さん…？
富士通のモバイルスキャナ「ScanSnap」
のクリエイターモデルにデザインを提供。
イラスト入りMac大好きブログ
「もっと知りたいリンゴあれこれ」
http://rinare.com/
iOSエンジニア
＋
自他共に認めるApple信者。
Androidはでっかいモバイル
Suica。
美大（油画）に行っていたが、
Macきっかけでイラストやデ
ザインが仕事に。ブログきっ
かけでiOSアプリ開発を始め
る。初心者向けアプリ開発講
座「アプリ道場」キュレーター
兼アシスタント。WWDCも自
腹で行ったり。現在はフリー
ランス、ねこ事務所とFiNCさ
んのお手伝いしてます。

3. iPhone SE
iPhone 6s
4-inch 4.7-inch
iPhone 6s Plus
5.5-inch
iPhone 4s
3.5-inch
iPhoneの画面サイズいろいろ
Collabo Tips vol.1

4. iPhone SE
iPhone 6s
4-inch 4.7-inch
iPhone 6s Plus
5.5-inch
iPhone 4s
3.5-inch
iPad mini
iPad Air
iPad Pro
12.9-inch9.7-inch7.9-inch
iOSの画面サイズいろいろ
Collabo Tips vol.1

5. SE
Welcome
START
Welcome
START
xxxxxxx
xxxxxxx
xxxxxxx
xxxxxxx
6s Plus 6s
Welcome
START
xxxxxxx
xxxxxxx
同じようなデザインなので、難しくないと思うかもしれませんが、画面ごとにサイ
ズの違う枠や文字、スペース…etc、共通化できるルールがないので、これを厳密に
再現するには機種判定（画面サイズ判定）を行い、おのおのに制約をつくっていか
ないといけないのです。大変。(x-x;)`、
デザインをつくるには
Collabo Tips vol.1

6. 工数やメンテナンスのしやすさも大事
機種（画面サイズ）ごとに別々の制約を作る
種類毎の作業量の増加（単純に倍々ではない）
↓
コードの煩雑化
メンテナンスのしづらさ
↓
工数増大の法則
SE
Welcome
START
Welcome
START
xxxxxxx
xxxxxxx
xxxxxxx
xxxxxxx
6s Plus 6s
Welcome
START
xxxxxxx
xxxxxxx
✤ 一つの部品の制約は、固有サイズ
を持たないものについては縦方向
２つ横方向２つから
✤ 機種（画面サイズ）判定
✤ × 機種の種類分
✤ 確認作業（シミュレーターなど）
Collabo Tips vol.1

7. Size Class あり〼
Compact(C)
Regular(R)
C
R
R
R
C
C
C
R
R
R
Plus
5.5”
縦と横をCompactとRegularに分類
分類しない場合はAny
W:Compact
H:Regular
W:Compact
H:Compact
W:Regular
H:Regular
W:Regular
H:Compact
W:Any
H:Any
Collabo Tips vol.1

8. Size Class あり〼
Collabo Tips vol.1

9. Size Class DEMO

10. Size Class つかってみよう！
Xcodeを触ったことがない人は是非触ってみましょう。
コードをかかなくてもデザインを管理する（作る）ことができます。
Xcode 8ではSize Classの機能がわかりやすく進化！
Size Class（とAuto Layout）を知って
シンプルなデザイン設計を心がけてみよう！
Collabo Tips vol.1