Surprise & Make Sense

Hara Kentaです。

スピッツだって

スピッツだって、最初はパンクバンド。

iOS10からのAnimationがいい感じ!

※コチラの記事は、Qiitaのこちらの記事と同じ内容です。

WWDC16で、iOS10から使えるアニメーションに関する新しい発表がありました。 動的なアニメーションの追加や、一時停止など、柔軟にいろんな事ができるようになっていたので、紹介したいと思います!

従来のアニメーション

まず、従来のアニメーションは、こんな感じで書いていたかと思います。

UIView.animateWithDuration(2.0, delay: 0, options: .CurveEaseInOut, animations: { 

    // animation

}) { _ in

    // completion

}

まず、こちらのメソッドも、Swift3からはこんな感じに変わります!

UIView.animate(withDuration: 2.0, delay: 0, options: [.curveEaseIn, .curveEaseOut], animations: {

}) { _ in

}
  • メソッド名はシンプルになって、第一引数も外部名が表記するようになっています。
  • UIViewAnimationOptionslowerCamelCaseになっている
  • curveEaseInOutが無かったのですが、それを実現するには、このようにするんですかね、、??

ただ、これも、動的にいろんな操作をするには向いていません。

だからといって、CoreAnimationも分かりづらかったり、beginFromCurrentStateというoptionの挙動もわかりづらい、、、

そこで登場したのが、 UIViewPropertyAnimatorです!こちらのクラスを使うと、アニメーションに対していろんな柔軟な対応ができるようになっています!

UIViewPropertyAnimator

ざっと、このような感じで使います!

let timing = UICubicTimingParameters(animationCurve: .easeInOut)
let animator = UIViewPropertyAnimator(duration: 2.0, timingParameters: timing)

animator.addAnimations { 
    // animation
}

animator.startAnimation()

animator.pauseAnimation()

なんだか、いろいろできそうな予感がします。

@IBAction func handlePan(recognizer: UIPanGestureRecognizer) {

    let translation = recognizer.translation(in: self.view)
    let translatedCenterY = view.center.y + translation.y
    let progress = translatedCenterY / self.view.bounds.size.height

    animator.fractionComplete = progress
}

このように、ユーザのジェスチャに応じてアニメーションの進行を操作することもできます。

UIViewPropertyAnimator周りのクラス図

Screen Shot 2016-06-22 at 11.32.31.png

  • UIViewAnimatingとUIViewImplicitlyというプロトコルに準拠しています。
  • UITimingCurveProviderというプロトコルに準拠したオブジェクトを受け取って、アニメーションのタイミングを調整します。

UIViewAnimatingプロトコル

アニメーションのフローを制御するメソッドやプロパティが定義されている。

メソッド

  • func startAnimation()
  • func pauseAnimation()
    • アニメーションの一時停止
    • AnimatingStateactiveのまま
  • func stopAnimation(_ withoutFinishing: Bool)
    • アニメーションを現在のポジションで終了させたい時に利用する
    • 引数にtrueを渡すと直接inactiveのステートに変化する
    • 引数にfalseを渡すと、stoppedステートに変化し、終了させるにはfinishAnimationメソッドを呼ぶ
  • func finishAnimation(at: UIViewAnimatingPosition)
    • stoppedステートの時にこのメソッドを呼んでアニメーションを終了させる
    • stoppedステートに遷移する前にこのメソッドを呼ぶとエラーになる。
    • inactiveステートに遷移する

プロパティ

  • var fractionComplete: CGFloat
    • アニメーションの完了度合いのパーセンテージ
    • 0.0 - 1.0の値をとる
    • この値を操作することにより、アニメーションをインテラクティブに操作できる
  • var isReversed: Bool
    • このプロパティを操作することによってアニメーションの方向を操作できる
  • var state: UIViewAnimatingState

    Enum

    • inactive
    • active
    • stopped

    の3つの値を持つ

  • var isRunning: Bool
    • アニメーションが進行中かどうか

UIViewImplicitlyAnimatingプロトコル

アニメーションのカスタマイズに関するメソッドが定義されている

