UIデザイン

Facebook、Instagram、Snapchatなど自分たちと世代も変わらない小さなチームが世界中で使われるサービスを生み出してきました。
自分たちも同じように、世界中で使われるサービスを自分たちのチームで創りたい！
そういう憧れや嫉妬からこの会社を設立しました。
「電車で当たり前に僕らのサービスを使っている人を見かける」
そんな、人々の日常に溶け込み、多くの人が当たり前に使うものを目指して日々開発をしています。

パラレル株式会社

遊べる通話アプリ『パラレル』を作っている創業メンバーの槙野(Twitter：<a href="https://twitter.com/ytmkn_">@ytmkn_</a>)と申します。

パラレルは今年の夏に12億円の大型調達(累計17億円)を行い、グローバル・日本でその名を轟かすようなサービスになるために日々奮闘しています。

パラレルは6月11日、ジャフコグループ、KDDI Open Innovation Fund、ANRI、W ventures、三菱UFJキャピタルを引受先とする第三者割当増資により総額12億円の資金調達を実施した。

月の総通話時間は4億分を突破、急成長中の通話アプリ「パラレル」運営元が12億円の資金調達 | DIAMOND SIGNAL

今回は、先日開催したイベント「インハウスデザイナー酒場」で登壇した時の内容を記事にしました。

当日は謎に僕をいじる人が続出し、盛り上がりました！笑 参加頂いたみなさんありがとうございました！

本題に入りますが、僕はフレームワークの鬼👹で、あらゆることを以下の画像のようにフレームワークに落とし込み、抜けもれなく確実にアウトプットが出せるように徹底しています。

PMから企画を渡されてから、デザインが完成するまでのUIUX制作プロセスに関しても、独自にフレームワーク化しており、今回はそれを赤裸々に公開していければと思います。

もし少しでもおもしろい記事だと思ったら、いいねを押して、Twitterでの拡散まで行って頂けると僕の励みになります🙏

他のデザイナーさんと話したり一緒に仕事をする中で、結局みんなやってることは同じだなーと思いました。

それを抜け漏れなく体系化すれば、ミスが減り、打率が高いデザインができるなーと考え、以下のようなプロセスに分けて、デザイン制作を行っています。

僕がこうして体型化している理由としては、よく作ってみなければわからないという状況に直面すると思うのですが、その意思決定をするにあたり、無思考でとりあえずリリースするのと、様々な側面から考えた上でリリースするのでは雲泥の差があると思っているからです。

意思決定というのは、意思決定するために必要な情報・判断材料を洗い出し、できるだけ多く定数にするというゲームです。

デザインをリリースする時にも正しく意思決定は行われるべきで、意思決定のための材料(要件)を定義し、その中でどれを定数にして、どれを変数にするかを判断し、それを踏まえて最終的なアウトプットを行えるようにしました。

意思決定を正しく行うメリットとしては、実際にリリースした後でなにか数字的に問題がある場合に仮説が立てやすくなります。

「変数だったあの部分が課題だから、こうして改善しよう！」みたいなのが意識的にできます。これが無思考でとりあえずわかんないからリリースしようとなると、リリースした後に「あれなにが課題だったけ」ってなってしまいます。

僕がまずはじめに行うのがPMから渡された企画を読み込み、今回はなにが達成されて(目的)、その目的を達成するためにどういう条件がクリアされていないといけないか(要件)、誰に向けた改善なのかなどを定義します。

企画要件を定義する理由としては、なんとなく理解していることはデザインする時に忘れてしまうからです。そのためしっかりと言語化をして、頭に叩き込んでいます。

例えば、オリジナルブランドを販売するECで、Googleで検索した時にヒットするLPの改善をする場合に、既存ユーザーに対してなのか、新規ユーザーに対してなのか、既存ユーザーの中でもヘビーユーザーなのかなど誰に向けてかが定まっていないとデザインはできないと思っています。

仮にそのサービスを知らないユーザーが多く流入してくるLPだった場合は、その商品の良さをしっかり説明したほうがよかったりします。

逆にリピーターが多いなら、購入ボタンにすぐアクセスできるようにしてあげるなど、ボタンをどこに置くかという判断でさえターゲットによって異なります。

