FUJILOG

見た、聴いた、触れたこと。 動かしたもの、書いたもの。 ウェブとリアルの備忘録です。

参加録 「アプリ開発のいろは 企画からマーケティング、グロースハック、品質管理に至るまで」

グロースハックサービスで有名どころが集まるイベントということで気になり参加しました。 

 

イベントの内容はタイトルが指すような企画、マーケ、…といった各論ではなく。

総じてグロースハックをしていく上で、各社サービスであればこういった改善ができます、といったお話でした。

 

日時:2017/05/24 (木) 19:00 〜 21:00

場所:Yahoo!Japan 赤坂見附

d81bc78593dbc190da79860ab2.doorkeeper.jp 

 

1. 講演挨拶

Yahoo!高田徹さん

ヤフオクアプリ、経営戦略本部長
いま2ヶ月目

過去はいままで広告をやってきた。

f:id:michael-unltd:20170524180952j:plain

 

Yahoo!はアプリファーストにシフト

 

ヤフオクアプリ(※ニールセン調査)
 9.7Millioユーザー

f:id:michael-unltd:20170524181103j:plain

 

ロイヤリティ
 アプリのほうが定着率、収益性が高い

 

PDCAサイクル
 アプリは設計が命
 iOSは審査が大変

 

Key Success Factor
 Metrics(ユーザー属性、デモグラ)
 Push(スマホの体験)
 Tracking(PDCA
 Quality(バグ出さない) 

f:id:michael-unltd:20170524181257j:plain

 

2. App Annieデータから見るアプリ市場トレンドとアプリ企画・運営のポイント

App Annie
向井俊介氏

ゴール
 企画、運営において、AppAnnieのデータあったらいいと思ってほしい。

f:id:michael-unltd:20170524182128j:plain

 

クイズ

2016年、収益学が多かったのは?
 モンスト

iOS/Google DL数が3番目に多かったのは?
 SNOW(1700万)

単月比較で、2014年と2016年で成長率高かった国のは?
 パキスタン(1,950%)
 GooglePlay
 インドの隣、アプリ大国

 

これは、世界中のアプリのデータをもっているからわかる!

 

向井さん

 B2Bでセールス15年

AppAnnie

 世界アプリデータのプロバイダー
 2010年、サンフランシスコ
 170億円出資してもらったので上場しないと。

 

どのクリエイティブ、インプレッション、CPIとか。
 ゲームの主要どころ。
 金融も増えている。ファクトデータ。

f:id:michael-unltd:20170524182151j:plain

 

本日のアジェンダ
 ・市場の概況
 ・App Annieデータについて

 

60分のスマホ利用のうち53分。
 メディア接触はアプリにシフト。

利用時間は伸びてる

インドが最多
1日あたりの利用時間は韓国が最多

f:id:michael-unltd:20170524182357j:plain

f:id:michael-unltd:20170524182419j:plain

f:id:michael-unltd:20170524182457j:plain

 

数字をみると頭打ちではない。
年率20%くらいで売上も伸びている。
ゲーム以外がゲームを侵食していく流れがある。

 

新企画とかで使えるデータとは。

「データ使う目的」として、分析者が共通で言うこと。

 

「問題を解決するため」の裏付けが欲しい。

分解して各要素を深く理解する(ここでデータを使うべき)

結合させて結論を出す(ここで使うと失敗する)

反復

 

事例(Amazon vs NETFLIX

f:id:michael-unltd:20170524183201j:plain

アマゾンプライムムービー
 コンテンツを8本作成して、無料で公開した
 どこで停止したか、離脱したか、繰り返し見たか、のデータを採取

 "Alpha House"
 平均7.4に対して、7.5の評価

対して、NetFlix
 レビュー、監督、主演

 "House of Cards"
  評価9.5
  リスクを追って、制作した。

 

データ
 細かい理解をするにはデータがいい。
 結論をデータで出そうとすると謝る。

f:id:michael-unltd:20170524183227j:plain

 

20〜30代の女性
 (女性学生から子育てママさん層まで)
 どこをベンチマークすべき?

f:id:michael-unltd:20170524183318j:plain

 

メディアに取り上げられるアプリを基準に選ぶ
発表されるDL数や会員数を基準に選ぶ?

 

小売業データの例(A~I社で社名は伏せている)

f:id:michael-unltd:20170524183457j:plain

 MUJIとか。店舗数が多いのはDL数多いのはその通り。
 アクティブ率多いのは東急ハンズのアプリ

 

本当に見るべきは?
 MAU(たくさん見てもらう)
 Sessions(店舗に多く来てもらう)
 Session Time(滞在時間)

 

自分たちの立ち位置と、「優位性や改善箇所」を明らかにするのが大事

 

DL数、収益
 ランキングアルゴリズムは変動している
 最近は、ランキングがDL数に直接寄与しないようになってきた

 AppAnnieユーザーには、マーケバジェットの配分最適化や、提案の精査ができるようになってほしい。

 

利用状況
 DL数伸びずとも、測るべき指標は他にもある。

 成功するための材料は何か?を定量な根拠として把握する
  スパイクするタイミング
  どのタイミング
  どれくらいDL数
  休眠ユーザーの掘り起こしに有効とか

f:id:michael-unltd:20170524183725j:plain

f:id:michael-unltd:20170524184025j:plain

f:id:michael-unltd:20170524184122j:plain

 

利用者数、回数、時間、様々な試作にどう相関性あるのか?を調べる。

 

競合を知る
他のアプリに可処分時間を盗られてる

 

メルカリと競合(このアプリに時間を割いている)
 C Channel
 ロカリ
 Spotlight

f:id:michael-unltd:20170524184406j:plain

 

クラシル
 リテンションレート
 3日でリテンション上がる(何かしている?)
 7日でリテンション上がる(何かしている?)
 AppAnnieは結果データをもっているので、それから推測。

f:id:michael-unltd:20170524184513j:plain

 

機能追加事例
 UNIQLO
 ユーザー数(6ヶ月ぶりに客数復活)
  利便性向上
  不満解消

f:id:michael-unltd:20170524184712j:plain

 

下記に効くデータをもっています
 どの広告がインプレッション?
 利用継続してもらうため
 定量、定常的にデータ。

f:id:michael-unltd:20170524184905j:plain

 

twitter: @AppAnnieJapan

 

3. モバイル計測ツールの概念を超えて

AppsFlyer
 クライアント潜在ニーズさえも解決できる「モバイル計測ツール」
 オオツボさん

 

2社は競合しません

 管制塔:AppAnnie

 コックピットの中の情報:AppsFlyer

 本社はイスラエル

 

コロンブスの卵
 概念を超える話し

f:id:michael-unltd:20170524185224j:plain

 

計測ツール
 検証のため?

 

計測SDKは審判である
結果を出すひと=エージェンシーとか

 

市場にはフラグメンテーションが起きている

 広告主、アドネットワーク、ユーザー
 広告主、AppsFlyer、アドネットワーク、ユーザー

f:id:michael-unltd:20170524185400j:plain

f:id:michael-unltd:20170524185424j:plain

f:id:michael-unltd:20170524185502j:plain

 

2017年のマーケターの課題
 1. 忙しさからの解放
 2. ROI改善
 3. 不正検知
 4. リテラシー
 5. サービスアプリ化
 →どうすれば解決する?

 

AppsFyler
 世界シェア65%
 SDKインストール、アンインストール数で最高評価(MOBBO社調べ)

f:id:michael-unltd:20170524185716j:plain

f:id:michael-unltd:20170524185804j:plain

 

課題1:忙しさからの解放
 リアルタイムでコスト&ROIのリアルタイム分析
 管理画面カスタマイズ可能
 管理画面上でクロス集計できる
 オーディエンス構築(連携しているメディアに自動連携可能)
 ライブアラート(閾値チェック)
 モバイルアプリもあるので、そこから閲覧可能

f:id:michael-unltd:20170524185903j:plain

f:id:michael-unltd:20170524185933j:plain

f:id:michael-unltd:20170524185952j:plain

f:id:michael-unltd:20170524190019j:plain

f:id:michael-unltd:20170524190112j:plain

f:id:michael-unltd:20170524190144j:plain

 

課題2:ROIの改善
 アンインストール測定
 流入経路がわかる
 休眠ユーザーとアンインストールユーザーの区別ができるようになる

 ファーストタッチ Twitter
 セカンドタッチ AppLovin
 サードタッチ GoogleAdwards
 ラストタッチ Facebook(ここしか見ないと誤る)

f:id:michael-unltd:20170524190638j:plain

 

 TVコマーシャルの効果測定

  代理店アカウントの開示
  レポート数値をユーザーも確認

 

 オムニチャンネルLTV
  BeforeとAfter

f:id:michael-unltd:20170524190821j:plain

 

課題3:不正対策
 グローバル
 動画広告の23%が配信詐欺
 インターネット広告費1.6兆円、うち2,600億円を無駄に支払っている

f:id:michael-unltd:20170524190930j:plain

 

 不正種類(インストールハイジャック、マルウェア
  メディアクリックしたかのように見せかける

 不正種類(クリックフラッド)
  大量のクリックを配信して、無関係なダウンロードを促す 

f:id:michael-unltd:20170524191134j:plain

 不正種類(インストール詐欺)
  クリックセンターでBot等でインストールを繰り返す
  新規端末比率をAppsFylerはデータ持っている、不正検出可能

  インストール量産、100%
  アクティブ不正防止ソリューション(DeviceRankを適用化)

f:id:michael-unltd:20170524191348j:plain

  

 Active Fraud Insights管理画面で検知可能
  不正が発生すると、配布直後の挙動がおかしい

f:id:michael-unltd:20170524191508j:plain

 

(啓蒙のため)以上のような内容をまとめた、モバイル詐欺用語集サイトもあります

 

課題:リテラシー、透明性
 中立性、クライアントと代理店の中継ぎ

 

課題:サービスのアプリ化
 ユーザーとのエンゲージメントが高まる
 昔はメルマガ、いまはアプリのPush通知

 

事例
 カネボウのSmileConnect
 カネボウのドングルをもらってジャックに挿入すると保湿量を測定可能

f:id:michael-unltd:20170524191815j:plain

 

アプリシフトの時代

  コンティンジェンシー理論
  技術が組織を規定する時代

f:id:michael-unltd:20170524191943j:plain

 

アプリ制作ツールのご紹介
 Monoca
 Yappli

 

ApplsFlyerの及ぼす効果
 モバイルマーケのファネル全体に優れた効果を発揮
 プロモーションのための計測ツールとして。

f:id:michael-unltd:20170524192042j:plain

f:id:michael-unltd:20170524192239j:plain

 

4. アプリの成否は導入期にあり ~意識すべきKPIとグロースハック手法~

Repro
 代表取締役 平田裕介さん

 

アプリ成否は導入機にあり
 導入すべきKPIとグロースハック手法

 

ReproはAppsFlyer推し
なぜアジャストを使用しているのか?
 代理店に有利に見えるデータ

 

経歴

 1980年36歳
 4カ国
 3回目の企業

 

本日アジェンダ

 1:アプリビジネスの典型的な失敗事例
 2:サービスライフサイクルとKPI
 3:導入機のグロースハック手法

 

グロースハック
 水漏れしないバケツを作ろう

f:id:michael-unltd:20170524192700j:plain

 

累計コスト(例)
 開発:6,000万円
 プロモコスト:2,000万円
→いきなり広告全力投下せずに、まずは100万円くらいを検証にまわして欲しい。

 

アプリ周りのサービス持っている
 企画、開発も可能
 ユーザーがどう使っているかを動画で確認可能
 ユーザーのターゲティング
 アプリのPush
 リタゲも可能

f:id:michael-unltd:20170524193028j:plain

 

Reproユーザー
 46カ国
 3,500アプリ以上
 非ゲームで強い

 

サービスライフサイクル
 導入期
 成長期
 成熟期
 衰退期

例)フリル先行、メルカリが広告でシャア獲ったみたいな話し。

f:id:michael-unltd:20170524193144j:plain

導入期
 継続率、コンバージョンレートを見る
(競合はAppAnnieで判断)
成長期
 CPA優先
成熟期
 LTV優先
衰退期
 利益率

 

テーマ
 ・改善・アプローチ
 ・アプリ内マーケアプローチ

ユーザーコミュニケーションの設計が大事。
UIのみになってない?

 

Ken.G
 株式会社トラクション
 グロースハッカソン主宰

 

週次で下記を回す
 ①リテンション分析でマジックナンバー特定
 ②ファネル分析で離脱箇所を特定
 ③定性分析で離脱要因を特定、改善

例:スマービー社が上手い
 改善施策の効果をReproの動画で確認

f:id:michael-unltd:20170524193447j:plain

 

マジックナンバー
解説

例:Twitterの黎明期、フォロー5人以上だと継続率高い。

f:id:michael-unltd:20170524193623j:plain

f:id:michael-unltd:20170524193634j:plain

 

どうやってマジックナンバーを見つけるの?
 Reproでは、コホートから、クエリを絞る。

f:id:michael-unltd:20170524193807j:plain

 

お気に入り、1回より3回のほうがリテンションレートが上がっている。
3回させるにはどうようなUIにする?という発想になる。
結果、1ヶ月で140%ほどレートが改善した。

1回:

f:id:michael-unltd:20170524193751j:plain

3回:

f:id:michael-unltd:20170524193909j:plain

 

マジックナンバー分析(例図)
 縦軸:1週間後の継続率
 横軸:ユーザー数

※この項目を、ユーザー数増やすような施策が必要となる。

f:id:michael-unltd:20170524194014j:plain

f:id:michael-unltd:20170524194123j:plain

 

「ファネル分析」「定性分析」でアプリ改善
 イベントごとに…なぜ落ちたのか?
 ユーザー行動を定性的に分析する(動画で確認可能)

f:id:michael-unltd:20170524194310j:plain

 

アプリ内マーケは大きく2通り
 Push通知
  リテンションレートの改善
 アプリ内メッセージ(ポップアップ)
  コンバージョンレート改善寄与

f:id:michael-unltd:20170524194413j:plain

 

継続率改善の経済効果
 広告予算 500万円
 獲得ユーザー数 10,000人
 1ヶ月後残存ユーザー数 1,500人→2,000人
※Reproがあれば、リテンションレート5%ほど向上可能

f:id:michael-unltd:20170524194501j:plain

 

イケてないアプリ運用
 全員に同じメッセージを送る
あるべき運用
 レベル感に応じてメッセージを変える

 

「コミュニケーションの最適化に近道なし」

f:id:michael-unltd:20170524194808j:plain

 

シナリオ作成
 (縦)ユーザー行動
 (横)ユーザーステージ
  仮説を作る
  シナリオを試す

f:id:michael-unltd:20170524194836j:plain

 

シナリオ作成(導入版)
 ステージ、ユーザー状態、成長阻害要因(仮説)
 仮説を徹底して作るのが良い
 1〜2時間くらいの作業でやってみる
 各ステージについてエンジニア相談

f:id:michael-unltd:20170524194946j:plain

 

効果検証しましょう。
 各フェーズで良かった、悪かったを抑える

f:id:michael-unltd:20170524195211j:plain

 

改善案の策定
 施策を見直す OR シナリオを見直す
  Who
  When
  What
  How

f:id:michael-unltd:20170524195459j:plain

 

最新事例、リッチPushは120%ほど効果高い
メルマガ「グロースハックジャーナル」あります

 

5. クラッシュがアプリを殺す ~アプリ運用における品質管理~

FROSK
「クラッシュがアプリを殺す アプリ運用における品質管理」

 

運用の守りの部分

 

2012年
 Business to Developerをコンセプトにスマホ開発者向け支援ツール

 

SmartBeat

 3年間の知見
 導入 1,500アプリ
 MAU 1.5億人
 エラー検知数 1,000万件/day

f:id:michael-unltd:20170524200820j:plain

f:id:michael-unltd:20170524200851j:plain

 

アプリが落ちる
 アプリのレビュー
 品質問題のコメント

  良い☆5つ
  落ちる☆1つ

  レーティング平均 3.59
  落ちるを含むアプリ平均 1.96

 

ダウンロード数への影響大
 70%のひとがレビューを読む
 評価1アプリは90%のひとがダウンロードしない

f:id:michael-unltd:20170524201250j:plain

 

継続率へも影響
 リテンションレート
  クラッシュ経験ユーザーはそうでないユーザーより辞めやすい

f:id:michael-unltd:20170524201349j:plain

 

なぜアプリが落ちる?

 コード起因
  配列数がダメでException
  init(初期化)と alloc(メモリ領域)の記述順が逆だったり
  xcodeで環境設定ミス、SIGABRT

 多様なデバイス、実行環境
  画面サイズ
  メモリ容量
  CPUパフォーマンス

 

FROSKの端末
 Androidの上位20デバイスでもシェア40%に満たない

f:id:michael-unltd:20170524201819j:plain

 

多数のiOSバージョン(断片化)
 2012 -> 2017...
 iOS 10
 Android N

f:id:michael-unltd:20170524201924j:plain

 

品質保証が求められる
 Androidバラバラ
 iOS自動アップデート
  リリースされたらすぐに動作保証する

f:id:michael-unltd:20170524202040j:plain

f:id:michael-unltd:20170524202141j:plain

 

クラッシュOSアップデート事例
 OS仕様変更
  iOS10でユーザーデータアクセスの歳、Info.plistに使用目的記述とユーザー許可が必要になった
 API仕様変更
  iOS以前は”en"だったものが、iOS9からは”en-US”のようにハイフンの言語と地域の表記が必要になった
 OS挙動変更
  rootViewControllerの初期化しないとクラッシュ
 OS自体の不具合
  iOS9アップデート後、Frameworkで不具合発生。

f:id:michael-unltd:20170524202423j:plain

 

アプリへの継続的な機能追加
 平均回数 1.6回/month

f:id:michael-unltd:20170524202551j:plain

 

なぜ、アプリが落ちるのか?
 実装、設定不具合
 多様なデバイス、OS断片化、継続的な機能追加

f:id:michael-unltd:20170524202639j:plain

 

クラッシュ問題への取り組み方
 Smartbeatの活用方法

f:id:michael-unltd:20170524202742j:plain

 

Smartbeatとは…

 SDK入れて稼働する。
 自動、リアルタイムで動作。
 Webコンソールで確認。
 クラッシュレポートが取得できる。
 スクリーンショットもあり。

f:id:michael-unltd:20170524202804j:plain

f:id:michael-unltd:20170524203152j:plain

f:id:michael-unltd:20170524203212j:plain

 

アプリバージョンとエラー別にグループ化される。
 影響の大きいものから直しましょうと方針が取れる。

f:id:michael-unltd:20170524203339j:plain

 

品質の可視化

 平均クラッシュ率。
 業界平均の値も見れる。

f:id:michael-unltd:20170524203427j:plain

 

改善事例
 クラッシュ数の削減

f:id:michael-unltd:20170524203539j:plain

 

運用のリスク最小化
 クラッシュ率が基準値以上なら不具合修正
 基準値未満ならアップデート通知

 平均値
  アプリ 0.5% ~ 1%
  ゲーム 3% ~ 4%

f:id:michael-unltd:20170524203644j:plain

 

顧客満足度の向上
 不具合についてバージョンを聞かなくても良くなる

f:id:michael-unltd:20170524203825j:plain

 

まとめ。

f:id:michael-unltd:20170524203922j:plain

 

FROSKのミッション
 全世界の開発者の貴重な時間をセーブする。
 コンテンツの開発に注力できる環境のためのツールを提供する。

 

以上です。

 

本日の学び

  • 言うなれば、AppAnnieは航空管制塔、AppsFlyerはコックピットのコントローラ。お互い競合ではない。
  • データは原因究明に使うべし、データから直接提案に持っていくと市場に合わなかったりしてハマる
  • 他社を真似たKPIではなく、期待する効果を測る自社のKPIを設定しよう
  • 流入経路を正確に把握できるようになれば、アトリビューションの見当違いや、不正インストール防止が可能
  • シナリオ(仮設)立ててPDCAを回そう、PDCAを回しても改善されないならシナリオを見直そう
  • レビュー値低いアプリはダウンロード伸びない、アプリクラッシュでレビューの平均値下がるから要注意

 

■ 音声データ

こちらまで(※133MB)

draw.ioのテンプレートが進化している件

tl;dr

draw.io  はいいぞ!

 

今まで、UMLやダイアグラム、視覚表現を必要な図を作成するのにCacooを使っていました。

 

が、2015年くらいにブクマしていたWebサービス "draw.io"

見返す機会があったのでもののついでで覗いてみました。

 

すると、久しぶりに見るとテンプレが充実しており、これは利用したほうが良いなと。

 

まず最初に目に飛び込んできたのが、AWSの3Dテンプレある点。

f:id:michael-unltd:20170524012643p:plain

次いで、Exportフォーマットも豊富です。

PNGJPEGSVG、PDF、HTML、XML…主要なフォーマットに対応。

 

GooleDocs、GithubDropboxどれでも任意の場所にExportできます。

f:id:michael-unltd:20170524013646p:plain

そして、作成したイメージはXMLファイルなので、ファイルを読み込めば再現も簡単。

f:id:michael-unltd:20170524013658p:plain

まさに至れり尽くせりなツールでした。

 

操作も迷うところなしです。

保存対象の媒体を指定して。

f:id:michael-unltd:20170524012346p:plain

認証。 

f:id:michael-unltd:20170524012402p:plain

保存先ディレクトリを選択して…。

f:id:michael-unltd:20170524012417p:plain

ファイル名を指定。 

f:id:michael-unltd:20170524012428p:plain

すると、テンプレの選択画面になります。

 

フローチャートもあり。

f:id:michael-unltd:20170524012500p:plain

f:id:michael-unltd:20170524012510p:plain

f:id:michael-unltd:20170524012603p:plain

ネットワーク図もあり。

f:id:michael-unltd:20170524012520p:plain

 プレゼン用の資料にも使えそうな図もあり。 

f:id:michael-unltd:20170524012533p:plain

f:id:michael-unltd:20170524012615p:plain

 UMLもあります。

f:id:michael-unltd:20170524012544p:plain

Github始め、ファイルのバージョン管理も可能なので、これは捗りますね。

 

以上、draw.ioのご紹介でした。

 

東京都内コワーキングスペース一覧を眺める

2017/05現在、100駅相当。

コワーキングスペース掲載数は166箇所。

www.makeleaps.jp

 

よくぞまとめていただいた感。 

ざっと眺めてみると、特徴はこんな感じ。

  • お店ごとに1日単位で利用できる場所、そうでない場所と分かれる
  • 月単位での契約が必要なお店では、初期登録費用が発生する場所が多い(※おそらく会社設立時の登記可能なような場所)
  • 利用費用は、1日単位では1,000〜2,000円のレンジが多い。月額はピンきり。

 

ちなみに行ったことあるなかで、個人的なオススメは下記。

  • THE TERMINAL(JR原宿駅
    ドリンクバー有り。浅煎り、深煎りの美味しいコーヒーが飲めます。
  • ありんこオフィス(JR渋谷駅)
    リーズナブル。広さもボチボチです。

 

海外の施設をみると、キッチンがやらバルコニーがあったりと快適な様子。

日本の都市圏で同等のスペースを確保するとなると、利用費都合で厳しいのかもですね。

【サンフランシスコ】コワーキングスペースまとめ(2016/8) - NAVER まとめ

 

そういえば、2017年にコワーキングスペースの黒船 "WeWork" が上陸するとのことですが、どこに開設されるか楽しみです。

www.lifehacker.jp

 

「ここでしか聞けないP&G消費者起点のマーケティングの秘密」

…を聴いてきましたが、講演内容は写真撮影および録画禁止でした。

 

日時:2017/05/22 19:30-22:00

場所:五反田スタンダード会議室

peatix.com

 

tl;dr

  • P&Gは情報を外に出さない会社
  • マーケティングは、「ヒト」について徹底して考えることが肝心
  • 技術が生活を変わる節目で、日常生活はより面白くなる 

 

また、内容は口外無用とのことでしたので、紹介された書籍のみ記載しておきます。

 

影響力の武器[第三版]: なぜ、人は動かされるのか
ロバート・B・チャルディーニ

心脳マーケティング 顧客の無意識を解き明かす

Harvard Business School Press
ジェラルド・ザルトマン

なぜ「戦略」で差がつくのか。―戦略思考でマーケティングは強くなる―

音部大輔

確率思考の戦略論 USJでも実証された数学マーケティングの力 (角川書店単行本)
森岡 毅

 

m__m

参加録「アクセンチュア社×SAP社 合同勉強会 デジタルトランスフォーメーション最前線」

土曜日、快晴。夏のような日差しでした。

SAP社のイベントが珍しく、聞きに行ってきました。

 

日時:2017/05/20 13:30-17:00

場所:渋谷dots. 
eventdots.jp

 

tl;dr

以下内容を知ることができて良かったです。

  • SAPは、エンタプライズで溜めたナレッジをスポーツビジネスに適用している
  • さらには、スポーツを介した興行ビジネスと町興しをデータドリブンでやってのけた
  • SAPではデザイン思考をメンバー内共通言語としている、またイノベーションセンターを各国に設立している
  1. SAPクラウドを使用したアプリのアーキテクチャ
  2. SAPを使用したビジネス要件
  3. 実アプリケーションのユーザーインターフェース
  4. SAPアプリの開発環境含む概要(※開発環境はGUIも使用可能で、VisualStudioっぽい)

 

以下講演メモ。

第1部 SAP


SAP(名称:エスエーピー)
吉越輝信氏
twitter: @teru4454

 

経歴:

 SAP 11年目

 鉄鋼企業の情シス
 西海岸(JAVA
 Java Sier
 韓国本社 Eコマース
 西海岸本社のUXテクノロジー
 US西部セキュリティパッケージ
 いまここ

 

SAP

 グローバルで80,000人
 国内3000社強、と付き合い

 Forbes global 2000の70%強と関係あり

 

社是:「世界をより良く、人の暮らしを良くする」

 

SPORTS × IT = ワクワク

 デジタル体験事例
  データで選手のパフォーマンス向上

  ヨットレース、カーレース
  乗馬、クリケット
  シルクドソレイユ
  カジノ、フットボールNBAも担当

 

  • Fan
  • Team
  • Operations 

f:id:michael-unltd:20170520134156j:plain 

2014 FIFA優勝支援

提供したデータ、ブラジルから貢献を言及してもらった

 

視覚的に、グレーゾーンがあるフィールド

トレーナーの待ち行列が多かった 

 ※当初選手を待たせていた、これを選手が空き時間にシミュレーションできるようにした
スキルを上げるのでなく、監督の戦術を共通理解として、即時の再現性高めることができた

f:id:michael-unltd:20170520134348j:plain

 

成功手法を業界をまたいで横展開

「SAP Sports One」

f:id:michael-unltd:20170520134551j:plain


人事データも可視化
ドクターチームが解散すると選手データが破棄されてしまっていた(※コンディションデータの蓄積が必要)
どのコーチが選手の誰に何を言ったかをカレンダーで共有

サービスはSaaSで提供している

 

テニス
リアルタイムDB「HANA」で取り込み

Wozniak選手のプレーデータ

f:id:michael-unltd:20170520134755j:plain

 

経営判断:女性トーナメントの賞金総額を男女同額にしてみせるというKPI

前代未聞のルールチェンジを実施

 女子:コートチェンジのタイミングでアドバイスをしてもいい

結果、ATP、WTAが総額一緒になった快挙

 

NBAはプラチナチケット
 すべて売れてしまう。

 チケット売る努力は要らなかったが、ファンの高年齢化が起きていた。

 

若い世代へのアプローチ
 デジタルに振って、そのコミュニケーションツールを無料にする
 アリーナに来れないひとが楽しめるようなサービス

f:id:michael-unltd:20170520134954j:plain

f:id:michael-unltd:20170520135107j:plain

f:id:michael-unltd:20170520135153j:plain 

SAP Connected Arena(スタジアムアリーナ)

バイエルン
 60,000人収容
 キックオフまでに全員座らせること
 人流コントロール

チームアプリ
電子チケット
どういうひとが来るかが事前にわかる

f:id:michael-unltd:20170520135311j:plain

f:id:michael-unltd:20170520135314j:plain

f:id:michael-unltd:20170520135336j:plain

f:id:michael-unltd:20170520135400j:plain

なぜ、SAPがスポーツ?

エグゼクティブがスポーツ大好き?
 Dietmar hopp SAP co-founder(サッカー)
 Bill McDermott(バスケ)
 Hasso Platner SAP(ヨット)

 

スポーツ事例は最高のショーケースIndustry

 

25業界のお客様

f:id:michael-unltd:20170520135632j:plain

 

Industry swappingを起こす
 革新のための手法
 他業界の最先端を取り込む
 イノベーションは非常識
 流通に科学を持ち込む

 お客さんの好きなネタを持ち込む

 

注力
 SAP Predictive Analytics(※KXENを買収)
 モデリング
  数時間、低スペックPCでも動く

 伝統的モデリング
  数週間〜数ヶ月

f:id:michael-unltd:20170520135821j:plain

 

One to Oneマーケ事例
 ガストクーポン
 CCC
 ANA空席予測

 

一球予報
 巨人の坂本選手
 なぜバットを振る?
 (わかった)
 1球前のボールが高い位置に来ると、次の球が
 次のゲーム、点取れそうだよとBotがつぶやくなど。

f:id:michael-unltd:20170520140116j:plain

 

火の鳥Nippon
 バレーボール、真鍋監督
 3秒内のレスを確認、データ仕込み

 HANAでPredict Analyticsで実装
  セッターへのボール返却のパターン

 

2000億台
 ミレニアム世代が75%

 ツールは現れている

 突然のデジタルエコノミー
 (UberAirBnB、Tesla、UnderArmour(※ヘルスケアベンダー)、UPS(※在庫を持たない、3Dプリンタで発注ごとに制作)、Amazon、…)

 

デジタル化の潮流

Bevarage Analytics
 コスト削減、収益改善が容易になる
 ビールサーバ企業がデータ提供
 キリンビールNTTデータが同様のことを始める

f:id:michael-unltd:20170520140929j:plain

 

KAESER(ケーザー)
 工場用装置ベンダー
 マシン販売から、使った空気の分だけ買ってもらうよう方針転換
 クライアントは資産をもたなくていい
 どの工場で使われるかのデータが集められるようになる

 

mi addidas(マイ・アディダス
 既製品に色を自分で選べる
 全パターンは1.4兆パターン
 現状、販社経由モデルは継続
 トレンドが読めなかったから始めた
 どういう傾向が若者に人気かわかる、次の開発に繋げる

 

ハーレーダビッドソン
クーパーも同様

 

生産ラインまで繋げる
既存モデルを崩さない

 

17のビジネストレンド

 

デジタル時代の強み
 顧客接点の大きさ
 マスカスタマイゼーション
 リードタイムの短縮によるコスト削減

 

Industry4.0
 水力、蒸気
 電気
 コンピュータ
 デジタル

破壊的イノベーション
 (3.0)既存技術やビジネスモデル
 →
 (4.0)非連続的なビジネスモデル

バチカン市国
 コンクラーベ
  2005年(スマホ無い群衆図)
  2013年(スマホだらけ)


共創
 なかからイノベーションが生まれにくい
 破壊的イノベーションを産むために

2016.08.29
 SAP 革新のジレンマ、日経BP記事

2010年 10Bユーロ
2015年 20Bユーロ

 

SAP変革の鍵

 オープンイノベーション

f:id:michael-unltd:20170520141801j:plain

 

People
 異邦人と交わる
 ※ワークショップを開催
Place
 城下町から離れる
 ※本社のなかから新規事業をやると視線が気になる
Process
 共通言語
 フレームワーク
 ※デザイン思考で動く

 

過去、人里離れて、こもって?
イノベーション

人と人の距離がドライバ
現代では、こもるな!

近さが鍵
 イノベーションを起こすには。

f:id:michael-unltd:20170520142225j:plain


SAP PaloAtoLabs
dスクール(SAP創業者が寄付してできた)
HANAHAUS (ブルーボトルコーヒーを誘致して、尖ったひとを配備、コラボを起こす)

f:id:michael-unltd:20170520142255j:plain

 

SAPシリコンバレー訪問 2016
 210件
 1,350人来訪
 37人社長
 80%がIT以外のひと

シリコンバレーオフィスのランキング
 13位がSAP

 

 

福井県鯖江
 Opendata推進市
 高級メガネシェア9割
 JK課発足
 SAPも取り組み
 未来創造フォーラム、コドモプログラミング

 Hana道場も創設
  こども起業家道場
  地元NPOが運営

 

Open Innovation
 県外企業も誘致
 鯖江で開催

 

Forbes 2017年6月
 日本を元気にする88人

 

福井県京福バス、NTT、SAP
 IoTで運転遠隔管理

 ドライバーにIoTウェアラブルバイスを装着

 体調管理等も可能
 サービスは2ヶ月で実装

f:id:michael-unltd:20170520143020j:plain

f:id:michael-unltd:20170520143036j:plain

 

想像力以外の制約なし

SAPエンジニアその他募集
Facebookカレー部部長やってます

 

第2部 アクセンチュア

デジタルでビジネスが変わる
 ビジネス・アプリケーション編

f:id:michael-unltd:20170520144347j:plain

 

入澤裕己氏

 アクセンチュア テクノロジーコンサル
 SAPインテグレーション

 役職:シニアプリンシパル
 趣味:SAP(大学の頃から)
 前職3年、アクセンチュア12年

 

人事のハマネさん

 技術の普及スピード

 

アクセンチュアについて、5部門

 コンサル
 ストラテジー
 デジタル
 テクノロジー
 オペレーション

f:id:michael-unltd:20170520145619j:plain

 

日本8,000人、全世界40万人

テクノロジーとデジタルの結び方について…

協業
 KDDI合弁会社ビッグデータ
 ユニクロ

コンビニ在庫管理
 発注
 12,000店舗の需要予測(1時間ほど)

 

アクセンチュア、SAPの強固なパートナーシップ
 認定コンサルが多い
 共同テンプレの開発もしている
 アクセンチュア3年連続でSAPサービス・パートナー・アワード受賞

 

# アプリケーションの未来

 

ソフト主導の高速ビジネスの3つの戦略

ビジネス加速に困難が生じる可能性
業務プロセス、システムが進化に遅れを取っている
抜本的な見直しが必要

ソフト主導の高速ビジネスを牽引するための課題
 老朽システムの足かせ
 変化スピードとアプリケーションの複雑性の高まり
 パートナーエコシステムの拡大

 

戦略3つ
 1:リキッド(変幻自在)
  ソフト開発の新しいアプローチ
 UbertwillAPIを利用)

 2:インテリジェント
  自律的な知能を持つ
 AIのヘルプデスク、ナレッジレポジトリ
 SAPデジタルアシスタント

 3:コネクテッド
  相互に接続された
 ソフトを利用して、組織の境界線を取り払う

f:id:michael-unltd:20170520145758j:plain

f:id:michael-unltd:20170520145958j:plain

f:id:michael-unltd:20170520150141j:plain

f:id:michael-unltd:20170520150308j:plain

 

アクセンチュア・リキッド・スタジオ

f:id:michael-unltd:20170520150549j:plain

f:id:michael-unltd:20170520150619j:plain

 

SAPソリューション向け
 世界各国にある高速開発の場

 

リキッドスタジオのポートフォリオ

f:id:michael-unltd:20170520150707j:plain

 

スマートフリートの事例

f:id:michael-unltd:20170520150805j:plain

f:id:michael-unltd:20170520150959j:plain

f:id:michael-unltd:20170520151100j:plain

f:id:michael-unltd:20170520151138j:plain

 

SAP Cloud Platform
 アプリ
 GPS(車両位置検出、IoT)
 地域、天気、3rd Part API
 SAP基幹と連携

 整備士手配、クライアントへの通知

 LaunchPadから「Smart Fleet」選択

 

Map
 クライアントの所有車両
 整備士の位置

 異常検知
  車両情報
  整備士へのコンタクト情報
 アラート一覧
 メンテ履歴、予定
 部品詳細
  使用率

 統計情報
  月別
  他車両など

 

# 実践編


技術要素

実現方法
 宮脇栄志氏

 

マネージャ

 SAP歴 10年

 元ケータイ開発、2007年入社
 業務改革10年
 SAP製品でモバイル、IoT、アナリティクス、クラウド活用。

趣味
 IoTグッズ集め。(hue, mesh, netatmo, IRKit)

実務の手順

 

そもそも従来のSAP ERPって?

 

ドイツ製。
ABAPという言語(COBOLに似ている)で開発可能。
アクセンチュア、開発丸投げにしない。

 

ERPとは…

 カスタム開発
 パッケージ開発(フィット、ギャップ開発。ギャップに対してアドオンでつくる)

f:id:michael-unltd:20170520151911j:plain

 

SAPのUI、開発がどう変わったか?

f:id:michael-unltd:20170520151731j:plain

f:id:michael-unltd:20170520152146j:plain

従来UI、最近のUIの比較

・Fiori Launchpad
・WebIDE
・SAPUISアプリ

 

Openテクノロジーを積極採用

オンプレクラウド
SAP Cloud Platform
 Runtimes
 Platform Services
 Data & Strage Service
SaaS

f:id:michael-unltd:20170520152256j:plain

 

ブラウザでアジャイルな開発も可能
WYSWIGで画面作成できる、簡単プロトタイプ
※無償版もあります

ブラウザでの開発も可能
Javascriptもいけます

f:id:michael-unltd:20170520152448j:plain

 

# SAP Cloud Platform上にデータをどう集めるか?

 

バイスをMMSに登録することで、管理されたデバイスから通信できないようにするなど、セキュアな環境を容易に実現可能

サーバサイドのJS(XS)で外部サービスのデータ取り込みも可能

 

センサー、エッジ、MQTT/WebSocket、
→SCP
→業務デバイス

f:id:michael-unltd:20170520152703j:plain

 

スマートフリートの例

3レイヤー

 DBのカラム定義すると連携パーツ生成が可能

f:id:michael-unltd:20170520152915j:plain

 

HANAの計算力とPALで予測分析とかできます。

HANA のDB上でデータを分析可能。
Eclipseプラグインあり〼。

f:id:michael-unltd:20170520153210j:plain

f:id:michael-unltd:20170520153401j:plain

 

データ活用の故障予測
 対応時の調査コストの削減
 基幹システムの統合

 工期が延長の防止
 故障対応でリードタイム増加の防止
 ※定期メンテしてれば故障が防げたとか…故障時のコスト削減

f:id:michael-unltd:20170520153436j:plain

 

Q&A

Q:1球予測について
A:コード組み込みで利用可能

 

Q:mi adidasは直販だけど、販社モデルが崩れないのは?
A:オンラインの量は通常販路にさほど影響でないこと。
ビジネスモデルを理解してもらった上で、販社への理解を求めておく

 

Q:いろんな企業のデータを組み合わせるのはどのように?
A:SAPの強み、ビジネスネットワークがある。
クライアント間の結びつけが可能。

当初、コンサルファームをパートナーにする。
想像しうるクライアントをまとめたミートアップを開催する。

カナダ、モントリオール交通局の事例が構内路線の広告売上3倍になった。
東急がクーポン配布していたこともあったがガラケーで時期尚早。

スポーツ、日本内20個のスタジアムを創設。

 

Q:さくさくUI?
A:Open技術も扱える。最適UIをHTML5とかで実現可能。

 

以上です。

  

■ 音声データ

SAP(※54MBあります)

https://1drv.ms/u/s!AgzxSCFJBEhIoG-oC0xKSvGIDH59

Accenture(※60MBあります)

https://1drv.ms/u/s!AgzxSCFJBEhIoHBhx1GY2KOXssf1

 

参加録「bitFlyerエンジニアと一緒にC#で書いて学ぶ暗号入門」

前回に引き続き bitFlyer竹井さんの講演に参加しました。 

 

日時:2017/05/18 (木) 19:30 〜 21:30

場所:ヒカラボ渋谷

career.levtech.jp

 

SlideShare

www.slideshare.net

 

■ 講演メモ

 

本日トピック

  1. 暗号基本
  2. RSA暗号(※実装平易)
  3. 楕円曲線暗号
  4. Bitcoinトランザクション

暗号方式

共通鍵暗号
 暗号、復号の鍵が一緒

公開鍵暗号
 今日のテーマはこちら。 暗号、復号の鍵が別物。

 

公開鍵で通信を検証、以降は共有鍵で通信

 

共通鍵は高速、リスキー
公開鍵は低速、堅牢

 

用途

 暗号として(機密性)
 電子署名として(真正性)

 

RSA暗号 1980年代

 素因数分解を利用する
 素数が2つ必要 https://ja.wikipedia.org/wiki/RSA%E6%9A%97%E5%8F%B7

 

離散対数問題 Discrete Longrithm Problem(DLP

拡張ユークリッドの互除法

 RSA暗号の中で使用

 

フェルマーの小定理オイラーの定理

 暗号化、復号化に使用される

 

要は… 巨大な素数を2つ用意する 積が条件に合致する対の値を2つ求める

 

以下、C#プログラム説明

 乱数ジェネレータをつくる 2の14乗〜15乗の範囲

 大きな数値を生成

 最小値、最大値の範囲に収める

 素数判定

  素数の前提として、2は奇数に揃える 

  3以上、自身の平方以下の間で、奇数で割り切れなければ素数

 判定を反復(※今回は愚直に書いたので重い)

 GCD

 自身で割って、拡張ユークリッド互除法適用 (PowMod xのa乗のnの余りを求める)

 

 呼び出し元実装 

long tekito = 10;

 long cipher = PowModo(tekito, a,n);

 long decrypt = PowModo(tekito, b,n); 

 ※aを秘密鍵、 bを公開鍵とす

 cipherが暗号化された値

 decryptが復号された元の値 →RSA暗号は100行で書ける。

 

楕円曲線暗号

 楕円曲線 y^2 = x^3 + ax + b のような曲線のこと

 格子点(x,y ともに整数になる)箇所のみ考える

 格子点をpの剰余で考える

  cf: Mastering Bitcoin

 楕円曲線の構造

  加算、減算が出来る

  結合法則 P+Q+R=0

   単位元(0) 逆元の存在 -P

  交換法則

   楕円曲線暗号と群構造

   P, aPからaを逆算するのは難しい

  ベースポイントG

  秘密鍵a(スカラー値)

  

  ビットコイン

   Secp256k1と呼ばれる楕円曲線パラメータ

   p = 2^256 - 2^32 -2^9 - …

 

  楕円曲線暗号 EC ElGamal

 

  鍵生成

   秘密鍵

   公開鍵   

  暗号化

   暗号化対象を楕円曲線上の点Mにエンコード

   ランダムな整数k

   ペアを暗号文にする

  復号

   暗号文を受け取ったら…

 

  楕円曲線暗号電子署名(ECDSA)

   鍵生成

   署名

   検証

    座標の一致をもって正とする

 

Bitcoinでの使われ方

 Mastering Bitcoin

 楕円曲線はsecp256k1で固定

 ユーザーは1から

 

Input:送金元

Output:送金先

 

送信元

 電子署名(使いたい)(r, sが定義される)

 公開鍵(圧縮した点)

 

送信先

 公開鍵のハッシュ(アドレス、16進数でエンコードしたもの)

 公開鍵の値が一致してたら決済OK。

 

文献

 

■ Q&A

Q:RSA暗号は使われてない?

A:楕円曲線暗号に移行しつつ、計算が軽い。鍵が短い。暗号強度は同等。

 

BitFlyer 人事:カラサワさん からのインタビュー

スクエニ、将棋AIの人事 国内最大のビットコイン・ブロックチェーン企業

 

BitFlyer Bitcoin流通60%(第1位)

 ビックカメラ社と提携

 積水ハウス社と不動産データをBlockChain化する

 現在開発者は20名 C#、JS、…

 

■ 竹井さんインタビュー

唐)人事通説エンジニア象

 山登り型?

  目指す場所を突き進むタイプ

 濁流下り型?

  トラブル対応で実力付けるタイプ

 

竹)

PGは小学生から RSAは高校のときのコード、JSでやってみよう

暗号にハマる、素数大好き

 

大学 音楽部、PG離れる、ゲーム機にハマる

3年からコンピュータサイエンス

 OS、Network、情報数理、…

 ※将棋AIの山本一成さん 大学院になってからPGはじめる例もある

 

経産省

 院を出た後、未踏事業に。

 提案「カレンダー上の予定調整AI」が採択された BitFlyer 生きている経験

 

ブロックチェーン「Miyabi」

 コンピュータをつくるのに似ている

 トランザクション、データ構造、ネットワーク最適、P2P、高速化(マルチスレッド、並列)、効率性

 

コンピュータ基礎体力は大学時のコンピュータ・サイエンスなのかも。

情報アンテナが高い? セキュリティニュースは好きだから。

 

 ■ 参考書籍(※大変充実した内容の書籍でした)

クラウドを支えるこれからの暗号技術」著:光成滋生

github.com 

■ 音声データ(※55MBあります)

https://1drv.ms/u/s!AgzxSCFJBEhIoG7E0ty7kXOzTQDv

参加録 "第二回 design-jp"

定時ちょっと前に上がって六本木へ。
初めて訪ねたGooleオフィス。
安藤さんの書籍を何冊か読んで、気になったのでこのイベントに参加しました。
 
UXガイドにあたり、アニメーションの考察を交えてお話されていたので、講演の至るところで納得感を覚えながら聴きました。
 
下記イベントのメモです。
 
イベント名:第二回 design-jp
日時:2017/05/10 19:00-22:00
URL:https://design-jp.connpass.com/event/55950/
 
講演内容
 ①セッション1「インタラクションデザインの調整のコツと、それにまつわるコミュニケーションの仕方」
 ②セッション2「誰のためのマイクロインタラクション? -マイクロインタラクションへの理解とプロトタイピングの実践」(仮)

[twitter]
 #designjp
[slack] ※参加歓迎
 https://design-jp.herokuapp.com
[“sli.do”] ※匿名質問板
 www.slide.com with code #Y883

コンセプト:
 なぜインタラクションか?を軸に、エンジニアとデザイナーをまたぐ勉強会の企画。

■ セッション①
@yukio_andoh

slideshare
https://www.slideshare.net/yukio.andoh/design-jp-vol2-motion-design-animation

"motion, animation” の話し
 Motion ディレクション
 Communication

By Norman McLaren
 アニメは装飾でない、機能である

アニメなぜ?
 変化を伝える
 小さなものに注意換気
 操作の楽しみ
 構造の理解(奥行きとか)

フリクション(=意図的違和感)
操作素早いけど、アニメでわかりやすくする

時間+位置、形
時間+色、透明度(グラデーション、、)

時間軸の解釈
 15パターン

アニメの認識
 300ms-400msがおよそ
 初回はさておき。
 慣れるといらいらがたまる

 素早すぎると操作感が薄まる、溜めが必要。
 その後。本編が始まるようにする。

 止まった感が出るのも同様。
 最小でも150msは見せるのがいい

Chatbotの返事。
 これも然り。早すぎると違和感。
 時間がかかるのが自然。

240fps
 スマホでもハイスピードカメラで撮影可能
 アニメーションを厳密に視える。

秒針が進んで戻る(15fps)

Remoteテストキットは良いツール
 By NTTレゾナント

ディズニーのアニメの法則
 予兆
 予備動作
 モーション

参考書籍あります
 ・ディズニーアニメーション
 ・アニメーターズサバイバルキット
 ・アニメーションの本
 ※加えて、vimeo参照

Vimeoのアニメーション動画
 スクロール実装も予備動作あり
 リスのしっぽのモーション

気に入ったアニメーションサンプルを蓄えておく
“path”は昔流行った

参照:
uimovement.com

動きすぎると酔う
 ディズニー
  コマ撮りしてアニメ化する
 日本
  鉄腕アトム
  コスト減のためにカット数を減らして、脳で保管する
  いろんな方向、カーブでは非統一になる
 参照
 https://inspirationmobile.tumblr.com/

デザイナー
 丸を書く
  美観、自分のわかるものを武器にできる

Sign Inフォーム
 エンジニアはデザイナーの気づいた違和感を大事にする。

LOUIS VUITTON
 「店舗」は文字感の幅広い(優雅な印象)
 「商品」は文字感の幅狭い(洗練された印象)

哲学者 ジョン・デューイ
 体験が共有財産になるように
 擬音語、擬態語の統一

書籍
 GIONGO GITAIGO JISYO

曖昧な解釈
 拡大する、展開する

すいすい
すかっ
すこん
すっ
ずっしり
すっぱり
すとん

ものの流れ
 easingの名前(Flashには表現の呼び方が揃っていた)
 easeOutSide
 等、30通りくらい

「動き」のひらめき
「動き」の試作、検討
「動き」の批評
「動き」の実装
プロダクト(※ここはディレクションではない)
調整

Facebookのアイコン

単体では判断できないことも「比べる」とわかる
素早い、ゆっくり。
製作者は思い入れがは消しいので、一旦寝かしてみる。

Google 時間のあるプロジェクト
 動画と進行表を作成して、エンジニアに渡す

複数機種向けの開発
 一番古い、遅い機種を最初に調整する
 その後、高性能、リッチな端末で滑らかに仕上げるのが(・∀・)イイ!

アニメとは?
 アートは技術に
 技術はアートにインスピレーションを当たっる

オススメのツール
 Processing
 Keynote (マジックムーブで、easier/out, 等のモーションデザインが設定できる)
 Kite Composer(タイムラインでアニメが作れる)
 https://kiteapp.co/

React+Sketch.appに期待。

映画のタイトルシーケンスが良い
 モーションタイポグラフィーも参考になる。

その他参照:
https://material.io/guidelines/motion/material-motion.html
https://framer.com/examples/featured/

KIJIMA MAMORU
@sadako_a_

FOLIO Inc.
 次代型証券サービス
 iOSのリードデザイナー

マイクロインタラクション

例:登録フォームのインタラクション

分解
 メアド:フォームチェック
 PW:フォームチェック
 規約:チェック状態チェック
 登録:アクションチェック

設計上のアプローチ

意識する3つのポイント
 ①無意識に操作
 ②ほしいものをすぐ提供する
 ③人間味のあるフィードバックを与える

クラウドのファイルビューアー

読み込み中…に対するユーザーの感情
 いつおわるの?
 どれぐらいでおわるの?

進捗バーが表示される
通信環境が悪いメッセージ
→ストレスフリーに

②メモアプリ

テキストエディア
操作がすぐできること
行き来が少ないこと

③404エラーページ

検索結果
該当なし…では冷たい

顔アイコン出す
再検索を促すメッセージ

その他事例
 DropboxテキストエディタPaperも出している
  保存自動的にされるとか
 Uber Eats
  この情報で正しいですか?

ユーザーをファンにする
 Sketch + Framer

UI設計
※Framerはインタラクティブプロトタイピングツール
記述はJS(coffee script)

認識の共有のズレ

ツール
 Prott
 InVision
 Xd

 Framer
 OrigamiStudio
 …

サイト「UXTOOLS」
 20個くらいある…
 自社にあったツールがいい
 例:ツイート画面のプロトタイプ

Group階層でSketchで揃えておく
※レイヤーではなく

オブジェクト生成
 コードベース
 GUIでも調整可能

SketchファイルのImport
 →Group階層で読み込まれる
 →レイヤー作成
 →アニメ調整(CSS調整に近い作業)

公式サイトのサンプルを見てコードを参照して、作れる
コーディングもデザインの一貫であると考える

■まとめ

マイクロインタラクション
 MicroInteraction <> Animation
ユーザー体験の向上
 表現のためだけでないアニメーション
Flamer
 Twitterの動画機能

LT
@nobsato

佐藤のぶや
 Secret Lab Inc.

提案型デザイン

6 things
 InViision事例

Ideaはどこから?
 ”Pentagram” UKのデザイン会社
 グラフィックデザイン
 (書籍)IDEAS ON DESIGN

ひらめきからの発想
 アイディアは日頃考えていることからの飛躍

参考
 MARVEL
 カイル・クーパーのデザイン

QA

Q:使っているサービスは?

 Prott (多い
 Invison
 Flinto
 XD
 Pixate

 使い分け?
  プロジェクトごととか

Q:エンジニアとデザイナーの間で animation/transition を作る時のコミュニケーション方法はどうやっていますか?

プロトタイプツールを用意する
 数字を調整して可視化するツール

Q:プロトタイピングをする時間がない場合などはどういった手法でインタラクション(アニメーションなど)を仕上げていくのでしょうか

定番、共通認識のもので固める

Q:どこをプロトタイプの引き際にしてますか?

工数。実装までのコミュニケーション次第。
フェディリティ。
共有の粒度を考えておく。
実物で。

Q:アニメーションの原則を体系的に学ぶ?

Udemyでオンラインで学ぶ。Pixarの講座。
それから手を動かす。
学校に通う。

Q:最近気になるWebサービスやアプリやデバイスは何ですか?

メルカリのカウが気になる。
 バーコードで出品できる。
 出品体験を簡単にする。
 メルカリポイントの経済圏、ポイントで買う。

意図的にリッチなモーション、チープなモーションを選ぶ。
安い、楽しいをデザインする。

Amazon Echo 画面つき

モーニン:スマホでカーテンが開閉できる
ぬいぐるみ:装着できるデバイス

スマホだけで完結しないサービス
生活に組み合わせるサービス
チャットのデザイン

Q:デザイナーにとって、Material Design って制限多すぎる気もするのですが、実際にどうでしょう?

制限多いとは思わない。
目的を満たす上で充実している。
アニメーションの理想、アーティスティック。それは目的が異なる。

最上でなければ、定番にしたほうがカッコイイ。

ワークショップは時間ないため次回へ見送り

マテリアルデザインアワードやっていますとのこと。
https://design.google.com/articles/material-design-awards-2016/

以上です。