メソッド

  • func addAnimations(() -> Void)
    • アニメーションを定義する
  • func addAnimations(() -> Void, delayFactor: CGFloat)
    • 元々のアニメーションに対して、途中から別のアニメーションを開始する場合などに利用する
    • delayFactorには0.0 - 1.0の値を入れる
    • 例えば、0.7を入れたら、元々のアニメーションの7割が終了した時点で、追加のアニメーションが開始される
  • func addCompletion((UIViewAnimatingPosition) -> Void)

    • アニメーションが終了したときの処理を記述する

    UIViewAnimatingPositionはEnumで、

    • end
    • start
    • current

    の3つの値がある

  • func continueAnimation(withTimingParameters: UITimingCurveProvider?, durationFactor: CGFloat)

    • pauseしているアニメーションに対して、タイミングや、durationを変更して再開したい場合に利用する
    • durationFactorの値と、元々のdurationを掛けた値が最終的なdurationになる

UICubicTimingParameters

アニメーションのタイミングを定義するクラス

イニシャライズ

  • init()
  • init(animationCurve: UIViewAnimationCurve)

UIViewAnimationCurveには

- case easeInOut // slow at beginning and end
- case easeIn // slow at beginning
- case easeOut // slow at end
- case linear

の4つが定義されている

  • init(controlPoint1: CGPoint, controlPoint2: CGPoint)
    • 2つの点を定義することにより、3次ベジェ曲線を定義する

cubic.png

UISpringTimingParameters

このクラスのオブジェクトをUIViewPropertyAnimatorに渡す事によってバネのような動きのアニメーションを実現できる

イニシャライズ

  • init()
  • init(dampingRatio: CGFloat)
    • 減衰比を渡す
    • 0.0 - 1.0の値を取り、小さいほど揺れが大きくなる
  • init(dampingRatio: CGFloat, initialVelocity: CGVector)
    • 上記のに加え、初期の方向と速度を渡すことができる
  • init(mass: CGFloat, stiffness: CGFloat, damping: CGFloat, initialVelocity: CGVector)
    • massは質量
    • stiffnessはバネの硬さ??
    • dampingは減衰の強さ??
    • initialVelocityは初期の方向と速度

間違っていたら教えてください。正直、うまい値の渡し方がわかりません笑

Jun-22-2016 17-08-52.gif

このクラスをうまく使うと、このようなアニメーションが実現できるようです! すごい!!!

UIViewControllerAnimatedTransitioning

UIViewPropetyAnimatorを用いたアニメーションは画面遷移にも使えるようです!!

func animateTransition(_ transitionContext: UIViewControllerContextTransitioning) {

    self.interruptibleAnimator(forTransition: transitionContext)?.startAnimation(
}

func interruptibleAnimator(forTransition transitionContext: UIViewControllerContextTransitioning?) -> UIViewImplicitlyAnimating? {

    let timing = UICubicTimingParameters(animationCurve: .easeInOut)
    let animator = UIViewPropertyAnimator(duration: 2.0, timingParameters: timing)

    animator.addAnimations {
        // animation
    }

    return animator
}

のように、新しく追加されたinterruptibleAnimatorメソッドでUIViewPropertyAnimatorのオブジェクトを返して、従来使っていたanimateTransitionメソッドでアニメーションを開始してあげる、という流れです。

まとめ

  • なんだか気持ち良いアニメーションが作りたくなった
  • iOS10からの対応なので、半年後とか1年後くらいまで使えない!
  • セッション動画はこちらです!!

一番やさしいグロースハックの教本を要約した!~ Retension編 ~

こちらの記事は、いちばんやさしいグロースハックの教本という本がとてもグロースハックの基礎を学ぶ上で良い本だったので、まとめて紹介する記事です。

こちらの本では、AARRRモデルを拡張した、 ARRRAモデルというものを使用して、グロースハックを実行しています。

前回の、 いちばんやさしいグロースハックの教本を要約した!~ Activation編 ~に引き続き、

次は Retension(ユーザに継続的に利用してもらうこと)

について書いていきたいと思います。

Retension

  • どれだけユーザを獲得しても一度きりの利用になってしまっては、永遠に成長できない。何度も継続利用してもらうことが大事。
  • Retensionが上がるとLTV(顧客生涯価値)-809844)も上がる。
  • Retensionの計測にはコホート分析を利用する。

フックモデルの4つのステップでサービス利用を習慣化させる

IMG_0009.PNG

1.トリガー(きっかけ)

ユーザの行動を促す最初のきっかけの事を 「トリガー」と言う。 大きく2つ

  • ユーザに行動したくなるような情報を届け行動を促す 外的トリガー
  • ユーザの記憶から次にとるべき行動を連想させる 内的トリガー

の2種類がある。

外的トリガー

