課題から画面へ

アプリデザインのアイデアを検証できる画面構成に落とし込む

アプリデザインのアイデアをお探しですか?まず、誰かがすでに苦労しているタスクを見つけ、そのタスクを完了するまでの最短経路を描いてみましょう。App Designは、ブラウザ上でのデザイン作業に進む前に、必要な画面を検討するのに役立ちます。

クリエイティブなデザイン作業スペースを示すApp Designのランディングページ用ビジュアル

このページの役割

このページを使って、課題を具体的なコンセプトと画面の流れに落とし込みましょう。計画を助けるためのものであり、調査や実装に代わるものではありません。

1

アイデアはユーザーから得た証拠ではない

もっともらしいアプリデザインのコンセプトだけでは、人々が行動を変えるほど頻繁にその問題に直面しているかは分かりません。

代わりにすべきこと

完成度の高い画面に時間をかける前に、見込みユーザーにその問題が最後に起きたときのことを話してもらいましょう。

2

画面構成は動く製品ではない

見た目の方向性だけでは、データの扱い、アクセシビリティ上の動作、セキュリティ要件、アプリを動かすために必要な開発作業は定まりません。

代わりにすべきこと

各画面に、必要なデータ、状態、技術的な依存関係についての短いメモを添えましょう。

3

参考例は再利用できるテンプレートではない

魅力的なレイアウトでも、自分のプロジェクトには持ち込めない素材、権限、操作方法に依存している場合があります。

代わりにすべきこと

基本となるパターンを参考にし、内容を置き換えてから、そのパターンが自分の目的に合っているか確かめましょう。

一度に1つのコンセプトを練る

小さなアプリデザインの演習なら、考えられる機能をすべて作らなくても、複数のアイデアを比較しやすくなります。

  1. 1

    繰り返し行う作業を明確にする

    誰が助けを必要としていて、何を終えようとしているのかを1文で書きましょう。たとえば、共同生活を管理するアプリなら、ルームメイトが買い物の直後に共有の支出を記録できるようにすることが考えられます。機能のリストから始めるのは避けましょう。

  2. 2

    最短の操作の流れを描く

    最初の画面、主な操作、完了を知らせる画面を特定しましょう。共有の支出なら、残高の概要、支出の追加フォーム、保存完了の画面が考えられます。情報が不足している場合や、登録に失敗した場合の動作も書き留めましょう。

  3. 3

    アイデアを実際の利用場面に照らして確かめる

    その作業を実際に行う人に、画面の流れを見せましょう。最初にどこをタップするか、どんな情報を期待するか、どこで迷うかを尋ねます。色や装飾の細部に時間をかける前に、操作の流れを見直しましょう。

改善前/改善後

重要なのは、漠然としたテーマを、1つの作業を最初から最後まで行えるインターフェースへと具体化することです。

画面レイアウトの検討に使う初期のワイヤーフレーム
改善前:大まかなレイアウト
より発展したアプリコンセプトのビジュアルリファレンス
改善後:作業を軸にした方向性

画像は計画の参考資料として扱い、特定の機能が実装された証拠とは考えないでください。より明確なアプリデザインの要件書には、ユーザー、操作、必要な情報、成功時の状態を記します。

改善前:大まかなレイアウト改善後:作業を軸にした方向性

成果物の仕様

以下の各シナリオでは、短い操作の流れ、各画面に不可欠な内容、想定ユーザーに確認する質問という具体的な成果物を提案します。

地域のボランティアコーディネーター

参加者が何度もメッセージをやり取りせずに、空いているシフトを選べるようにする必要があります。募集一覧、シフトの詳細画面、日時と場所を明示する確認画面を計画しましょう。

3画面の操作の流れを作り、初めて参加するボランティアが、自分の引き受けた内容を把握できるか確かめましょう。キャンセル時と満員時の状態も計画に含めます。

モバイルアプリデザインのアイデア

個人で活動するフィットネスコーチ

クライアントがセッション中に次の運動を忘れてしまいます。セッションの概要、運動の詳細、進捗が分かりやすく示された完了画面を計画しましょう。

移動中や疲れているとき、スマートフォンをちらりと見るだけのときでも使える画面の構成案を作成します。説明と次に取るべき行動が見つけやすいか確認しましょう。

モバイルアプリデザインのアイデア

地域のフードパントリー

寄付者は、今日必要とされている物資を知りたいと考えています。現在必要な物資の一覧、役立つ数量情報を含む品目の詳細、持ち込み方法を案内する画面を計画しましょう。

コンテンツを優先した画面遷移を作成し、必要な物資の一覧を誰が最新の状態に保つかを明確にします。寄付者が古い依頼を現在のものと間違えずに行動できるか確認しましょう。

モバイルアプリデザインのアイデア

次のステップへ

ユーザーのニーズが最も明確なシナリオを選びましょう。そのタスクの説明、画面の順序、未解決の疑問を次のデザインセッションに持ち込みます。App Designは作業の方向づけに役立ちます。リンク先のブラウザー上のワークフローでは、作業をどう進めるか検討できます。特定の機能を当てにする前に、利用できる機能を確認してください。

明確なコンセプトを1つ、ブラウザー上のワークフローに移す

  • ユーザーのタスクを1つ選ぶ
  • 必要な画面を説明する
  • 未検証の前提を明示しておく
ワークフローを確認する

シナリオに関するよくある質問

人々がすでにメモ、メッセージ、スプレッドシートを使ってこなしているタスクを挙げてみましょう。始まりと終わりが明確なタスクを探し、もっと簡単な手順を画面上でどう示せるか描いてみてください。「生産性」のような広い分野よりも、具体的な不便さのほうが役立ちます。

その問題に直面している人に、今はどう対処しているか、現在の方法のどこに支障があるかを聞いてみましょう。繰り返し行うタスクと意義のある改善点を説明できるなら、小さな画面遷移としてテストする価値があります。それは調査を始める理由にはなりますが、需要の証明ではありません。

想定するユーザー、完了したいタスク、それに必要な最小限の画面を含めましょう。各画面に表示すべき内容に加え、必要に応じて、データがない場合、エラーが起きた場合、完了を確認する場合の表示も記録します。補助的な機能は後で検討しましょう。

いいえ。各ステップで何が起こると予想するかを尋ねるには、読みやすいスケッチや簡単なワイヤーフレームで十分です。初期のフィードバックは、画面遷移やラベル、優先順位をまだ変更できる段階で最も役立ちます。

デザインを始める
デザインを始める