Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
デザイン・エンジニアがWeb開発で考えること
2015/2/2 (月)
ウェブデザイン・ウェブ開発に必要なこと
DevLOVE仙台-DevLOVE関西連携企画
自己紹介
株式会社メンバーズ 角銅 浩平
デザイン・エンジニアやってます。
https://www.facebook.com/kohei.kakudo
やってきたこと
データ解析ツールの開発 (アジャイル開発、データサイエンティ
スト)
スタートアップでWebサービス開発(フルスタックエンジニア)
コミュニティサイトや会員アプリ開発(デザイン・エンジニア)
• アジャイル開発
• データ分析
...
話すこと
1. これから広がっていくだろうキーワードを紹介。
2. 時間の関係上、考え方を紹介、やり方は省略。
3. 開発中心ではなく、その前後が話の中心に。
1. ウェブ開発で考える範囲が広がっている
時系列としての広がり
!
利用前
予期的UX
!
利用中
一時的UX
!
利用後
エピソード
的UX
!
利用時間全体
累積的UX
これまでは利用中を中心に考えてきた。
ここ
時系列としての広がり
!
利用前
予期的UX
!
利用中
一時的UX
!
利用後
エピソード
的UX
!
利用時間全体
累積的UX
利用中だけでなく前後を含めて考えていく必要がある。
こっち こっちも
! ! ! !
チャネルとしての広がり
ウェブで見つけてお店で購入みたいなシンプルな動き
店舗
PC
モバイル
SNS
注意 関心 検索 購入 共有
! ! ! !
チャネルとしての広がり
利用者のウェブとの関わりかたが複雑になってきた。
店舗
PC
モバイル
SNS
注意 関心 検索 購入 共有
チャネルとしての広がり
全体をみれるツールが必要になってきた。
1. ウェブサービスの利用前後を意識する必要がある
2. 利用者の環境やデバイスは一つではなく、使い分けをしている
ことを前提にする
3. 複数のタッチポイントとインタラクションを...
複雑さにどうやって対応するのか
分からないので検証して軌道修正していくしかない。
学ぶ 構築する
計測する
アイデア
製品データ
構築-計測-学習のフィードバックループ/リーンスタートアップ
複雑さにどうやって対応するのか
どうやって作るのか
なにを作るのか
2. どんなツールを使って対応していくのか
! !
ウェブ開発で使っているツール群
提案
開発
検証
People Business Tech
• ペルソナ
• カスタマージャー
ニーマップ
• 行動シナリオ
• リーンキャンバス
• KGI/KPI
• スクラム
• マイクロインタラ
...
! !
フィードバックループを速く回すために
People Business Tech
• プロトペルソナ
• カスタマージャーニー
マップ
• リーンキャンバス
• KGI/KPI
• コホート分析
• MVP
• ペーパープロトタイ
プ
全...
プロトペルソナ/カスタマージャーニーマップ
1. ペルソナ、ジャーニーマップの作成を通して、利用者像と行
動を把握する。
2. データ収集に時間をかけすぎない。プロトペルソナを使って
アジャイルに。
OUTPUT
カスタマージャーニーを考える
インタラクション
マイクロ
インタラクション
マイクロ
インタラクション
マイクロ
インタラクション
コンテキスト
OUTPUT
KGI/KPI
1. ビジネス成果を定義するためにKGI/KPIを事前に決めておく。
2. KGIは達成目標、KPIはその進捗の度合いをみるための指標。
3. KGI/KPIが測定可能かどうか、また、測定可能にするための要件
を検討する。
リーンキャンバス
リーンキャンバス/ Running Lean
課題 ソリューション
主要指標(KPI)
コスト構造
独自の価値提案
収益の流れ
チャネル
圧倒的な優位性 顧客セグメント
既存手段 アーリーアダプター
1 234
5
67
8
9
リーンキャンバス
リーンキャンバス/ Running Lean
課題 ソリューション
主要指標(KPI)
コスト構造
独自の価値提案
収益の流れ
チャネル
圧倒的な優位性 顧客セグメント
既存手段 アーリーアダプター
Problem/Solut...
×
リーンキャンバス
埋まったら完成ではない。なんども作り直す。
×
×
https://hbr.org/2004/09/perfecting-cross-pollination
失敗は回避できない!
コストを安く失敗することでトライする回数を増やす
この図、本来の説明は多様性の話ですが…
MVP(Minimum Viable Product)
1. MVP(実用最小限の製品)
2. 必ずしも実際に作る必要はない。ex. グルーポンはブログと
手作業で検証
3. ただし、P-S Fitを実現するコアな機能は含んでいる必要があ
る。...
ペーパープロトタイプ
1. 丸とか四角が描ければいい訳で、エンジニアでも描ける。
2. 紙に描くだけで検証できるので、やりなおすコストが低い。
3. 手書きレベルのほうが、細部のデザインが気にならないので、
枝葉に気を取られないで検証できる。
OUTPUT
レスポンシブデザイン
1. PCとスマホでブレイクポイント1、2つ、みたいなレベルならレ
スポンシブデザインは逆に面倒にみえる。
2. 現時点でも、膨大な画面サイズが存在していて、細かく対応は
できない。
3. 今後はPC、スマホだけでなく、ウ...
ANDROID FRAGMENTATION VISUALIZED (JULY 2013)
マイクロインタラクションとは
「単一のシナリオに基づいて一つの作業だけをこなす最小単位のインタ
ラクション」
「移動時間にメッセージやゲーム、データのチェックなど、必要以上に
断片化してしまっている現代人の生活との親和性が高い」
「マイクロイン...
マイクロインタラクションの構造
マイクロインタラクションはロジカルに考えられるので、エンジニアにも分
かりやすい。
CSS3だけでアニメーションできるので、デザイナーにも実装しやすい。
コホート分析
1. 自分たちが行った施策が、サービスにどのような影響を与え
たのか」を可視化するシンプルな分析
2. 新規ユーザの集団を追ってリーンキャンバスで定義したKPIを
見ていく
3. 既存ユーザと混ざった状態だと施策の影響なのかどうか...
コホート分析
アクティブ率
登録週 Week1 Week2 Week3 Week4 Week5 Week6 Week7 Week8
1 50.3% 11.2% 5.0% 3.7% 3.7% 3.1% 3.1% 3.1%
2 51.0% 12.9...
コホート分析
9.9% 13.4% 17.1%
13.2%
19.7% 17.2% 14.0% 10.9%
7.5% 2.6%
4.8%
3.8%
0.0%
9.7%
4.7%
3.6%
8.1% 8.2%
9.5%
7.5%
11.8%
10...
フィードバックループ
構築したフィードバックループを最速で回し続けよう
学ぶ 構築する
計測する
アイデア
製品データ
アジャイルでみんなハッピーに!
メンバーズのアジャイル運用プロセス
反復
UXデザインとユーザー