外的トリガーには以下の4種類がある

  • 有償トリガー:有償の広告などをきっかけにサービスを利用すること
  • 名声トリガー:アプリストアで特集されたり、メディアに露出したりすることでサービスを使いはじめること。
  • クチコミトリガー:誰がが言及しているのを耳にすることでサービスを使いはじめること
  • 自己トリガー:ユーザのまわりにすでに存在しているもの。例えば、スマホの通知にサービス利用のきっかけとなる情報を得て利用すること。SEOやASOなどもこのトリガーに含まれる。

内的トリガー

  • ユーザの記憶を利用して、次の行動を起こさせる事
  • 例えば、今日の献立に迷ったときにレシピサイトを見る、など。
  • ユーザーインタビューによって、内的トリガーがわかることも多い

2.アクション(行動)

  • ユーザの行動を促す最初のきっかけがつくれたら、次はユーザに具体的に行動してもらう。
  • ユーザにサービスを利用してもらうためには、 「B = M + A + T」 という公式に当てはめると考えやすい。
  • 意味は、 「行動(Behaviour) = モチベーション + 能力(Ability) + きっかけ」である。
  • 例えば、 雨の日のランニングという行動(B)は、 雨の日でもランニングしたいというモチベーション(M)と、 ランニングできる能力(A)ランニングしたいというきっかけ(T)を合わせて十分だった時にランニングに行くということ。
  • 能力(A)が一番ハックしやすい

iQONの例

  • iQONでは、能力(A)は
    1. センスの良いアイテムを選ぶ能力
    2. コーデのレイアウトを決める能力

の2つから成り立っている。iQONユーザはファッションセンスが良いので①は十分だったが、デザイン的素養が必要な②の能力は十分でないケースが多かった。そこで、②について必要な能力が最小になるような機能改善を行ったら投稿数が2倍になった。

3.リワード(報酬)

  • ユーザに行動を起こさせたら、その結果として得られるユーザメリット、報酬がなければユーザはサービスを利用してくれない
  • 報酬を 「予測不可能なもの」として考える
  • 例えば、FBでの報酬は投稿につけられる「いいね!」だが、この「いいね!」が仮にどんな投稿にも一定数付くという予測可能なものであれば報酬としては機能しない。予測不可能だからこそ、楽しみになるもの。

4.インベストメント(投資)

  • ユーザにちょっとした作業をしてもらうこと
  • それが価値として蓄積されて、次のトリガーを呼ぶ。
  • 例えば、LIKEボタンのタップ。LIKEをすればするほどLIKEページは自分がほしいもののリストになり、それを見返したい気持ちが内的トリガーを発火させる。
  • ユーザが使えば使うほど投資になるような構造を意識する。

こちらの内容は、 いちばんやさしいグロースハックの教本の要約です。気になる方は読んでみてください。

次回は、 Retensionの次の、 Referralを書こうと思います。

いちばんやさしいグロースハックの教本(Activationを高めよう編)

*こちらの記事は、こちらのQiitaの記事と同じ内容です。

いちばんやさしいグロースハックの教本 こちらの本が、グロースハックを学ぶ上でとても良いという噂を聞いたので、早速読んで、その概要をまとめてみました。

こちらの本では、AARRRモデルを拡張した、 ARRRAモデルというものを使用して、グロースハックを実行しています。

まずは、その一番最初の Activationから説明していきます。

Activation

この本では、 Activationを 1. そもそもサービスに価値があるのか(PSF) 2. その価値をサービスの初回利用時にユーザーにしっかりと伝えられているか(ユーザオンボーディング) という2つのフェーズに分けて説明しています。 まずPSFを検証し、サービスに価値がある事が分かったら、ユーザオンボーディングを改善していくという順番です。

PSF(Problem Solution Fit)の検証

①の、「そもそもサービスに価値があるのか」の検証。 検証方法は以下の2つ

1.MVP(Minimum Viable Product)を作って検証する方法

  • MVPとはある特定の仮説を検証するために 「必要最低限の機能を盛り込んだ製品」のこと
  • 必ず何かの検証のために作られる

