icon
icon

具体的な方法を学ぶ!優れたアプリのデザインプロセスとは

アプリや製品を開発する時、何か問題を解決するために作られるはずです。そして、ユーザーに使いやすいと思ってもらうためには優れたデザインを設計する必要があります。具体的な方法、実際のアプリ事例をもとにデザインプロセスを身につけましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

本稿は、Studio by UXPinブログ記事を、了解を得て日本語翻訳し掲載した記事になります。

「問題を解決するためには、まず最初に、問題が存在すると認識することです。」- ジグ・ジグラー

製品の問題定義は、製品開発の土台であり、ひいては製品の成功のための鍵となります。デザインに関する問題の解決策も、この問題定義を土台として導くことができるのです。

つまり製品のデザインは、深い理解と定義が要されるような問題から始めるべきです。最初に何となく正しいと思える問題から、深く考えずにデザインを始めるとしたら、良い結果は期待できません。

image04-1-620x209

画像:「理解」→「定義」→「アイデアの形成」→「デザイン」→「テスト」の循環。UXPinからMarcin Treder氏による「デザインプロセス」より

 

問題定義を中心としたアプリのデザインプロセスについて見ていきましょう。身近な問題を解決するアプリをデザインすることを想定します。

1つは「ストレス過多」の問題です。

私は友人を集めて、ストレスの問題を抱えているかどうか聞いてみたところ、12人中9人が「はい」と答えました。「いいえ」と答えた3人は、超人的な禅僧のような精神の持ち主ではないかと思えたくらいです。

アプリのデザインにおいて考えるべき問題を見つけたら、次は問題定義(解決するべき問題の範囲を定める宣言文)を書きます。

チームのメンバーに上手く問題を提示できるような、質の高い問題定義の書き方をご紹介します。あなたが素晴らしい製品アイデアを思いついたり、フィードバックを受け取ったときには、次の方法が思考の指針として役立ちます。

 

問題を認識する

image00-3-533x300

私は、DAPPER GENTLEMENという会社でアプリのチーム開発の仕事をしていますが、アプリのデザインや機能の設計方法についての話題をよく聞きます。創造意欲やアイデアを得られるような良いデザインのアプリの話もあれば、時には全てにおいて出来の悪いアプリの話もあります。

最近、私の妻が新生児の育児サポートアプリについて「これは悪いアプリね。」と話していました。

私はデザイナーとしての直感から、何か問題がありそうだと思いました。

私が「解決の必要な問題があるの?」と聞くと、妻は「いいえ、ただ話を聞いて共感してもらいたかっただけ。最後まで話をさせてくれる?」と言いました。

「もちろん力になるとも!まず最初に、問題をより深いレベルで理解する必要があるね。」私は声を大にして言いました。

「・・・(ため息)」

多くの開発者やデザイナーは、ユーザーの声に耳を傾けて問題をよく考える時間を取らないため、ユーザーの抱えている問題の解決方法を知らないようです。これは彼らが怠惰だからではなく、問題の本質的な原因を深く考える術を知らないからです。

デザインプロセスも何らかの始点が必要ですが、このような問題が始点となることも多いのです。私の妻の例では、彼女の使っているアプリが「悪いアプリ」であることが問題でした。

 

問題を認識したら次にすべきこと:

  • 問題を理解する問題を認識するだけでは解決できません。問題についてよく知る必要があります。
  • ユーザーの声に耳を傾けて考える問題の解決へと一気に急いではなりません。まずユーザーの声に耳を傾けて、現状を把握する必要があります(私と妻のやりとりの例を考えてみてください。)。一方的な質問も構いませんが、現状を把握する前に、解決策を提案すべきではありません。
1時間でできる無料体験!

また問題に疑問を投げかけて、さらに深く掘り下げてみましょう。

「私はストレス過多である」という最初の問題に戻りましょう。

「アプリの出来が悪い」という問題は、おそらく「ストレス過多」の問題と同じように考えることができます。

  • ストレスを管理する方法はいくつあるだろう?
  • ストレスの量が、本質的な原因なのだろうか?それとも、もっと深くにある問題の兆候に過ぎないのだろうか?
  • 出来の悪いアプリを改良する方法はいくつあるだろう?
  • アプリの全体的なデザインが、本質的な原因なのだろうか?それとも、もっと深くにある問題の兆候に過ぎないのだろうか?

 

兆候と問題を見分ける

兆候とは、製品においては機能性や使用感が「標準」的な品質を満たしていないと、ユーザーが主観的に感じることです。

より分かりやすい例では、疲労感は睡眠不足の兆候です。

疲労感は、元気に活動できるという「標準」の状態から外れていると感じる主観的な感覚であり、睡眠不足という問題の兆候となっているのです。