個人的に一番重要なのはユースケースだと思っています。

対象となるターゲットが現在どういう代替手段で、どういう状況で、どういう行動を行っているかを把握しないとユーザーへの共感ができず、施策の成功率がグンと下がります。

ユーザーのことが理解できていない状況で、デザインを制作してもうまくいくわけがありません。

実際に僕がまとめたドキュメントはこのようなものになっています。

別に難しいことはしておらず、シンプルでいいので、言語化をしっかりして、デザインを制作する上の材料にしています。

このプロセスは施策が大きかろうが、小さかろうが、急いで制作をしないといけなかろうが、絶対に挟むべきだと思っています。

企画要件を定義するのは、慣れてくれば15分-1時間で終わるので、それをせずに施策の成功率を下げるよりも確実に失敗しないほうを選んだほうがいいと思っています。

次にデザインをする上で、クリアすべき条件(要件)をまとめます。

具体的にはファネル・フォッグ式消費者行動モデル(B=MAT)を元に独自にアレンジしたフレームワークを元に要件を定義していきます。

まずはそれぞれがどういうものなのか簡単に説明します。

ファネルとは商品購入や会員登録など、アプリ内でユーザーにしてほしいアクションに至るまでのプロセスのことです。(マーケティングでもよく使われますが、プロダクト改善でもよく分析手法として使われます。)

この記事はコンバージョンに至るまでのステップを分解し、チェックする「ファネル分析」について紹介します。ファネル分析を行うことでユーザーが離脱しやすい過程を特定することができ、コンバージョンを向上させることができるのです。｜Repro Journal（リプロジャーナル）

ファネル分析とは？ アプリのコンバージョンを最適化する方法を解説 | Repro（リプロ）-カスタマーエンゲージメントプラットフォーム

デザイン制作時には以下の4つに分けて活用しています。

この4つがしっかり考慮されていないと、機能をリリースする意味がないと考えています。

機能にそもそも気づくかどうかをあまり気にせずにリリースして、機能に気づく人が少なかったり、どういう機能かよくわかんないから使ってないと言われたりなど実際に行ってほしいアクションに至る前に離脱しているユーザーが多いことが僕自身過去によくありました。

2.2. フォッグ式消費者行動モデル(B=MAT)

B=MATというのは、フォッグというおじさんが考案したものらしく、<a href="https://www.amazon.co.jp/Hooked-%E3%83%8F%E3%83%9E%E3%82%8B%E3%81%97%E3%81%8B%E3%81%91-%E4%BD%BF%E3%82%8F%E3%82%8C%E3%81%A4%E3%81%A5%E3%81%91%E3%82%8B%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%82%92%E7%94%9F%E3%81%BF%E5%87%BA%E3%81%99-%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3-%E3%81%AE%E6%96%B0%E3%83%AB%E3%83%BC%E3%83%AB/dp/4798137863">『Hookedモデル』</a>で存在を知りました。

消費者が購買や申込などの行動をするために必要な要素の相関関係を表したもの。「モチベーション」「行動障壁/実行能力」「トリガー」の3つの要素が満たされると人の行動は実現しやすくなる。スタンフォード大学のB.J. Fogg氏が提唱した。

フォッグ式消費者行動モデル

僕が敬愛する深津大先生も行動を起こすための条件としてこのB=MATを提唱しています。

新入社員のこばかなさんが、「こばかなスケッチ」という自分企画を頑張っている。THE GUILDでの日々の仕事と、読書で学んだことを、一枚のスケッチにまとめるチャレンジだ。   彼女のスケッチが溜まってきたので、復習とサポートを兼ねて、解説を書いていきたい。第二回はこの絵。         行動 = 動機 × 実行能力 × きっかけ  今回のこばかなさんのイラストは、「フォッグの消費者行動モデル」という概念モデルだ。ざっくり言うと、ユーザーが行動を起こすために必要な3条件を示している。  このモデルでは、「ユーザーが何かアクションを起こす」条件を、  B = MAT  という、とてもシ

「ユーザーが行動をおこす条件」の話｜深津 貴之 (fladdict)｜note

B=MATは、その行動を起こすモチベーションがあって、かつその行動を起こそうとするきっかけがあり、その行動が実際に行える能力があることで、行動は達成されると言っています。

