手形アプリ「ペタログ」
- プロダクト名
- ペタログ
- カテゴリ
- toC, iOS app, Android app
- 開発時期
- 2016年11月〜2017年5月
概要
個人制作アプリ。
Webブラウザ上で動くプロトタイプを繰り返し作成してインタラクションを検証したのち、iOS版とAndroid版を作成して公開するに至る。
制作の発端は、「子供の成長記録として手形をとっているのだが、手間が大きいのでもっと簡単な方法が欲しい」という友人の発言。
本アプリによって、タブレット上に手を押し当てて手形をとることを可能にした。
また、落書き機能やプロフィール表示機能、手形をSNSでシェアするなどの付加機能も実装している。
iPadとAndroidタブレットに対応し、App Store、Google Play にて公開。
App Store ページ
Google Play ページ
- 役割
- 企画からUI設計、実装まで全て
- チーム編成
-
- 自分 + 数名の協力者(友人)
- 担当範囲
-
個人制作アプリにつき、デザインから実装まで全ての工程を自分で行なった。
アイデア出しやユーザテストは友人に協力してもらい、多様な案・意見を取り入れつつ制作を進めた。
課題解決Ⅰ: 対象デバイスと、プロダクトの概容を定める
課題 (FOR DEVELOPER) デジタル機器を使うかアナログで対処するか、または併用するか、大方針を決める
発案の時点で「タッチパネルの多点タッチ検知を使用する」というアイデアはあったが、「簡単に手形を取る」ことをゴールとする上で、タッチパネルにこだわる必要はない。
例えば、「ティッシュをテーブルの上に置いて、濡れた手を押し当て、ティッシュが乾く前にスマホで撮影する」という方法でも簡単に手形をとれる。
調査探求 要件を書き出す - 達成したい目的と、外せない要件を列挙 -
開発の発端となった発言をした友人を仮想ユーザと定め、複数の解決案を提示しつつ(可能なものは実践しつつ)要件を整理する。
【必須の4要件】
- 手の大きさを測れるものであること(成長記録が目的)
- 家具や衣服を汚さないこと
- 子供の力では壊せない(破れない・歪まない)程度に頑丈
- 短い時間(10秒以内)で手形をとれること
対策実施 アイデア選定とプロトタイピング - 試作して実現性を確認 -
4項目の要件を踏まえて、友人ともどもアイデア出しを行う。複数のアイデアが出たが、それらは大別すると以下3つに分けられる。
- タブレットデバイス(多点タッチ可能なタッチパネルデバイス)を用いる
- カメラで手を撮影し、手形に見えるよう画像処理を施す
- 水と紙を用いて手形を取り、カメラで撮影して記録する
要件をすべて満たせるのはタブレットデバイスの使用のみであったので、タブレットデバイスをツールとして使用することに確定し、ブラウザアプリベースのプロトタイプを作成する。
結果の検証 プロトタイプ検証 - 簡易プロトタイプで大方針の成否を確認 -
実動プロトタイプを作成し動作検証することにより、要件を満たせることを確認。
課題解決Ⅱ: 幼児の手形をとる
課題 (FOR USER) 幼児をテストユーザーとした場合、意図した通りに行動してくれず、手形取得の操作完了に至れない
課題解決Ⅰにて、単純なタブレット操作で手形をとれることは確認できたが、幼児が操作するには難があった。
「手のひらを画面に当てて数秒待つのみ」という単純な操作であるが、幼児の場合では「手を開いてくれない」「じっとしててくれない」という事態が頻発してしまう。
調査探求 プロトタイプの修正と検証を繰り返しつつ、幼児による操作を観察
幼児をテストユーザーとしたプロトタイプ検証を行い、UI改善方法を探る。
ガイド表示や手形検知タイミングの調整などを行い繰り返し検証するも、決定打は見つからない。 反面、検証を繰り返すことで、UI改善とは関係なしに成功率が徐々に上がっていることが確認できた。
検証と観察の繰り返しにより、以下の傾向が見えてきた。
- 子供の手形が綺麗にとれると、親が喜ぶ
- 親が喜ぶ姿を見ると、子供も嬉しい
- 子供自ら、親を喜ばせようと工夫しだす
これらの点から、視点を変えるべきではないか気づく。
例えば、プロダクトの目指すところを「親が子供の成長を記録するもの」でなく、「子供が親を笑顔にするもの」へスライドさせる、など。
対策実施 視点を変えてプロトタイプを修正 - 機能実装から体験実現へとシフト -
プロダクトの目的を、「親が子供の手形を取る」という機能実装よりも、「手形をとるという行動を親子で楽しむ」という体験実現の方へ重点を置くこととする。
UIのビジュアルや手形の表現をアナログ感ある可愛らしい見た目に変え、落書き機能等の「より楽しむための機能」を付加する。
結果の検証 プロトタイプ検証 - 操作を完了できること、楽しめていることを確認 -
徐々にではあるが手形とり成功率が上がり、2回に1回は成功するようになった。
また、失敗をしたとしても、手形をとるという行為自体に楽しさを付与できた。(失敗しても、予想外の形状が表示されることを楽しめる。)
課題解決Ⅲ: 綺麗に手形を取る
課題 (FOR USER)
ユーザーによっては、手形が歪に表示されてしまう
(操作完了には至るが、期待した結果を得られない)
課題解決Ⅱにて、特定のテストユーザー相手には手形とりに成功したので、テストユーザーの人数を増やして試したところ、何度試しても失敗するユーザーが複数名いた。
調査探求 データの収集と詳細調査
失敗するユーザーは大人か子供かを問わず、想定した通りに操作した場合でも失敗するため、単純に手形の検知および描画の処理とユーザーの手の形がマッチしていないことが原因だと推測する。
テスト協力者から情報(手の写真、タッチ点データ、手形画像)を募り、開発者の手元で失敗時の手形描画処理を再現できるようにし、計算処理の誤りを探った。
結果、手の形状を検知する処理に不適切な箇所(開発者自身や初期テストユーザーにしかマッチしていない箇所)があることが判明。
対策実施 計算処理と操作フローの修正
手形検知の処理を修正し、成功率を大幅に上げた。 修正前は20個のテストデータに対して成功は8個(40%)であったが、修正後は17個(85%)まで向上した。
一方で、手の形の個人差が想定よりも大きく、一つの計算処理で万人の手にマッチさせることが難しいことがわかってきた。
そこで、4つの異なる計算処理を用意して複数のサンプルアウトプットを提示し、ユーザがそれらから一つを選択する形へとUIを変更した。
操作ステップが一つ増えてしまったが、「うまく手形がとれず何回もやり直す」という状況は避けられるようになった。
結果の検証 プロトタイプ検証
再度ユーザテストを行い、成功するようになったことを確認。