読者です 読者をやめる 読者になる 読者になる

@thorikiriのてょりっき

@thorikiriがWebとかAndroidとかの技術ネタや本を読んだブログです

DeNA Creative Seminar Vol.2 #denacrt に行って来ました

event html5

初のヒカリエでした。

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

資料→スマートフォンブラウザについて

  • Androidブラウザ
    • 標準ブラウザ
      • 端末ごとにベンダーがいじくる
    • Chrome
      • ICS 4.0から使える。Jelly Beanでは標準になっている。そのうち来る。
    • FireFox
      • Geckoにエンジンが生まれ変わった
    • Dolphin
      • auが標準にするとかしないとか。
    • Galaxy SIIIのブラウザスコアはChromeよりよい
  • iOSブラウザ
    • Safari一択と思って良い
  • WebView
    • Androidは基本的に同じと思って良い
      • が、ベンダーが弄ってる可能性はある
      • Galaxy Sシリーズは注意が必要
    • iOS
      • 性能差が激しい
      • しかし挙動は同じ
      • webviewはスクロールが遅いが、プロパティで変更することは可能。
  • position: fixed;
    • ヘッダーバー
      • 昔はダメだった。
      • iScrollやjQueryMobileを使ったりして対応する
      • cssのtransform
      • 要素のtopをスクロール時に変更する仕組みで動いている。がAndoridだとバグがある。
      • 縦は自分で計算しなければならないので、コンテンツが動的に変更されたり、画像が差し替わったりする場合には注意が必要。
    • iOS5.0から-webkit-orverflow-scrolling: touch;が出来た
      • position:fixed;の指定はz-indexを入れること。切ないことになる。
      • margin-topも入れること。
  • スクロール
    • Android
      • 2.2以上のOSであればposition:fixed;が使える。ただし、Galaxy Sシリーズの2.X系のOSではダメ。
      • touchmoveイベントが取れないが、WebViewならOK。
      • windowscrollで取ろうにもGalaxy Sでダメ。
    • iOS
      • スクロール中はレンダリングが止まってしまう。
      • setIntervalやsetTimeoutも止まってしまう。
      • iOS5からposition:fixed;が可能になっています。
      • 画像があるとスクロールが遅くなるので、画像を多用するようなサイトでは厳しいことになる。
      • jQueryプラグインのlazyloadを使って対応するも、歯抜けになったりする場合もある。
      • 各々のブラウザで試してみてください。
  • orientation change
    • Android2.1以下
      • onOrientationChangeがない。問題外
      • resizeとのタイミングは、changeのあとにresize
    • iOS
      • changeとresizeのタイミングはほぼ一緒
  • まとめ
    • Android
      • 4.0以上はPCブラウザに近い感覚
      • でもベンダーにいじられている可能性がある
      • 逆にWebViewは似た挙動を示す
    • iOS
      • スクロール中はできる限りスクロールに集中してもらうこと
      • WebViewでは性能差があるが挙動は同じ

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

  • DeNAではmobageだけじゃなく、ECサイトもやっていますよ
    • bidders.jpとか
    • auショッピングメールとか
    • mixiモールとは
    • 色々なサイトをやっている場合には、UIやUX、PF、SEOは横断的にやっている
    • 企画や制作はそれぞれわけてやったり、共通的にやったりしている
  • アーキテクチャ
    • レスポンシブWebデザインにはしていない。それぞれ別に作っている。
    • スマートフォンでの開発のスピード感を上げたいから
    • LocalStorageとJSONを駆使して利用時のスピード感を上げている
    • 検索のキーワードの履歴とかそのあたり
  • ソーシャル連携
    • SNSボタンとか
    • デバイスによってはSNSボタンのカウントとかを表示しないようにしている。
      • モバイルではすごく遅くなってしまうから
  • UIとUX
  • ミニマムデザイン
    • 単に、シンプルという意味ではない
    • インパクトに欠けるが、ボディーブローのように効いてくる
      • バナーとかガラケーの場合にはうるさい感じにしていたが、スマートフォンでは余白とかを大事にしている。タッチするからという意味もある。
  • 高速PDCAを回す
    • 定量的だけでなく、定性的にも判断する。ユーザの生の声とか。お問い合わせとか。
    • 3つ〜4つを同時に改善していく
    • 改善が見られなければ、固執せずにもとに戻す
  • UI改善
    • 商品画像は大きいほうが良いか?
      • 商品画像が小さくても、ファーストビューで買い物カゴに入れるボタンが見れたほうが良い
      • 大きさよりも質が大事である
      • ファーストビュー大事
    • ファーストビューで分からない場合、ユーザはとりあえず下までスクロールして、下にあるボタンを押す
    • AndroidユーザはiOSの削除のUIに慣れていないので、カートからの消し方がわからない。
    • 404エラーページ
      • ネガティブなページもポジティブにデザインしていくことで離脱率が減る
      • 500エラーとか他にも横展開する
    • 入会フォーム
      • パスワードを表示チェックを出す。
      • パスワード確認用のフォームは消した
      • 入会時のメールで迷惑メールにならないためにドメインを登録するが、そのドメイン名は簡単にコピー出来るようにしておくと良い
      • IDの重複時に他のIDをサジェストしてあげた方が良い
  • UX事例
    • スティング
      • 縦横表示で表示を変える。カルーセル的なのとか。ボタン配置とか。
    • 画像表示
      • 画像の拡大表示中の画面でも操作が行えるようにしておく
  • まとめ
    • ファーストビューにこだわること
    • 大事な操作は一番下に置いておくと吉
    • Android/iOSの差を理解しておくこと
    • 定量的な評価だけでなく、定性的な評価もすること
    • 変更の前後比だけでなく、前月比なども実施する。良かったら横展開もはかる。