「ストレス過多」の問題でも、ストレスを感じないという「標準」の状態から外れていると、本人が主観的に感じているのです。

image02-4-697x1024-620x910

ストレスの対処方法には、夜にグラス1杯のワインを飲んだり、音楽を聴いたり、テレビを観たりなど色々あるでしょう。

ストレス発散のために、精神崩壊や癇癪を起こすに至る人もいるかもしれません。静かな場所に座って、深呼吸をして、ストレスの原因について考えることもできます。もっとも、多くの人はストレス状態にあることに気づいてすらいないため、原因を認識することは難しいのです。

 

では、「ストレス過多」は根本の問題でしょうか?もしかしたら、もっと深い問題の兆候に過ぎないかもしれません。

問題を解決するには、それ自体が根本の問題なのか、それとももっと深い問題の兆候に過ぎないのか考える必要があります。

 

[PR] UI/UXデザインで挫折しない学習方法を動画で公開中

根本原因を見つける

問題の根本原因を見つけることはなぜ重要なのでしょうか?それは兆候を解決するだけでは、問題を完全に解決したことにならないからです。

例えば、脚の痛みを感じたときにアスピリンを服用して痛みを緩和できても、痛みの根本の原因を解決したことにはなりません。問題の兆候として現れる痛みを何度も経験することになります。

病院に行って「骨折が脚の痛みの原因です。」と診断されて初めて、骨折という根本原因を見つけることができるのです。

では、「ストレス過多」の問題の根本原因を見つけるにはどうしたらいいでしょうか?トヨタ生産方式の「5つのなぜ」による分析を応用することができます。

 

5つの「なぜ」による分析

5つの「なぜ」による分析とは、「なぜ」から始まる疑問を繰り返すことにより、問題の根本に存在する因果関係を探り出すテクニックです。

 

私の妻の話を思い出してみましょう。

「これは悪いアプリね。それから、私が話をしているときには、もう少しよく聞いてくれても…。」

彼女の抱えていた問題は、新生児の育児のための生産性向上アプリの使い方がよく分からないことでした。消費されたおむつの数や、ミルクの量などを楽しく管理できるアプリです。

 

「5つのなぜ」による分析によって、このアプリの問題の深くにある根本的な問題を見つけてみましょう。

なぜ出来の悪いアプリなのか?
答え:正しく作動しないから。(より深い問題)

なぜ正しく作動しないのか?
答え:どこを操作したらいいのか分からないから。(より深い問題)

なぜどこを操作したらいいのか分からないのか?
答え:アイコンが上手く機能していないから。(より深い問題)

なぜアイコンが上手く機能していないのか?
答え:アイコンの選択後に、思っていたページに進まないから。(より深い問題)

なぜアイコンの選択後に、思っていたページに進まないのか?
答え:一見アイコンに見えるものがアイコンではない一方、アイコンには見慣れない要素が使われているから。(「問題解決につながる行動」が見つかりました!)

image03-3-1024x651-620x394

 

私からこのアプリのデザイン担当者に意見を送ったため、この問題の根本原因には早く気づいてもらえたと思います。

問題の根本原因はいつも「5つのなぜ」の5番目で見つかるとは限りません。では、根本原因を特定するにはどうしたらいいでしょうか?その鍵となるのが、「プロセスの欠け」または「問題解決につながる行動」を見つけ出すことです。これらは複数見つけられることもあります。

「ストレス過多」の問題も同じように分析してみましょう。

なぜ私はストレス過多なのか?
答え:ストレス過多を起こす思考を多く抱えているから(より深い問題)

なぜストレス過多を起こす思考を多く抱えているのか?
答え:思考を鎮めることができないから(より深い問題)

なぜ思考を鎮めることができないのか?
答え:思考を鎮める練習をしていないから。(より深い問題、「問題解決につながる行動」が見つかりました!)

なぜ思考を鎮める練習ができないのか?
答え:思考を鎮める方法を知らないから。(「プロセスの欠け」が見つかりました!)

なぜ思考を鎮める方法を知らないのか?
答え:思考を鎮める方法が必要だと自覚していないから。(より深い「プロセスの欠け」が見つかりました!)

image10-1-1024x651-620x394

この問題の根本原因は、思考を鎮めて精神を集中するプロセスが欠けていることだと判明しました。この問題では思考を鎮めることが、ストレス緩和、さらに問題解決につながるでしょう。

次は、問題定義を発展させてみましょう。

 

コラム

コスパとタイパ、両方結果的に良くなる良くなる学び方とは?

「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。

コスパ・タイパ最適化の参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

  • ・困ったときに、質問や相談できる相手がいるため挫折しなかった
  • ・プロとして必要なスキルのみを深く学べたので無駄がなかった
  • ・副業案件の提供と納品までのサポートがあったので目的を達成できた

