Native App workflow for iPhone 6 & 6 Plus
FOR DESIGNERS
自己紹介鈴木 伸緒 UIデザイナー Mono Grapher / Simplog
Ameba事業本部で iOS/AndroidのUIデザインを担当
デザインが必要なサイズの確認と作り方
今日のお話
.p s d
No.1 どのサイズでデザインを作ればいいの?
No.2 サイズごとのPSDの作り方
No.3 マージン・サイズの指定
640*1136 640*1136750*1334
1125*2001
1242*2208
iPhone 5,5S iPhone 6 iPhone 6 Plus
zoom
zoom
端末でわける
Normal
Normal
640*1136
750*1334
1125*2001
iPhone 5,5S iPhone 6 iPhone6 Plus
zoom
zoom
@2x @3x
750*1334 (1125*2001)
1242*2208
デザインするサイズでわける
640*1136750*1334
1242*2208
iPhone 5,5S iPhone 6 iPhone6 Plus
必要なのはこの3サイズ
デザイン作成ではZoomのことはきにしない。代わりに実機で確認
No.1 どのサイズのデザインを作ればいいのか?
No.2 サイズごとのPSDの作り方
No.3 マージン・サイズの指定
iPhone 5サイズをベースデザインを展開
STEP1 まずはベースのPSDを作る(640*1136)
STEP2 キャンバスを広げる(750*1334)
STEP3 広がったキャンバスに合わせてレイアウトする
STEP4 解像度を1.5倍(@3x)に変更する(1125*2001)
STEP5 キャンバスを広げる(1242*2208)
STEP6 広がったキャンバスに合わせてレイアウトする
PSDデータの展開でやること
まずはベースのPSDを作る(640*1136)
640*1136
640*1136
キャンバスを広げる(750*1334)
750*1334
広がった分をレイアウトする
750*1334
750*1334
解像度を1.5倍に変更する(1125*2001)
1125*2001
ここはただPSDが拡大されるだけ
@2x→@3x
1125*2001
キャンバスを広げる(1242*2208)
1242*2208
1242*2208
Finish
最後に、再び 広がった分をレイアウトしなおして完成。
No.1 どのサイズのデザインを作ればいいのか?
No.2 サイズごとのPSDの作り方
No.3 マージン・サイズの指定
• 調整が必須なのは、横軸のレイアウト調整
• ピクセル指定するところをまず決める
• 残りの部分がリキッドになる
レイアウト調整でやること
マージンやサムネイルサイズ固定
サムネイルサイズ・マージンを固定し、テキストエリアをリキッド
iPhone 6iphone 5,5S iPhone 6 Plus
iPhone 6iphone 5,5S iPhone 6 Plus
マージン固定で、サムネイルを%で拡大
画面端からのマージンや、サムネイル間のマージンを固定し、画像をリキッドで拡大
• iPhone 5サイズをベースにiPhone 6 & 6 Plusサイズに展開
(640*1136 / 750*1334 / 1424*2208)
• 実機での確認がより重要
• ピクセル固定する場所、リキッドする場所を考慮して作る
まとめ
iPhone 6 & 6 Plusを意識して デザインできるなら、ツールはなんだっていい。
提案・運用・web・native app etc… 作るモノに合わせてツールを使い分けられる方が重要
etc…