AgileUCDja でお世話になっている 脇坂さんが発表されるということでお邪魔しました。とってもAgileUXな雰囲気の事例発表があって、すごく楽しかったです！日本のTodd Zaki Warfelをみつけた。
- BE READY 5 for the new Web market
とりあえずメモを公開します。
※9/2 ROBOT社田中様のご指摘を頂き少し修正しました。ご指摘ありがとうございました！
== Yahoo! ==
* 組織
* UI設計: IxD, VD, WebDevelopment
* 今日はWebデベロップメント部
* iPhone向けYahoo
* 2008.7 iPnone版リリース
* 2010.4 リニューアル
* 設計時のポイント
* デバイスの特性を知る
* タッチインタフェース
* 操作性: タッチ領域の確保
* 29x29px を最小値とする
* その周りを空け、精密な動作を不要とする
* iOSでもこのような配慮がされている
* 画面サイズ HVGA
* 視認性、可読性、シンプルな構成、最適なサイズ
* 画面サイズ: 情報をそぎ落とす
* 細かな文言(ラベル)へも配慮
* 一定の規約を定義
* [完了] : 新規ウインドウ内の操作を完了する
* ...
* 3G WiFiアクセス
* 表示速度、キャッシュ、オフライン対応
* iOSのデザインを積極的に利用する
* 設定: すぐに設定画面であることがわかる
* カルーセル: インジケータ[●●●]左右にフリック可能であることが明示的
* 新しい技術 HTML5を知る
* 新しい技術を積極的に利用する
* Local storage
* クッキーを使わずにローカルに保持する機能
* 履歴、ON/OFF設定値
* 文字列しか保存できないので jsonで保管
* Geolocatioin API
* 24時間ごとに位置情報取得警告が出る。
* CSS Transform
* YUIやjQueryよりも滑らかなアニメーション
* せりあがり、左右、ボタンのアニメ、カルーセル
* CSS Gradation
* 画像をつかわないので軽い
* iPhone4でもきれい
* CSS Media Query
* メディアの属性によってCSSを切り替える
* 縦横の切り替えのときのピクセル値のずれを管理
* iPhone4 で 高解像度向けの画像を出す。
* Touch Support
* カルーセルの動きを、タッチした座標を取得して気持ちのいいUIを実装
* ボタンにあたってなくてもボタンにあたった処理をしている
* 最近はライブラリがある
* jQTouch
* YUI 3.2.0
* Android対応
* 差異が結構ある
* CSS Media Query効かない
* 縦横のレイアウト変更ができないので JavaScriptでがんばる
* CSS Transitionのアニメが遅い
* Touchの精度が悪い
* Googleから仕様がでてないので実機検証で知識をためているところ
* HTC Desire 固有の問題として、ピンチアウトでの拡大縮小が抑止できない
* 差異はJavaScriptとCSS Media Queryで吸収
* iOSバージョンによる差異
* 3.x Geolocation API, Web Storage
* 2.x Web Database
* 質問
* [Q] 対応すべき機種の幅の決めかたは？コストかかるよね。
* 現状、機種は少ないので、すべての機種を検証機としてかき集めて試している。
* 今後、爆発的に増えた場合はどう対応していくか考える
* 現在は３機種をひとつのHTML/CSS で実現できている
* トラブルシューティングに時間がかかってしまうのが現在の問題
* サポートは、PCも同じく、Yahoo Japan へのアクセスシェアで決めている。
* Androidはブラウザのシェアが伸びることを想定して先に対応している
* 端末がどんどんでてくることは予想済みなので、対応するためのプラットフォーム作りを検討している
* [Q] R&Dと制作の関係は
* テンプレート作成までをR&Dが行う
* そのテンプレートを利用して各制作部門が構築をする
* ただし、戦略的な案件はR&Dに企画部門を持つ
* [Q] 利用者の動態調査の方法は？
* iPhone, Android の差異はあまりないと考えている。
* 調査方法は、成果物を10名など、ユーザに使ってもらってフィードバックを得る
* また、Dog fooding を推奨している。社内でiPhone/iPad 利用を推奨している
= モバイル表現研究所 Phonebook / 電通 =
* PhoneBookの誕生から発売まで
* 企画/クリエイティブ: 電通 コピーライター 村井さん、クリエイティブ 黒須さん
* なぜ電通なのにモバイル表現研究所か
* 2008/12からモバイルのコミュニケーションの研究に挑戦していこう
* 社内で立ち上げよう、ということで研究所を立ち上げた
* Web上で立ち上げて世界に発信
* 2010/5 に Phonebook発売
* iPhoneを絵本にセットする => 動く絵本
* Airplane
* Submarine
* Space Ship
* Parents' lap
* 理念: Analog on the degital technology
* デジタルの価値 x アナログの価値
* 組み合わせることで新しい価値。解決できるコミュニケーションの問題がある。
* 解決したい課題
* 父はiPhone、子供はDS というように貴重な対話が阻害されていないか
* 親子の時間をつくる
* そこに発生する気持ちをデザインする
* 2009年8月ころにアイデアが出てきた
* Story - Interaction x Product - Illustration
* 世界中で使ってもらうために、ノンバーバル。言語を使わない。シンプルなテーマ
* Story
* 窓の外の世界に興味を持ったポポとモモ...
* => 親子でコミュニケーションをとらざるを得ないように構成している
* 企画はマーケティングベースではなく、想像力で作った
* エモーショナルな感覚を
* お父さんはこの場面でどのように子供とコミュニケーションをとるか、などを考えた
* 各ページのアクションはしぼりつつ、コンセプトを決めていった
* Illustration: 目で触る、手で感じる
* イラストのキャラクターのタッチをいろいろ書いてみて、デジタルと組み合わせたときの効果を検証しつつ進めた
* アニメーションはすべて手書き。線の強弱やインクの濃淡は残す
* アニメを作ってしまってから、深津さんに相談した。 => プロトタイピング
* Product: ユーザが手に入れるコンセプト、価値
* 本のサイズの調整: アナログとデジタルのどちらが協調されてもいけない
* 落下防止のギミック: 子供が乱暴に使っても大丈夫
* パッケージ: 売るさいに開いて売る。段ボールの外箱を作って流通に配慮
* Art and Mobile: 深津さん (アナログで作られた企画をデジタルに。Flashプロトタイピング)
* 本業は iPhone App 販売
* プロトタイピング with Flash
* Built with Flash
* 最初にすべてFlashで作り込んだ
* 深津さんはすべてFlashでプロトタイピングして、iPhoneアプリを作る
* モーフィングやインタラクションもすべてFlashで作り込む
* プロジェクトの課題
* 先にデザインがある
* 実装期間(2ヶ月)の問題
* ミニゲーム6-7本を週に一本リリースする感じ
* なので、最初のひと月をプロトタイピングに投入した
* Xcode で作り込む前に、手触りをチェックしたい。
* チェック完了したものを、Obj-C に作り込む
* 土日月: Flashプロト
* 火: ミーティング
* 水: Flash修正
* 次の火曜までに: 深津さん、田村さんがiPhone化する
* なぜ?
* 即座に意思決定するためのプロトタイピング
* その場で修正できる
* 遠隔の場合はSWFを送ればいい
* グループワークを迅速に進めるためにつかった
* fukatsu@gmail.com / twitter: fladdict
* ロボット社(アニメ制作): 田中さん(プランニング・ディレクター)
* 映画とかプロモーションビデオなどのコンテンツを作っている会社
* 電通と2年前からモバイル表現研究所
* プロトタイプ(アニメーション)制作 => アプリ素材制作
* 各素材(鳥とか)をサンプル作成して、採用を決める
* 通常は結果のムービーを納品するが、今回はFlash用の素材を納品
* ロボット社: 森さん (アニメーションをどうやってアプリに持っていくか)
* iPhoneアプリケーション
* iPhoneに落とす際にコマ数が多いものを入れると容量と処理速度に影響が出る
* それでも動きを自然にみせたい
* アニメータの提示したものをそのまま使わず、OpenGLと相性のいいものをえらぶ
* 海の波の細かさ
* テクスチャの数が少なくてすむように
* 毎週の定例会のセッション
* プロトタイプをみんなで見ながら評価、アイデアだし
* iPhoneの個体差、世代差。輝度やプロセッサのスピードがちがう。
* iPad版を今後は展開していく(ロボット社)
* fladdict 深津さん
* 過去にもFlashプロトタイピングを使った
* Tiltshift Generator
* Flashプロトタイプでフィードバックをもらって iPhone に落とす
* 25万本うれた
* iPad版は超短期でつくった(3日) -> iPad発売に間に合った
* Flashでコンセプトや使い勝手が追求できていた
* iPhoneでさらに追求できていた
* Android版は、Flashを そのまま Nexsus One用に
* Android for flashで
* 1週間で突貫作業
* Flashでインタラクションを作り込むことで、Webで公開できる。
* 固まってから、各環境に持っていける
* Flashは一番ユーザに届けやすく、フィードバックも得やすい
* クリエイターの制作の敷居が低い
= AIR for Android =
* Device Central
* デバイスのキャリブレーション
* ベンチマークを実行して、OSX上で実機に近いパフォーマンスでテストできる
* Omniture + CS5
* キャンペーンの時簡短縮
= 楽天 =
* 楽天のマルチデバイス対応 編成部スマートフォン戦略課 脇坂さん
* 横串の組織 - 9つの事業区分で様々のサービスを展開中
* 楽天経済圏
* UXガイドライン
* サポート
* タッチポイントの多様化
* 各種デバイスのサイズ向けのデザイン
* [サンプル] iPhone向けサイト
* 各事業でバラバラに作っているが、最低限のUIテンプレートをつくるのが編成部
* ログイン画面のデザイン
* 完全にデザインは合っていないが、同じようなルールで使えるように改善する取り組みをしている
* [サンプル] iPhone/iPadアプリ
* 楽天リサーチ
* 楽天トラベル
* 楽天ランキング
* 楽天イーグルス
* 雑誌ちら読み + お買い物(楽天ブックス)
* Androidアプリもあるよ
* 楽天トラベル: 機能はiPhoneと同じだが、Android用の適応も
* 楽天ブックスのスマートフォン対応
* フィンガーユーザビリティに配慮
* 情報を絞り込んで最適化
* すべてのページでiPhone対応を完了
* 最初からすべてをやった訳ではなく、準に対応
* 最初にTOPページ: ユーザ数はそんなにかわらず
* 商品ページ、カート対応: 実際に流量に変化が出た
* アクセス解析のフィードバックを受けて確認
* 雑誌ちら読み
* iPadで今週発売の雑誌をちら読みできる。
* 家に居ながらにして立ち読みできる。
* 商品をタップすると楽天市場にリンクして購入可能
* 購買のエクスペリエンスまで一貫して
* まずはスピード重視でリリース
* 順番にアップデートしていく
* ダウンロード数はiTunesストアのランキングに左右される
* 最初は男性がジェット好きが飛びつき、女性の率が増えていく
* 売り上げはまだ少ないが、電子コンテンツを掲載することで雑誌の売り上げが1.4倍に
* 今後も解析結果を踏まえて改善していく
* 楽天ブックスのiPhoneアプリを昨日リリース
* アプリ内で買い物を完結できるネイティブアプリ
* 機能としてはWebと同等だが、使用感はアプリの方がいいという仮説を持っている。
* Webよりスピーディに買い物できる
* 仮説の検証が必要
* 清水さん アクセス解析の取り組み
* 楽天にとってのアクセス解析
* 社内のアクセス解析標準化推進
* 国内流通総額をすべてアクセス解析で追っている
* SiteCatalyst: 全体
* Test & Target:
* SearchCenter
* Discover: 試験導入中
* 計測コール数 75億/月
* 2005年SiteCatalyst導入、2009年全社導入(経営判断)
* Test & Target : その後も増加中
* 編成部 - アクセス解析最適化推進チーム
* マルチデバイス時代のアクセス解析
* クリエイティブなアクセス解析
* 回遊性、クロスユースの測定が可能
* 楽天グループとしてひとつのサイトと考え、各サイトはページ
* 各事業間のクロスユース、親和性をみて、リンクを貼る
* リンクを貼って効果が上がるサイトを判断
* 送客元、送客先のコンバージョン(CVR: 売れた確率)
* CVR(購入)だけでなく、CTR(クリック率)もみる -> スクロールで下までたどり着くかも検証
* スクロールが少ないうちに買いたい商品が見つかったページ
* やっと見つけたので購買に結びつくケース
* => 得られたヒントをもとに改善、また検証
* Excelでレポート作るのはムダなのでExcelとAPIで自動化
* SiteCatalystを使っているが、Google Analyticsでも可能
* 進化する解析手法
* ケータイサイトのアクセス解析
* 端末IDがあるのでPCより正確な解析が可能
* PCだと家や会社で別のブラウザを使うためユニークユーザ数が増えてします。
* 楽天IDによってデバイスを超えた解析が可能になる
* ケータイサイトの場合はJavaScriptが使えないので、Apache側にモジュール導入が必要なので敷居が高い
* Flashの場合はActionScriptと連動できるので、インタラクションを計測できる
* CS5のエクステンションを使って作るのが簡単
* 検索: SiteCatalyst Flash
* 動画計測
* 再生時間別視聴数
* グループ内のCV数、売り上げがわかる
* ブログ->アフィリエイト->楽天市場 という解析ができる。売り上げ貢献度が調べられる
* Twitterの解析
* Twitter APIから検索結果をとってきて SiteCatalystに入れ直す
* 自分の発言 - リプライ - フォロワーの数
* いつどのような発言をすることで、どの程度リツイートされるか、売上につながるか
* 検索: twitter KPI
* スマートフォン解析
* 開発の工数が少し増える
* Cookieの利用に制限がある(サードパーティクッキーが使えない)
* 可能性: Flashと同様のインタラクションが計測可能
* オフライン時のでデータキャッシュ可能
* => いまは取り組みが始まっているところ
* アプリの中で計測するための SiteCatalyst APIがある
* Androidも可能
* ただし、開発工数が増える。Appleの審査が通りにくくなる可能性がある
* Appleが行動データの取得を制限する規約がある
* 両方つくって、通らなければアクセス解析がないほうに差し替える
* アクセス解析が必須になってきた
* 計測できない施策は行わない
* A/Bテストなど、意思決定の前に検証するのが当たり前
* KPIが細かくなってきた
* 因数分解によりKPIがツール化
* => 最終的には事業に貢献することが目的
* クリエイターにとってのアクセス解析
* 思いつきには限界がある
* 企画・制作の根拠を明確に
* 効果検証だけだとつまらないものになる
* 仮説を確かめてノウハウに
* 納品物は中間的なもの
* 仮説は何だったのか
* どう検証すべきか
* 納品時点でどこをアクセス解析で検証すべきかを明確にする
* 上手に早く作る、から、目的達成のノウハウへ
* Q&A
* [Q] Flash と iphoneの受け渡し方は？
* Flash側は
* 動きをみせるプロトタイプはフレームワークをつかう
* ソースを見せる場合はフレームワークを使わない
* iphone側は cocos2d をカスタマイズ
* cocos2d はFlashに似た作り方ができる
* [Q] WebとAppはどっちがアクセス数多い
* 一概には言えないが、App版の方がのびている
* iPhone最適化した方がのびる
