Native app workflow

Native App workflow for iPhone 6 & 6 Plus

FOR DESIGNERS

自己紹介鈴木 伸緒 UIデザイナー Mono Grapher / Simplog

Ameba事業本部で iOS/AndroidのUIデザインを担当

今日のお話

いっきにサイズが増えました

Zoomも できちゃいますよね

デザインが必要なサイズの確認と作り方

今日のお話

.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…

Thanks!