BREAK TIMESの勉強会に参加してきたメモをまとめてみた
今年2014/8頃に開催された、PR TIMESさん主催の勉強会レポです。
前回のイベント情報はこちら: http://breaktimes1.peatix.com/
当時は、自分の転職とかその辺に時間取られて、メモを公開するタイミングが掴めず…。
かなり、学びや発見多かった勉強会だったために、メモをお蔵入りさせるが偲ばれまして、今回のこのタイミングでまとめてみた次第であります( ･`ω･´)
さっそく、メモのまとめを書いてきます。
PR Timesの紹介
まず最初は、
勉強会を主催したPR TIMESさんの発表です。プレスリリースの配信掲載サイトを提供している企業。
PRサイトを運用していくときのノウハウを、BreakTimesブログで公開しているそうです。
どうやって運営しているか
アクセス解析して、指標を元に改善していく PDCAを回して、運営していっている。
主に、Google Analytics使って、
- ユーザーPV
- コンバージョン 。
また、ベージ毎のPVや、ヒートマップ(ページ内のユーザーが見ている部分)のデータを抽出した上での最適化等、いかにコンバージョンを高くするか、に絞った改善などをも実施している。
サイト改善するときに指標を見て、どういうテストをしているか
ABテスト(サービス紹介ページ)
- 以前は画像だったけど、動画いれてみるテストを実施
- ユーザーが、途中で離脱していたけれど、この対応を入れると、下までスクロールしてくれるようになって、コンバージョン高くなった
多変量テスト
ABテストの発展系。
より複雑な条件の上で、どのような動きをしているかを分析し、全体の傾向から改善部分を導き出すことが狙い。
条件が複雑になればなるほど、ケースの組み合わせが増えて、解析が大変になる。
多腕バンディット
- Google Analyticsでも使える
- パターンの表示割合を増やして、より最適な解が出るまで繰りかえしていく
- 結果に基づいて表示を変えていくにしたがって、少ないコストで最適な解が得られる
多変量テストでは、ケースの組み合わせを増やして傾向をみる分析方法。
多腕バンディットは、出てきた結果を元に、更に踏み込んだ条件やケースに絞っていく。それを繰り返すことで精度高い分析を得られるようにした解析手法。
PR TIMESさんの発表では、PR TIMESさんが自社サービスの改善を行う際に、その改善部分を導き出す話を聞くことができました。
配信するプレスを、より高く、効果的に配信するためには、まず問題を見つけて、最適な手法で解決する。そのフローが大事ですね。
多腕バンディットを用いたプロダクト改善については、最近cookpadさんが記事をあげていました。興味のある人は目を通して見るとよいと思います
http://techlife.cookpad.com/entry/2014/10/29/102036
UI/UXとはなにか。 UI ≠UX
イベント開催前は、セカイラボの森脇さんが、UI/UXの設計の話をされる予定でしたが。 残念ながら、森脇さんが、体調不良で未参加となり…
代打で、日本ディレクション協会の小嶋さんが発表されていました。 小島さんは - フリーランスのディレクター - Webデザイナやって、ディレクターに というバックボーンを持った方です。その方が話すUI/UX論だったので、若干ディレクタ的な目線のお話が聞けました。
ここからメモ
UIとUXはレイヤーがちがうということ
UXデザイン
⇒ UXデザイン ！！ なんのこっちゃよくわからん
実用性を設計する = UXデザイン
たとえば、普段使う椅子。椅子といってもそれぞれ全くタイプが異なる。
- 柔らかいならいいの？
- キャスター付きで動くならいいの？
- 革張りならいいの？
シックな内装に合う椅子、バーに合う椅子、コンサート会場に合う椅子… それぞれ、場、シチュエーションによって、最適な物が異なる
⇒ そういった設計をしていくのがUXデザイン
UXデザインのために考える事
- コンテンツ全体の目的、用途を想定しておく。
- ユーザーがどういう反応をするのか？
- どういう行動をするのか？
問題の定義を明確にして、想定するユーザーに正しく価値を伝えることが大事。
UIデザイン
各機能に合わせた適切なUIを作るもの。UXデザインのレイヤーより、下に位置する。 まずは、どんなUXを与えていくか、ありき
- 画面にとらわれ過ぎない！
- 使う人の気持を考える。
UXとUI の 有名な事例
NORDSTROM (大きな百貨店) IPADアプリのUX改善事例
- 実際の店舗にPC持ち込み ＋ 実際のお客さんに使ってもらって、即座にフィードバック→ 大量に付箋が貼られては剥がされていく。
- 一週間で改善できるところまで、現地でやって開発に活かす方法。
- すぐに本格的な開発には入らない。ペーパープロトタイプベース。
- アプリだけでなく、アプリをどう触ってもらうか。テーブル台にのせて使ったりする？
- アプリの使い方の設計。どういうシチュエーションで、どんなふうに？
ユーザーが実際に使っている、リアルな世界の問題を解決するために、開発を行っていく。
ここまでイメージをしながらちゃんとUIを設計する必要がある。特にスマホ。しっかり考えてやる、やらないで大きく差がつく。
広告の視点だけでなく、ツールとしての側面まで設計していくのは当然。
UX、UIとは、と安易に語られがちで、 ユーザーに価値を伝える最適な方法かどうか、はいつの間にか忘れてしまったりしてました。 この発表は、そういう視点を思い出させてくれる良い内容だったと思います。
実際にユーザーさんに使ってもらうことほど、良いデータが取れることはないので、プロトタイプ時点からユーザーを巻き込むことの大事さを、いい感じに理解できた発表でした社記
HTML5 概要 コードサンプル
この勉強会の目玉ともいえる、お話でした。 W3Cの中の人の話が聞ける機会は、本当に貴重。
講師は、Daniel Davis氏(http://html5experts.jp/ourmaninjapan/)。元Operaの英国人。 最初の触りで、英語セッションの雰囲気を漂わせつつ、参加者にある種の覚悟をさせてましたが、 本人、日本語ペラペラで、普通に話聞けました(；・∀・)
HTML5で新たに採択されつつある、仕様の話が多めでした。
当日の資料は公開されています。
http://breaktimes.hatenablog.com/entry/2014/10/14/194903
深く知りたい方は、この資料の方を見ると捗るかと思います。
ここからメモ
HTML5とはなにか
- HTML：
構成を決める - CSS：
見た目を決める - Javascript：
動きを決める
つまり、
HTML5 = HTML4 ＋ 新しい仕様 − 古い仕様
そもそもHTMLとは
HTML = Code onxe , rearch people everywhere.
⇒ PC、スマホ、問わず使える。汎用的な仕様。
大事なのは、正しいマークアップをすること - headerタグ等を適切に使うと、検索エンジンが有利に働く
現状では、ブラウザ差異が小さくなってきた。
ブラウザが標準化されてきた。どこでもそこそこ同じコードで動く。
まだ、完全に対応されているわけではないが、昔よりはかなりマシになっている。
HTMLは、WEBだけで使われている…わけでもなくなってきた
WEB標準大事； みんながわかる = みんな使える
HTML5が目指す先。やろうとしていこと。
- より簡単
- よりはやい
- よりフレキシブル
これまで以上にいろいろなことが、早く、簡単に実現できるようになる。
UserMediaAPI
- ユーザーのカメラとマイクのデータ取得
- 必ず、ユーザーに同意を求めるダイアログを出すようにしている。このタイアログは無効化できない。
- 取得したカメラのデータは、javascriptで操作できるようにしている。
- API仕様は、汎用的に使えるように設計している。
グローバルにある、navigatorオブジェクトを経由して、使用する。
// 使用できれば使うし、ダメだったらエラー処理呼ぶように使える。
navigator.getUserMedia({video:true}, successCallback, errorCoallback);
GeolocationAPI
結構前からある。4年前くらい？ ユーザーの現在場所を使って、地図情報が取れる。
navigator.geolocation.getCurrentPosition(callback: position);
Device Orietation API
デバイスの向き、加速度とか取れる
IOSが先立って実装。標準の方が遅れてた。
取得したデータをサーバーに乗っけて、いろいろできる。
車載ブラウザあたりで使えると、新しいことができる可能性が。
window.ondevicemotion = function(event) {
// event.acceleraionオブジェクト = { x, y, z} が取得可能
// event.rotationRateオブジェクト= { alpha, beta, gamma }が取得可能
}
Systen Infomation API
システム情報を取得できるAPI。
気温、気圧、湿度、騒音、距離感
まだ全部はできていない。ので、ブラウザには対応していない。APIはできてる。 デバイスハードウェアが必要になってくるので、自由に使えるようになるまで、時間がかかりそう。
naviator.system.monitor("Thurmal", successCallback);
// event.thermal { state = 気温}
デバイスを介する兼ね合いもあり、データ取得が間に合わない場合は、なにもしないように動作する。
WebSocket API, WebRTC
リアルタイムでインタラクティブなデータ通信で、HTTP使うのは遅すぎる。
WebSocket： 使いやすい。けど、性能そこそこ。
WebRTC： 早いけど使いにくい
WebScoket
- コネクションのackを、最初の一回だけやって、後はやらない。早い
- 同時に送ることができる。受信もできる。
- ただし、サーバーは経由する必要あり。
WebRTC
- 最初の一回だけサーバー通信する。
- あとはP2Pで通信するようになる。
- サーバーを経由しないので、はやい
var socket = new WebSocket("ws://address");
socket.onopen = { }
SkyWayという、WebRTCを簡単に試せるサービスがあるので、簡単に試せる。
Offline Storage
複数やり方がある。
- ServiceWorker
API策定中 - IndexedDB
ブラウザによって動きが違うのでライブラリ推奨 - LocalStorage
現時点、すべてのブラウザで使える。信頼性が高い。
var online = navigator.online; window.lodclstorege["Name"];
LocalStorageは、5MBくらいデータ持てる。一時データとしては十分な容量。
Responseive Images
デバイスサイズによって、表示する画像を切替えるもの。 マルチデバイス対応が容易にできるようになる。
<picture>要素- srcset属性
まだ入ってない。開発版ブラウザには入っていたりする。 ブラウザがサポートしてなくてもエラーはでない。画像がちゃんと表示される。
<picture> <source media='(min-width: 45em)' srcset='large.img'> <img src =""> <!-- 回避策 --> </picure>
未来のはなし
HTMLでハードウェアを操作できるようになれば、 - スマートカーを実現して、走行データを収拾した後、渋滞予測やの算出など可能に。 - 無人ドローンを用いて、農場の監視を行い、蓄積したデータから、農場の管理を自動化したり。
現時点で、Hueという商品がある。これをWEBで操作できるようになると、面白いことができそう。
HTML5でやっていくこと、できることの解説が詰まった、濃い内容だったと思います。
当日は、実際にビデオチャットを、HTMLだけで実現するデモが織り交ぜられての内容でした。
そういえば、昨日、ちょうどHTML5 が勧告となった速報が流れましたね。
http://www.w3.org/2014/10/html5-rec.html.ja
この話を聞いたときから、ずいぶん進展があったようです。
今後、語られたいろいろなAPIが実際に普及し、使われることによって、 今現在では、スマートフォンしかできないことが、WEBにもできる。そういう時代がきそうな予感がします！
終わりに
で、なんで唐突にこのメモを公開する気になったかというと、
PR TIMESさんの勉強会が、近日開催されます！
http://breaktimes.hatenablog.com/entry/nite2
次回の内容も、かなり勉強になりそうですね。これを無料でやってくれるのだから、大変ありがたいことです(´ω｀)
良い勉強会なので、行ったことない人は、行ってみるとよいのではないかと思います！
自分は、絶賛炎上中で行けそうにないので、 行った方はレポして頂けると大変嬉しいです(´・ω・｀)
