未経験薬剤師が「企画〜デザイン」制作やってみる| Part 4/6

はじめまして、てぃむです。

この記事は、未経験UIデザイナーが目的のあるデザイン設計をできるようになるため、企画フェーズからアプリを考えていく勉強ログです。

前回の振り返り

前回の記事では、アイディエーションによるソリューション仮説の設定（以下の図）まで行いました。

▼ 前回の記事（Part 3）はこちら
https://note.com/timtic_1234/n/n8c6924f47790

今回はソリューション仮説をプロトタイプまで落とし込んでいきます。
オブジェクト指向UIデザインを参考にしています。

メインオブジェクトを探す

１）アプリのタスクを洗い出す。
２）ペルソナからユーザーストーリーを作成する。
３）１,２の中から名詞（オブジェクト）を抽出する。
４）同じ意味のオブジェクトが複数ある場合、１つにまとめる。
５）オブジェクトを階層化して整理する。
６）第１階層のオブジェクトを、メインオブジェクトとする。
　　※検討段階なので、画像はぼやかしています

モデル図を作る

１）メインオブジェクトとならなかった名詞を、プロパティとして整理する。
２）タスク、ユーザーストーリーの中からアクションを抽出する。

・C（作成・登録）U（更新・編集）D（削除）を意識する
・R（参照）はオブジェクトを表示することで済むため、アクションに含めない

３）メインオブジェクトにプロパティ、アクションが紐づいたモデルを作る。

４）モデル同士を線で繋げる。
※これから出てくるインタラクション図、ワイヤーフレームとモデル図を行ったり来たりしながらブラッシュアップしていきます。

インタラクション図を作る

メインオブジェクトにそれぞれコレクションビュー、シングルビューを作り、線で繋げる。

簡単なワイヤーフレームを作る

１）メインオブジェクトから、ルートナビゲーションに配置する項目を選び、アプリの骨格を作る。

・ユーザーがアプリを使うときに思考の起点となるオブジェクトを選ぶ
・機能でなくものが並んでいるイメージ

２）ルートナビゲーションの各オブジェクト→コレクションビュー→シングルビューまでのワイヤーフレームを簡単に作る。

プロトタイプ

ユースケースとワイヤーフレームを、簡単に作り直しのできるmiroで作ります。（Figmaだと遷移矢印を書くのが少し手間）

・タスク達成までのステップ数をできるだけ減らす。
・登録時には本当に必要な情報だけ入力してもらう。
・後からでも編集できる項目は、スキップ可能な選択肢を設ける。
・階層を深くしない。
・ユーザーが迷わない導線にする。
・ユーザーの操作を邪魔しない。
　例）ダイアログ、チュートリアル、ツールチップの工夫

miroで作ったプロトタイプをFigmaに移し、prototype機能で遷移を作っていきます。慣れてきたら最初からFigmaでワイヤーフレーム作った方が早そう。

まとめ

オブジェクト指向UIデザインを読みながら、黙々とプロトタイプまで作りました。こうやって物事を整理していくの、結構好きです。リアルな掃除は嫌いだけど。
次は、作ったプロトタイプをユーザーにあてて価値検証していきます🥸✨

------------------------------------------------------------------------

▼ 次の記事（Part 5）を読むには下のリンクをクリック
https://note.com/timtic_1234/n/n07467ef41c9e

▼ Part 1
課題仮説の設定
https://note.com/timtic_1234/n/n4cded9ad6993

▼ Part 2
ユーザーインタビューによる検証
https://note.com/timtic_1234/n/n37722972b35e

▼ Part 3
アイディエーションによるソリューション設定
https://note.com/timtic_1234/n/n8c6924f47790

▼ Part 4
プロトタイプの作成
https://note.com/timtic_1234/n/n2f4c4f8040d9

▼ Part 5
ユーザーテストによる価値検証
https://note.com/timtic_1234/n/n07467ef41c9e

▼ Part 6
UIデザインの設計
https://note.com/timtic_1234/n/n6373bdfa8505