紙と鉛筆で設計しよう

24
紙と鉛筆で設計しよう オープンセミナー2014@広島 懇親会(が本番) 逸見 (@mako_wis)

description

オープンセミナー2014@広島の懇親会のLTで話した内容です。 スマートフォン向けアプリのUI/UX設計をペーパープロトタイピングでやりましょうというお話です。

Transcript of 紙と鉛筆で設計しよう

Page 1: 紙と鉛筆で設計しよう

紙と鉛筆で設計しようオープンセミナー2014@広島 懇親会(が本番)

逸見 誠(@mako_wis)

Page 2: 紙と鉛筆で設計しよう

about me逸見 誠(Henmi Makoto)

生まれてからずっと岡山

Objective-C,Java,C#

!

Twitter mako_wis

GitHub makowis

オープンセミナー2014@岡山実行委員長Hiroshima.rb(幽霊部員)

すごい広島(エア参加枠)

Page 3: 紙と鉛筆で設計しよう

そんな私の近況

Page 4: 紙と鉛筆で設計しよう

最近、転職しました

Page 5: 紙と鉛筆で設計しよう

転職後の最初のお仕事

Page 6: 紙と鉛筆で設計しよう

iOSアプリのUI設計

Page 7: 紙と鉛筆で設計しよう

最近の仕事道具

Page 8: 紙と鉛筆で設計しよう
Page 9: 紙と鉛筆で設計しよう

絵を書く道具ばっかり

Page 10: 紙と鉛筆で設計しよう

最近の仕事風景

Page 11: 紙と鉛筆で設計しよう
Page 12: 紙と鉛筆で設計しよう

つまりお絵かきしてます

Page 13: 紙と鉛筆で設計しよう

ペーパープロトタイピングやってます

Page 14: 紙と鉛筆で設計しよう

UI設計のやり方色々モックをXcodeを使って作る

ペイントソフトを使う

Excel方眼紙を使う

ペーパープロトタイピング

Page 15: 紙と鉛筆で設計しよう

使ったツール達Paper Prototyping Pad

シャーペン

定規

色鉛筆

付箋

POP(iPhoneアプリ)

Page 16: 紙と鉛筆で設計しよう

Paper Prototyping Padペーパープロトタイピング用のノート

iPhone5の絵が書いてあってディスプレイ部分

が1ピクセルの格子状に線が引かれている

タブやナビゲーションバーの高さの目盛りが書いてあって便利

ネット通販で買えます

Page 17: 紙と鉛筆で設計しよう

シャーペン削らなくていいです

間違っても消しゴムで消せます

修正が入っても消しゴムでry

Page 18: 紙と鉛筆で設計しよう

定規線を引くのに便利

透明な方が後ろ側が見えて良い

丸が何個か繰り抜いてある定規が便利

ものさしは方言らしい

Page 19: 紙と鉛筆で設計しよう

色鉛筆選択部分とかを色分けする

ちょっと色を付けるとイメージしやすい

非選択とかをグレーで書く

Page 20: 紙と鉛筆で設計しよう

付箋アラートとかコンファームを書いて貼る

画面の一部だけ変わる時に重宝

Page 21: 紙と鉛筆で設計しよう

ペーパープロトタイピング用のiPhoneアプリ

紙に書いたUIを写真に撮って画面遷移をシ

ミュレーションできる

他のメンバーに共有もできたりする

Page 22: 紙と鉛筆で設計しよう

やって良かったことサクッとUIが書ける

修正が簡単

Page 23: 紙と鉛筆で設計しよう

やってみようかな同じパーツはコピーする

ペンタブとかを使ってみる?

Page 24: 紙と鉛筆で設計しよう

おわり