アプリ内で行ってほしい行動ごとにB=MATを定義し、ほんとに行動されるのかを見ています。

これは本当に使い勝手がよくて、どのモデルよりも一番汎用性が高く、おすすめです。

2.3. デザイン要件を定義する方法

僕は上記のファネルとB=MATをかけ合わせて以下のようなフレームワークにしています。

4つのファネルそれぞれにB=MATの中で必要なものを挿入しています。

この段階ではデザインをする上で、考慮すべき条件を定義するだけで、実際にその条件をどうクリアするかに関しては、作りながら考えます。

◯トリガー 機能に気づくにはなにかしらのきっかけを与える必要があると思います。ユーザーが勝手に気づくでしょというのは基本的に気づかれないです。

そのためお知らせ機能を出したりなどをする必要があります。場合によってはトリガーは必要ないこともあり、例えばほとんどのユーザーには関係ない時などはあえてトリガーをつけない時もあります。

意図されていればトリガーをつけないという意思決定でもいいと思います。

◯アクション 機能に気づく時には、お知らせなどサービス側として伝えたい情報をユーザーに見てもらわないといけません。そのためには身体的・心理的な障壁をクリアし、機能に気づいてもらう必要があります。

よくアプリを起動したら、ポップアップで新機能登場！みたいなものを出すと思うのですが、あれは心理的にユーザーが見たいタイミングじゃないのに無理にアテンションを得ている場合もあるので、見られなかったりします。

②興味：メリットを想像し、使いたいと思う

◯リワード 機能に気づいた後は、その機能の良さをしっかり感じ、使ってみたい！と思えるリワードが必要です。

誰に向けたどういう時に使う機能で、どういう価値を得られるかがわからないケースがあります。その場合は、そもそもの企画がイケていないケースもありますし、デザインでしっかりと良さが伝わっていないケースもあります。

◯トリガー 機能を知った時と、機能を実際に使ってみるタイミングはずれているケースが多いです。 その場合、ユーザーに機能を思い出してもらい、使ってみよ！と思ってもらう必要があります。ユーザーはいちいちサービス内の新機能のことなど覚えておらず、習慣化していないと想起すらしないので、トリガーは必ず必要です。

◯アクション 実際に使ってみる時にはB=MATのアクションで定められている条件がきちんと満たされているかを見る必要があります。

どうやったらアクションしてもらえるかというのは科学されているので、身体的・心理的に見ていけばミスなく、理想通りに行動してもらえると思います。

◯リワード 使った時にリワードがないと二度とその行動はしてもらえません。したがって初回で大きなリワードが得られない場合は、小さなリワードを提供したりなどなにかしらこの行動をしてよかったと思えるものを与える必要があります。

マッチングアプリだと、相手からいいねがくるというのは小さなリワードで、そこから実際に返信くるのが大きなリワードだと言えます。

初回利用と継続利用でリワードが異なる場合は、意外と多いと思っており、しっかり初回でどういうリワードを届けるかを考えるべきだと思っています。

◯トリガー 初回利用してるだけだとまだ習慣化されていないので、習慣的に使われるトリガーを設けてあげる必要があります。ここは初回利用と同じでもいいと思っています。

◯アクション アクションに関しても、初回に使った時と継続して使うのだと継続のほうが毎回行わないといけないので、めんどくささが増します。

その分初回以上にアクションがしやすい必要があると思っています。

◯リワード 習慣的に行動を起こしてもらうには、強烈なリワードがないと継続されないので、こちらも定義する必要があります。

施策を考える時にこの部分は考えられてるはずなので、それを埋めるだけかなと思います。

実際に以下のようにデザイン要件を定義しています。

遊べる通話アプリ『パラレル』を作っている創業メンバーの槙野(Twitter：@ytmkn_)と申します。
パラレルは今年の夏に12億円の大型調達(累計17億円)を行い、グローバル・日本でその名を轟かすよ

デザインケース

デザインチーム

実践で使える失敗しないUIUX制作プロセス

実践で使える失敗しないUIUX制作プロセス

関わったメンバー

Yuta Makino

所属チーム

パラレル株式会社

関連するカテゴリ