安価・短期間で広く浅く学んでも意味がありません。 本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に 無料相談 に参加してみませんか?

カウンセラー・現役のプロへ、何でも気軽に無料相談可能。 30分か60分お好きな時間が選べて、かつ3回まで すべて無料で ご利用できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き! 無料相談はこちら

問題の再定義

新しい問題定義:「ユーザーのストレスを緩和するために、精神を鎮められるように支援する」

先の例では、5番目の「思考を鎮める方法が必要だと自覚していない」問題よりもさらに深い問題は見つけることができるでしょうか?

「プロセスの欠け」をさらに深く考えることが、製品デザインに役立つことがあります。より深く抽象的な問題定義を書くことで、最初の兆候のみならず、より広い範囲の兆候を解決できるからです。

また、デザインのプロセス全体を通して、問題定義は発展させ続けることができます。問題定義が深く具体的になり過ぎたときには、1段階元に戻して抽象化し、再定義すればいいのです。

さらに新しい問題定義:「ユーザーのストレスを緩和するために、自分自身にもっと意識を向けられるように支援する」

image07-1-1024x768-620x465

また、問題の再定義と組み合わせることで、根本原因を見つけて解決策を導くのに大いに役立つ手法があります。これらはチームでデザインの問題を深く考えるときにも応用できます。

  • ブレインストーミングを実践する問題に取り組む全員(デザイナー、開発者、マーケティング担当、経済アナリストからセールス担当に至るまで)を集めます。デザインの問題を最終的に解決する仕事は、デザイナーに委ねられていますが、他の部門の人も役に立つ洞察力で貢献できるかもしれません。セールス担当はユーザーに最も近い存在であるため、問題をより深く理解しているかもしれませんし、経済アナリストは市場の読みにおいて優れているでしょう。
  • 問題のリサーチを実践するすでに似たような問題が発見されていないか調べるために、競合製品の市場分析を行うのも有効です。あるいは、消費者調査を実施することもできます(ストレスについて私が友人に聞いたように)。すでに市場に売り出している製品であれば、データ解析、ヒューリスティック分析、ユーザーテストなどを行うこともできます。

 

モバイルアプリと正しい問題定義

例として、問題定義が優れている3つのアプリを見てみましょう。

1. Enlight

image08-2

Enlight(iOSの写真加工アプリ)のStav Tishler氏によると、「これまでプロの写真家だけがデスクトップでのみ利用していた創造的なツールを、モバイル端末を使う写真家にも提供すること」がこのアプリの問題定義です。

Enlightは、優れたデザインとテクノロジーによってこの問題を解決しました。Lightricksが商標権を有する画像処理エンジンによって、Enlightの各種ツールでは、一貫性のあるUI(ユーザーインターフェース)が実現され、ユーザーは1つのツールで行った処理を、他のツールに継承させることも可能です。

 

2. PureChat

image11-1

PureChatのCEOであるHamid Shojae氏によると、「小規模ビジネスの運営者が、彼らのWebサイト上で訪問者とのコミュニケーションを円滑に行うことを支援すること」がこのアプリの問題定義です。

App StoreとGoogle Playの両ストアにおいて4.5星の評価を保持していることが、問題解決に成功した証といえるでしょう。

 

3. Crowd Mics

image09-2

Crowd MicsのCEOであるTim Holladay氏によると、「ユーザーに会議、ミーティングなどライブ形式の会合で自分の声が周囲によく通ることを可能とすること」がこのアプリの問題定義です。

Crowd Micsは、ユーザーのスマートフォンをワイヤレスのマイクに変えてくれるアプリです。

 

1時間でできる無料体験!

結論

あなたが製品によって解決したい問題を考えるために少しの時間をかけることで、将来、デザインを決定するときに役立つ強力な土台を築くことができます。

ステップのおさらい

  1. 問題定義
    製品によって解決したいと思う問題のリストを作成することから始めて、これらを考え合わせて問題定義を書きます。
  2. 「5つのなぜ」による分析
    次に、「5つのなぜ」による分析を行い問題定義をより深く考えます。
  3. ブレインストーミングと問題定義の発展
    最後に、チームのメンバー全員を集めて、問題について議論と再評価を行います。
    より明確な問題定義が必要であれば、問題定義は繰り返して書きましょう。

良い問題定義を作成できても、それにとらわれる必要はありません。デザインのプロセスが進む中で、新たに考えるべき事が発生すれば、問題を再定義しなければならない場面もあるでしょう。

[お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学で学習していて、このように感じた経験はないでしょうか?

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう カウンセラーやエンジニア・デザイナー があなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」

こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)

今なら参加者限定の割引特典付き! 無料相談を予約する