iOS 9 Bootcamp！エンジニアとデザインのあいだ レポート
iOS 9 週連続 Bootcamp！iOS 9で変わる体験とエンジニアとデザインのあいだのレポートです。
↓公式レポートとライブ配信していた実際の様子です
@dots
1.エンジニアとデザイナーのあいだ @クラスメソッドよこやまゆうだい
エンジニアのためのデザインの考え方や、実際にエンジニア、デザイナーを兼任してモバイルアプリケーションの開発に関わってきたなかで感じた課題などをお話しします。
エンジニア＊デザイナーって少ない
@クラスメソッド mobile部の比率 70 エンジニア 10 デザイナー 10 PM.PL 10 どっちも
こんな感じでやってる
自分で
要件定義→デザイン→実装
複数人時はデザインを投げて最後にUI調整
エンジニアはCustomView職人
icon等素材はリポジトリにpush
WHY デザイン＊エンジニア？
よりよいAPPを届ける為
あるある
@エンジニア
WHAT：
レイアウトのバランスが良くない→要素の間隔etc
Problem：
細かい修正が発生する、修正箇所が多すぎてそのままrelease
DO：
レイアウトの基礎を学ぶ
→要素のアウトラインを揃える（重複するものは揃える）
→上下左右の余白を揃える
→大きな要素をセルの真ん中に配置する
→オススメ本：なるほどデザイン
WHAT：
オートレイアウトが大変
Problem：
端末によって解像度の違いでUI崩れる
時間がかかる
簡単なレイアウトしか作れない
DO：
オートレイアウトから逃げない！
→ただaddmisingconstraintsは使わないで！！→理解せず使うと大変
→参考 http://www.slideshare.net/kakegawa-atsushi/devio-auto-layout
WHAT：
簡単な編集が出来ない
Problem：
特別のソフトが必要と思う
デザイナーとのやりとりの方が時間がかかる
DO：
画像編集のスキルを身につける
→macのプレビューを使用→画像見る+サイズ、カラー編集etcが出来るよ
@デザイナ
WHAT：
デザイン提案時に理由を聞かれる
Priblem：
説得力がない→根拠がない
意見をかわせない
デザインスキルが鍛えられない
DO：
UIと会話しよう
→なぜそこにあんの？とUIに聞くイメージ
WHAT：
WEBデザインっぽい。。。
Priblem：
UIコンポーネントの特性が考慮されていない
画面遷移が複雑で迷子になる
1つの画面に情報が多すぎる
DO：
アプリにはアプリのデザイン
デザイン決まったら人の意見を聞いて見る、動くようになったら使ってもらう
→feedbackもらう
WHAT：
自分で修正してPRちょうだい
Problem：
少しの修正でもコミュコストが大きい
作業の合間に修正依頼でたりして気がひける
DO：
InterfaceBuilderをマスターする（Xcodeでストリーボードをいじる）
まとめ
エンジニア
レイアウトの基礎を学ぶ
AutoLayoutから逃げない
簡単な画像編集スキルを身につける
デザイナー
デザインに明確な根拠を持つ
APPWEBデザインは違う
InterfaceBuilderをマスターする
どっちも
色々なAPPを見よう
デザインガイドラインを見る
https://developer.apple.com/jp/documentation/UserExperience/Conceptual/MobileHIG/DesigningForiOS7/DesigningForiOS7.html
参考書籍：モバイルデザインパターン
2.奥行きを意識したプロダクト-iOS9で変わる体験- @goodpatchUIdesigner
iOS 9のアップデートに伴いiPhone6sや最近ではiPad Proもリリースされました。
ハード、ソフト両面でのアップデートにより、どのように体験が変わるのかUI デザイナーの視点からNews App等標準アプリケーションを参考 に考察します。
@goodpatch
リサーチ→UI→プロトタイプ→実装
実装以外をデザイナーが行う
iOSのハードのupdate
Apple Pencil良い！→反応速度が他社に比べ早い！
3Dtouch/pop etc
appleTV
感じたこと
keynote見た
APPswitcher
QuickAction
APPLEtvのUXが良い！→奥行きを感じるUI
レイヤーの概念が強調されている！→奥行きを感じるUIを強調している
→QuickAction→他Appがボケる
設定アイコンも歯車ごとにレイヤー分けされている
ユーザーは迷わない！？
→結局ユーザーはその複雑性に慣れる
てスラーの〜論（インタラクションデザインの教科書）
iOS6以前 notFlat奥行きなし
→Flat
→奥行きあり
複雑性はユーザーが持っていた
@human interface guidelines
QuickAction
アプリの先にユーザーがしたい行動を呼び出す
spotright
App検索が出来る
ProactiveAssistant
イヤホンさすとmusicのショートカットが出るetc
→ユーザーに寄り添い行動をサポート
余談
Apple+IBMのAPPが作られており公共の施設の情報を公開？
高齢者向けAPPも作っている
デザイナーとエンジニアの関わり方
updateによる製作者側の負担が大きい
QuickAction等、紙ベースでプロトタイプ作りにくい
問題：
お互いのコミュニケーションロスは多い
今後の課題：
実際作ったらなんか違う
デバイスによって違う
解決策：
JSONデータをデザインに取り入れる
→SketchDataPopulatorというプラグインを使用し実データで確認を行う
FluidforSketch AutoLayoutのようなもの
実機を想定したプラグイン、ソフトが増えた
silver
スケッチ上で遷移やインタラクションをつけれる
Qwikly（まだreleaseされていない）
グラフィックを作ってXcodeに吐き出せるツール
デザイナーLarry teslarさん好きだそうです。
まとめ
奥行きを意識している
→ただ現在は複雑性をユーザーが学んでいる段階
制作環境の変化
→エンジニアとデザイナーの壁を少なくするような
OSから提供された機能を理解しユーザーに複雑さを感じさせない
3.質問タイム
現在はデザイナーにAutoLayout任せたりは出来ていない
- 工数としては微妙（出戻り、結局エンジニアがAutoLayoutいじる等あり）、よりもお互いの理解を深める為！？
AutoLayoutの勉強法
- やる！ドキュメント見る！
- http://dev.classmethod.jp/references/ios-7-xcode-5-auto-layout-1/
コミュロスを減らす工夫
- 共通言語を作る（セルetc）
エンジニア＊デザイナーを行う理由
- コミュロスを防ぐ、お互い指摘できるようになり品質をあげる←技術の話がわかる為怠けられないw
- ただ学習コストは高い
4.memo
tips
SBのコンフリクトを防ぐ為にSB分割を作業毎に分割し作業する