2.ジャベリンボードでスマートに検証する方法

  • STEP1 : ブレストして、最初の仮設をセットする

    • 「顧客・課題・解決法」をチームでブレストして、自分たちのサービスは「誰の・どんな課題をどうやって解決する」サービスだと言えるのかを話し合う
    • 例えば、
      • 顧客:都心の1人暮らしの大学生
      • 課題:家に物を置くスペースがない
      • 解決法:倉庫を低価格で借りられて24時間取りに行ける

      など

  • STEP2 : 最も検証すべき前提を洗い出す

    • STEP1のセットは、いろいろな前提の上で成り立っている。上の例で言うと、 「1人暮らしの大学生は家に荷物をたくさんもっているだろう」 「1人暮らしの大学生は倉庫に荷物を取りに行くことに苦痛を感じないだろう」などの前提を想定している。
    • まず列挙し、 「不明度」インパクト」の2軸で再優先の前提を見つける(自明なものは検証する必要がない)
  • STEP3 : 検証方法と判断基準を決定する

    • ヒアリングなどの検証方法
    • 60%以上Yesと回答で検証成功などの判断基準

    を決める

  • STEP4 : オフィスの外に出て、検証学習する

  • STEP5 : 学びを活かしてアイディアをアップデートする

    • ヒアリングの結果、前提条件が間違っていた事が分かったなどの学びがあれば STEP1の「顧客・課題・解決法」のセットを更新する
  • STEP6 : 確証を持てるまで1~5を繰り返す

こちらを行うと、以下のようになる。

IMG_0003.PNG

ディスカッションの生産性の上げ方

  • ブレストの際は、アイディアをとにかくたくさん出す。(質より量)
  • 話し合いをする時は立って行う
  • 時間をしっかり区切る
  • イラストを描くなりして、認識のすり合わせを行う
  • 意見の収束(決め方)の方法を決める

ユーザーオンボーディング

  • 初回利用時にユーザに「このサービスすごく良い!」と思ってもらうようにすること
  • ユーザオンボーディングが成功しているかどうかは新規ユーザの再訪率を見て判断する(サービスによってどの期間の再訪率を見るのかは違う)
  • 価値提案では、「何を」「いつ」「どうやって」伝えるかを考える
  • 「User Onboarding」「UX Archive」「Inspired UI」などのサイトが参考になる
  • さまざまな他社事例から学ぶ

ファネル分析とパターン分析で改善箇所を見つける

ファネル分析

パターン分析

設定した、KGIやKPIに基いて、望ましい状態にいるユーザと望ましくない状態にいるユーザに分け、それぞれに定性・定量分析を行い、成功の共通パターンと失敗の共通パターンを見つける

  • 定性的なパターン分析
    • 定性的なパターン分析の一般的な方法は、ユーザインタビュー
    • ユーザインタビューによって得られた学びを、 「発生頻度」インパクト」の2軸で整理し、対応する優先順位をつける
    • ユーザインタビューの方法は、
      • アプリで通知を出す
      • 集めたいユーザが多く見る画面でバナーを出す。
      • ユーザは「インタビュー募集」という名目じゃ集まらない。「交流会」や「ワークショップ」という名目で集める
  • 定量的なパターン分析
    • 成功パターンユーザーと、失敗パターンユーザの行動ログを分析する
    • 行動ログを分析する事によって、先行指標を探す
    • 先行指標とは例えば、SNS系のサービスで、初日に1つでも投稿しているユーザーは翌日再訪する可能性が飛躍的に高まる場合、「初日の投稿率」が、翌日再訪率の先行指標
    • KGIの先行指標がKPI

良いKPIの特徴

  • 行動に繋がる指標である事
  • 理解しやすい事(算出しやすい、説明しやすいなど)
  • 期間毎に比較ができる事

例えば、「登録初日ユーザーの投稿数」というのはあまり良いKPIじゃない。なぜなら、登録ユーザが増えれば、投稿数も増えていくから。そのため、KPIとしては、「登録初日ユーザに占める、投稿ユーザの割合」の方が良い。割合で見ることにより、異なる期間でフェアな比較ができる。

施策をブレストする

  • とにかく数を出す
  • 施策は、「インパクト」と「工数」という2軸で整理し、工数がなるべく小さく、インパクトが大きいものから順番に実行に移す

KPIとKGIの両方が改善しているか確認する

  • 細かいKPIの数値は上昇したが、KGIは減少しているということはよくある
  • その時はしっかり分析のフェーズに戻って、KPIを設定し直す

まとめ

  • サービスを開発する際、
    • そのサービスに価値があるのか(PSF)
    • その価値を初回起動時にユーザに伝えられているのか(ユーザオンボーディング)

の2軸から Activationを高めていく。 こちらの内容は、かなり要約しているので、気になる方は、ぜひ こちらの本を読んでみてください。 いろいろなわかりやすい事例なども載っていたりするので、とても分かりやすいですよ。

次回は、 Activationの次に行うべき、 Retensionを書こうと思います。