中心の計画づくり
開発・分析の繰り返し ビジネス成果の創出
ビジネスゴールの

設定とKPI策定
•アンケート/インタビュー
•フィールドワーク
•ペルソナ
•ユーザー行動シナ...
Thank You !
デザイン・エンジニアがWeb開発で考えること
デザイン・エンジニアがWeb開発で考えること
デザイン・エンジニアがWeb開発で考えること
デザイン・エンジニアがWeb開発で考えること
デザイン・エンジニアがWeb開発で考えること
Upcoming SlideShare
Loading in …5
×

デザイン・エンジニアがWeb開発で考えること

1,522 views

Published on

ウェブデザイン・ウェブ開発に必要なこと(DevLOVE仙台-DevLOVE関西連携企画)
http://devlove-sendai.doorkeeper.jp/events/18891

デザイン・エンジニアがWebサービス開発でどういう点を気にして、どういうツールを使って進めているのかを話した際のスライドです。

Published in: Internet
  • Be the first to comment

デザイン・エンジニアがWeb開発で考えること

  1. 1. デザイン・エンジニアがWeb開発で考えること 2015/2/2 (月) ウェブデザイン・ウェブ開発に必要なこと DevLOVE仙台-DevLOVE関西連携企画
  2. 2. 自己紹介 株式会社メンバーズ 角銅 浩平 デザイン・エンジニアやってます。 https://www.facebook.com/kohei.kakudo
  3. 3. やってきたこと データ解析ツールの開発 (アジャイル開発、データサイエンティ スト) スタートアップでWebサービス開発(フルスタックエンジニア) コミュニティサイトや会員アプリ開発(デザイン・エンジニア) • アジャイル開発 • データ分析 • データ分析用にスクリプト言語設計したり • Webサービス開発 • インフラ、フロントエンド、バックエンド、ほぼ全般 • UX/UI • デザイン思考 • iOSアプリ開発
  4. 4. 話すこと 1. これから広がっていくだろうキーワードを紹介。 2. 時間の関係上、考え方を紹介、やり方は省略。 3. 開発中心ではなく、その前後が話の中心に。
  5. 5. 1. ウェブ開発で考える範囲が広がっている
  6. 6. 時系列としての広がり ! 利用前 予期的UX ! 利用中 一時的UX ! 利用後 エピソード 的UX ! 利用時間全体 累積的UX これまでは利用中を中心に考えてきた。 ここ
  7. 7. 時系列としての広がり ! 利用前 予期的UX ! 利用中 一時的UX ! 利用後 エピソード 的UX ! 利用時間全体 累積的UX 利用中だけでなく前後を含めて考えていく必要がある。 こっち こっちも
  8. 8. ! ! ! ! チャネルとしての広がり ウェブで見つけてお店で購入みたいなシンプルな動き 店舗 PC モバイル SNS 注意 関心 検索 購入 共有
  9. 9. ! ! ! ! チャネルとしての広がり 利用者のウェブとの関わりかたが複雑になってきた。 店舗 PC モバイル SNS 注意 関心 検索 購入 共有
  10. 10. チャネルとしての広がり 全体をみれるツールが必要になってきた。 1. ウェブサービスの利用前後を意識する必要がある 2. 利用者の環境やデバイスは一つではなく、使い分けをしている ことを前提にする 3. 複数のタッチポイントとインタラクションを俯瞰して設計する
  11. 11. 複雑さにどうやって対応するのか 分からないので検証して軌道修正していくしかない。 学ぶ 構築する 計測する アイデア 製品データ 構築-計測-学習のフィードバックループ/リーンスタートアップ
  12. 12. 複雑さにどうやって対応するのか どうやって作るのか なにを作るのか
  13. 13. 2. どんなツールを使って対応していくのか
  14. 14. ! ! ウェブ開発で使っているツール群 提案 開発 検証 People Business Tech • ペルソナ • カスタマージャー ニーマップ • 行動シナリオ • リーンキャンバス • KGI/KPI • スクラム • マイクロインタラ クション • レスポンシブデザイ ン • 負荷テスト • a/bテスト • コホート分析• ユーザーテスト • ヒューリスティッ ク評価 • MVP • ペーパープロトタイ プ
  15. 15. ! ! フィードバックループを速く回すために People Business Tech • プロトペルソナ • カスタマージャーニー マップ • リーンキャンバス • KGI/KPI • コホート分析 • MVP • ペーパープロトタイ プ 全体を素早くみれるツールが必要になってきた。
  16. 16. プロトペルソナ/カスタマージャーニーマップ 1. ペルソナ、ジャーニーマップの作成を通して、利用者像と行 動を把握する。 2. データ収集に時間をかけすぎない。プロトペルソナを使って アジャイルに。
  17. 17. OUTPUT
  18. 18. カスタマージャーニーを考える インタラクション マイクロ インタラクション マイクロ インタラクション マイクロ インタラクション コンテキスト
  19. 19. OUTPUT
  20. 20. KGI/KPI 1. ビジネス成果を定義するためにKGI/KPIを事前に決めておく。 2. KGIは達成目標、KPIはその進捗の度合いをみるための指標。 3. KGI/KPIが測定可能かどうか、また、測定可能にするための要件 を検討する。
  21. 21. リーンキャンバス リーンキャンバス/ Running Lean 課題 ソリューション 主要指標(KPI) コスト構造 独自の価値提案 収益の流れ チャネル 圧倒的な優位性 顧客セグメント 既存手段 アーリーアダプター 1 234 5 67 8 9
  22. 22. リーンキャンバス リーンキャンバス/ Running Lean 課題 ソリューション 主要指標(KPI) コスト構造 独自の価値提案 収益の流れ チャネル 圧倒的な優位性 顧客セグメント 既存手段 アーリーアダプター Problem/Solution Fit
 「誰の、どのような問題を、どのように解決するのか?」
  23. 23. × リーンキャンバス 埋まったら完成ではない。なんども作り直す。 × ×
  24. 24. https://hbr.org/2004/09/perfecting-cross-pollination 失敗は回避できない! コストを安く失敗することでトライする回数を増やす この図、本来の説明は多様性の話ですが…
  25. 25. MVP(Minimum Viable Product) 1. MVP(実用最小限の製品) 2. 必ずしも実際に作る必要はない。ex. グルーポンはブログと 手作業で検証 3. ただし、P-S Fitを実現するコアな機能は含んでいる必要があ る。なにがコアなのかをはっきりさせること。
  26. 26. ペーパープロトタイプ 1. 丸とか四角が描ければいい訳で、エンジニアでも描ける。 2. 紙に描くだけで検証できるので、やりなおすコストが低い。 3. 手書きレベルのほうが、細部のデザインが気にならないので、 枝葉に気を取られないで検証できる。
  27. 27. OUTPUT
  28. 28. レスポンシブデザイン 1. PCとスマホでブレイクポイント1、2つ、みたいなレベルならレ スポンシブデザインは逆に面倒にみえる。 2. 現時点でも、膨大な画面サイズが存在していて、細かく対応は できない。 3. 今後はPC、スマホだけでなく、ウェアラブルデバイスなども視 野にいれておく必要がある。
  29. 29. ANDROID FRAGMENTATION VISUALIZED (JULY 2013)
  30. 30. マイクロインタラクションとは 「単一のシナリオに基づいて一つの作業だけをこなす最小単位のインタ ラクション」 「移動時間にメッセージやゲーム、データのチェックなど、必要以上に 断片化してしまっている現代人の生活との親和性が高い」 「マイクロインタラクション UI/UXデザインの 神が宿る細部」より
  31. 31. マイクロインタラクションの構造 マイクロインタラクションはロジカルに考えられるので、エンジニアにも分 かりやすい。 CSS3だけでアニメーションできるので、デザイナーにも実装しやすい。
  32. 32. コホート分析 1. 自分たちが行った施策が、サービスにどのような影響を与え たのか」を可視化するシンプルな分析 2. 新規ユーザの集団を追ってリーンキャンバスで定義したKPIを 見ていく 3. 既存ユーザと混ざった状態だと施策の影響なのかどうかノイ ズが多くなるが、新規ユーザだけを見れるので分かりやすい。
  33. 33. コホート分析 アクティブ率 登録週 Week1 Week2 Week3 Week4 Week5 Week6 Week7 Week8 1 50.3% 11.2% 5.0% 3.7% 3.7% 3.1% 3.1% 3.1% 2 51.0% 12.9% 4.6% 7.2% 4.6% 3.6% 3.6% 3 59.0% 10.0% 8.0% 7.0% 8.0% 6.0% 4 54.9% 8.8% 2.0% 3.9% 0.0% 5 66.4% 21.2% 11.2% 10.0% 6 63.4% 19.2% 11.0% 7 61.2% 20.9% 8 64.9%
  34. 34. コホート分析 9.9% 13.4% 17.1% 13.2% 19.7% 17.2% 14.0% 10.9% 7.5% 2.6% 4.8% 3.8% 0.0% 9.7% 4.7% 3.6% 8.1% 8.2% 9.5% 7.5% 11.8% 10.8% 11.6% 27.3% 24.8% 26.8% 24.8% 28.3% 35.5% 30.1% 34.9% 27.3% 49.7% 49.0% 43.8% 47.2% 32.9% 32.3% 34.9% 30.9% Week1 Week2 Week3 Week4 Week5 Week6 Week7 Week8 ログイン 15件登録 5件登録 アクティブ インストール
  35. 35. フィードバックループ 構築したフィードバックループを最速で回し続けよう 学ぶ 構築する 計測する アイデア 製品データ
  36. 36. アジャイルでみんなハッピーに!
  37. 37. メンバーズのアジャイル運用プロセス 反復 UXデザインとユーザー
 中心の計画づくり 開発・分析の繰り返し ビジネス成果の創出 ビジネスゴールの
 設定とKPI策定 •アンケート/インタビュー •フィールドワーク •ペルソナ •ユーザー行動シナリオ •開発機能洗い出しと優先順位付け •KGI/KPIの設定 •プロトタイピング •スプリント型開発 •UIデザイン •TDD •CI •ユーザーテスト •ログ解析 •仮説検証と改善案策定 Scrum(スクラム)という手法をベースに、
 Webやアプリ開発に最適化された当社独自の
 アジャイル開発プロセスをご提供しています。
  38. 38. Thank You !

×