楽しい新規アプリ開発！そのスタート部分のお話です。
こんにちは！
わりえもん こと Lobi / FILTERS のデザイナーの 割石 です。
去年から OH (http://wariemon.com) という名前でも活動中です。ご贔屓に。
昨年末にリリースされた カヤックの新規カメラアプリFILTERS 、皆さんご存知でしょうか？
"みんなでフィルターをつくる" 全く新しいカメラアプリ、それが "FILTERS" なのです！
FILTERS が気になるかたはこちら！
今回は、その新規アプリ制作において非常にキーになった
「ユーザーを最短でゴールまで導くマインドマップ遷移図のススメ」のお話をします！
デザイナーがマインドマップで遷移図を書くメリット
遷移を自分で責任もって引くということは、すべての画面に理由がなければつくれません。
そこで出てくる理由とは開発陣のスキルや、納期など、色々制約がありながらも、
ユーザーの利益に向いているべきです。
今回、ぼくは初めて書いてみたのですが、それまで見えなかった**3つの大事な部分**が見えてきました。
1. ユーザー像を見定められる
2. ユーザーのゴールを見定められる
3. ゴールまでの最短ルートをひける
1. 2. に関しては自分の中の整理、3. は実制作に入る前のチェックという感じですね。
この三点に注目して制作のフローに落とし込んで考えてみましょう。
STEP1. ユーザー像を見定める
アプリの内容から、アプリを使うユーザー像を見定めましょう。
今回はFILTERSを参考にざっくり考えてみます。
FILTERSはカメラアプリでありながらフィルターの開発プラットフォームです。ここで見えるユーザーのタイプは
みんながつくったフィルターをつかって撮影して楽しむだけでなく、
PCと連携して、"GLSL"という言語でプログラミングで開発ができます。
Aさん : カメラアプリとしてフィルターを楽しみたい
Bさん : カメラフィルターを開発したい
と大きくざっくりこの2パターンに分類できそうですね。
この2パターンのユーザーのゴールを次に考えます。
STEP2. ユーザーのゴールを見定める
AさんとBさんには、アプリをインストール・使用するのにあたって
満たしたい欲求・ゴールがあります。
Aさん : カメラアプリとしてフィルターを楽しみたい
- 写真・動画をとりたい- 写真にフィルター加工をしたい
Bさん : カメラフィルターを開発したい
- フィルターを開発したい- 他の人のフィルターをベースに開発したい
- 他の人のコードを読んでみたい
ここで洗い出されたユーザーの欲求を満たすところをゴールとして
スタートからゴールを最短で走ることを目標としてマインドマップを書来始めましょう！
STEP3. スタートからゴールまでを可視化するマインドマップ
ゴールもはっきりしたところで、マインドマップツールを使って画面遷移を明確にしていきます。
今回用いたのは オンラインマインドマップツールの "Mind Meister" です。
操作も簡単でビジュアルも美しく、URLでメンバーにシェアすることができる利点（※現在は有料会員のみの機能）があります！
まず最初の画面にある要素からどんどん遷移を書いていきましょう。
ぼくは「画面」「要素（ボタン / タブなど）」「ポップアップ / アラート」でスタイルを分けて書いています。
書いていく途中で重要なのが、最終遷移が 2 で書いたゴールになっているかを見定めていきます。
また、ゴールまでの距離が長いところは「省くことができないか」「無駄な繊維やポップアップがないか」を見ていきます。
遷移をかくことによってデザイナーが見落としがちなエラーパターンの把握もできるのも、
ユーザー体験において、ストレスを減らすことに貢献できるので、付加価値として大きいです。
マインドマップツールには各種マークなどが用意されているものが多いので、
「ゴール」「ポジティブアクション」「ネガティブアクション」「エラー」でマークをつけてみました。
これをつけていくと、ゴールまでに無駄なネガティブアクションがないか、などのチェックもしやすいですよね。
これにプラスαしていくと、ユーザーがどういう心理でそこに遷移するのかなどを書いていく、など
よりユーザーの心理に沿った設計ができそうですね！
いかがでしたでしょうか！
FILTERS では、このマインドマップツールと googleDocsだけで進行管理を完結できたので、
進行において、非常に大きな手助け、立ち返る場所となりうる存在でした！
ぜひ、皆さんも利用してみてください！
ちなみに、現在使っているマインドマップツールは、Mac / iOSアプリの "MindNode" です！
こちらは買い切り約2,000円（2015年1月現在）なのでオフラインでも使いたい・URLシェアは必要ない という方はこちらもおすすめです！
カヤックでは、一緒にサービス・ゲーム・クライアントワークでものづくりができるデザイナーを募集しています！
気になった方はぜひ一緒にUI/UX設計、グラフィック作成など楽しみましょう！！
デザイナーはこちらから！
by わりえもん OH : http://wariemon.com