スマートフォンにおけるUI/UXとScrum開発

資料→DeNA Creativeseminar#2

  • スマートフォン向け mobageリニューアル
    • 14人でScrumを導入した
    • プロダクトオーナー兼スクラムマスターっぽいことをした
    • 3ヶ月で見積もったけど、5ヶ月かかった。
    • 簡単にはいかないね・・・
      • Scrumの知識
      • 見積や設計不足
      • Web UIのリッチ化にもたついた 特にAndroid
  • スピードが求められている
    • 経営スピードもそう
      • 開発もそう。ただし、品質が悪いのは問題外。
    • 今はScrum一本でやっている
  • Scrumとは?
    • アジャイルのひとつ
    • 優先度や目的の可視化
    • 役割の明確化
    • コミュニケーション
  • プロダクトバックログ
    • ストーリーに優先度をつける
      • 好きな順、やりたいことからやっていくということがなくなる
    • ストーリーをタスク化する
  • ミーティング
    • 1スプリント2週間で回す
      • 初日のプランミーティングで何をするかを決める
      • 最終日にはレビューと振り返りを実施する
      • その間は朝会とかスタンディングミーティングとかをする
  • 役割
    • チーム内だけでなく、バックオフィスの人につてもわかるようにしておく
  • Scrum導入=スピード・品質向上ではない
    • スマートフォン開発ではコミュニケーションが大事
    • 専門知識が必要
    • ディレクター一極集中では回らない
      • 専門家同士で話し合って決める
    • エライ人が口をはさむ場はレビュー、振り返りの場のみとする。
  • 置き換え
    • ガントチャート→朝会
    • ミーティング→スタンドアップミーティング、打ち合わせを1時間確保しちゃうと、1時間しゃべってしまう
    • タスク管理ツール→タスクボード(ホワイトボードベース)
    • ワイヤー→リッチUIでは厳しい→ホワイトボードに書く
  • Goalは明確に
    • UI UXのコンセプトは大事にする
    • 仕様改善やチューニングは即決する
      • スプリント中はメンバーだけでやる
      • レビューは全員で一度に行う
    • 追加タスクやインプットは次に持ち込む
    • 浅く広くよりもスペシャリストを集めたほうが良い
  • まとめ
    • コンセプトと優先順位が明文化出来まる
    • コミュニケーションコストが減る
    • すぐにチューニングが出来る
  • 課題
    • 目の前のことをやるのでショートスパン化してしまう
      • 半年に一度将来について考える会みたいな合宿をする
    • 優先度が低いバグとかが溜まっていってしまう
      • 祝日が多い週などはScrumでやらずに、バグを潰す期間にしてしまう
    • 他のチームとの情報共有は別途きちんとする