しるろぐ

いろいろ書きます。

DeNA Creative Seminar #2 に行ってきました

7/23(月)に行われたDeNA Creative Seminar #2に参加してきました。

ちょっと出遅れた感じがありますが、社内へのフィードバックも終わったので軽くまとめます。


概要

スマートフォンのUI/UXをテーマとして、フロントエンドエンジニア、UI/UXデザイナーなど、スマートフォンアプリやWebサービスのフロントエンドに関わる方々を対象とした勉強会

 

Session 1: ブラウザレンダリングについて

ブラウザについて

Android
  • Android
    • 標準でついてくるやつ
  • Chrome
    • 4.0からつかえるよ
  • firefox
  • Dolphin
    • auが推奨していてプリインストールする噂
iPhone

ブラウザとWebView

Android
  • スクロール中のタッチイベントが違う場合ある
  • GalaxySシリーズは要注意
iPhone
  • 性能差がある
  • 挙動はほぼ同じ
  • スクロールが遅い
    • 設定で変更できるよ

position: fixed;

  • 昔は使えなかったよね
  • use iScroll or jQuery Mobile
    • スクロールに合わせてTOPを移動させてる
  • iOS5.0 から -webkit-overflow-scrolling: touch; ができた

スクロールについて

Android
  • スクロール中はレンダリングは止まる(-- 2.3)
  • 2.2以上はposition: fixedがきく
    • 2.xでもGalaxySの標準ブラウザだけきかない
  • スクロール中はtouchmoveイベントが取得できない
    • WebViewだと取得できる
    • window.scrollでやろうとしてもGalaxy S
iPhone
  • スクロール中はレンダリングはとまる
  • スクロール中はJSの処理もとまる
  • window.scrollはスクロールが止まった段階で取得できる
  • image表示部分でスクロールがひっかかる
  • iOS5.0からはposition: fixed;がつかえる

onOrientationChange

  • Android 2.1以下
    • onOrientationChangeがない論外
    • changeのあとにresize

まとめ

Android
  • PCブラウザに近い
  • 一部ベンダーがあれしてる可能性ある
  • WebViewはいじれないのでほぼ似たような挙動
iPhone
  • 慣性スクロールのため、スクロール中はいろいろ処理がとまってしまう
  • WebView, mobile safariで大きな隔たり

Session 2: ソーシャルコマースサイトの企画と実装

サイト構成について

  • あえてスマホとPCでテンプレート分けてる
  • json, localstorage
    • 検索の予測に使ってる

ソーシャル連携

  • サイトやユーザの特性に合わせて実施
    • 更新情報などをFBページに
  • HTML5版よりiframe版のほうがちょっと早い
    • カウント重いのでなくしてもよいかも

バナークリエイティブの変化

  • (これはおもしろい)
  • 余白を大きくしたりすっきりさせる

UI改善について

  • ファーストビュー大事!手動線はファーストビューにおくこと
  • よくわからなかったらスクロールして一番下に意思決定するボタンがあったら押してしまう。最下部にもおこう
  • 削除をiPhone風に
    • 定量評価はよかった(離脱率が低下、購入以外の遷移が減った)
    • が、定性評価が悪かった(削除の仕方がわからないというお問い合わせ)
    • Android / iPhoneのUI差を理解する
    • 改善が必要
  • そっけないエラーページはユーザの離脱率をあげる
  • 定量評価は、前後だけでなく前月同時期、近しいページ、機能と比較する
  • ドメイン指定のあれを長押しするとコピーできるようにした
    • (イイネ)
  • 一画面で完結する主要ページは横表示にも最適化すること

Session 3: Scrum = 爆速 x 品質

最初のお仕事

  • SPのモバゲーリニューアル
  • 見積3ヶ月 / 実績5ヶ月
    • Scrumの知見不足
    • スマホUIのリッチ化にもたついた

現場に求められているもの

  • スピードスピードスピード
  • やっぱりScrum
  • PF統括では全部Scrum

すくらむによる開発プロセスの最適化

  • 優先度目的の可視化
  • 役割の明確化
  • コミュニケーションコストの減少

Scrum FrameWork

  • Story
    • product backlogs
    • sprint backlogs (2 weeks)
  • MTG
    • sprint planning
    • morning, stand up
    • review
  • Role
    • product owner
    • scrum master
    • team member

プロダクトバックログからスプリントバックログへ

  • ゴール/目的共有
  • タスク分解
    • 最初にタスクを用意しないことで、専門家同士での話し合いにより
    • コンセンサスとれるのは良いと思う
  • 見積り
  • 担当ぎめ

Scrumのよいところ

  • 開発途中でインプットが入らない
  • レビューして、そこではじめてインプットがはいる
  • Scrumがディレクションをする

Scrumをやるときの注意

  • MTGはたってやる
  • ゴールを明確化
  • レビューは全員参加
  • 追加タスク、インプットは次のsprintにもちこす
  • ワイヤーフレームっぽい資料つくるならデザイン作れ

Scrumの弱点

  • ビジョンのショートスパン化
    • 半年に一回、一年後のサービスを考える会などの合宿する
  • バグチケットの優先度低下
    • 数字に反映しない、それほどでもないよねというチケットがあまる
    • Scrumをしないでバグを解消するデーをつくる
  • 横串連携と情報共有がなくなる
    • チームごとにがんばるので、横のscrumチームとの情報共有が少なくなる
    • ScrumマスターMTGをセッティング

いけてないUIがうまれる理由

  • ユーザニーズの不理解
  • 市場の勉強不足
  • コミュニケーション不足
  • チューニング不足

 

社内にフィードバックしたときのスライド