この記事は、インハウスで働く新卒2年目のUIデザイナーが試行錯誤しながらcocodaをやっている話です。

主にどんなことを考えてこの画面が出来上がったかとやUI作成の流れと考えることの備忘録です。わたしのメモ的な部分が大きいですが、駆け出しの人やcocodaをやろうかなと思ってる人、cocodaをやっている人に参考になると思います！

今回は、要件を決めるところから、その要件をきちんとUIに落とし込む流れを試してみたのでそれを書きました。

自己紹介
みりんです。インハウスで新卒2年目デザイナーとして働いています。今メインはUIで、ユーザビリティテストもやったりします。去年はUXデザインであるユーザー調査も行なっていました。
まだまだ全然ひよっこ🐣なのですこしずつ毎日頑張ります！
Twitter : mimimiryn

お題01のプロフィール画面では、

1.  既存サービスを見る
2. 必要な情報を書き出す
3. ラフを手書きで書く
4. 実際につくる

という手順で作成していました。しかし、要件をふわっと決めてふわっとUIに落とし込んでる(落とし込んでると言えるのか？！)状態でした。

最近、はじめてのUIデザインを読みました。第3章が情報設計についてとても詳しく実践的に書かれていました。そこで、その手順に沿ってやってみることにしました。
手順についてはこちら↓に詳しく書いております。

▼与えられた要件

cocodaから与えられます。
ペルソナと価値シナリオの部分ですね！

・誰向け？：食べ盛りな子供を持つ夫婦
・コンセプト：冷蔵庫にある食材で手軽にできる料理アプリ
・雰囲気：あたたかいやさしい

▼情報設計の流れおさらい

1. 行動、操作のシナリオ作成
ユーザーが目的達成するまでの理想的な状態の仮説を立てる

2. コンテンツの分類軸の設計
シナリオからユーザーの性質を理解し、それに合わせたコンテンツの分類を行う

3. UIモデルの設計
コンテンツの見え方ごとにユーザーが何を見てどうするかを整理して、フロー図を作成する

4. レイアウトとインタラクションの設計
プロトタイプでレイアウトとインタラクションを設計する

💡この流れで設計していきます。

1. 行動、操作のシナリオ作成

ペルソナ
食べ盛りな子供を持つ夫婦

💡ペルソナは与えられており、価値シナリオも一つだけ与えられてます。なので、与えられた情報を膨らましていきます。

価値シナリオ

ユーザーの欲求/特徴/やりたいこと(価値)/価値
価値と関連のあるシーン

◎ユーザーの欲求

冷蔵庫にある食材で手軽に料理ができる
食材があまらない
食べ盛りのこどもたちが満足する量やボリューム感のあるメニュー

◎ユーザーの特徴

共働きなので忙しい
奥さんが毎日料理をする
冷蔵庫の中身を中心に献立を立てると、レパートリーが少なくなってしまうのが悩み。
仕事帰りにスーパーに寄って帰り、だいたい20:30くらいからみんなで食べ始める
子供にはお弁当も作る
子供は、中学2年生と高校1年生

◎ユーザーがやりたいこと(価値)

冷蔵庫にある食材+特売品で、献立が出来上がる

◎価値と関係のあるシーン

スーパーに行き、冷蔵庫の中身を思い出しながら、特売品を中心に購入する
主菜 + 副菜 + 汁物 + ごはん とバランスのいい食卓を心がけている
(冷蔵庫にある食材とは？
→スーパーに行って安いからとりあえず買ったもの
→使い切らずに余っている食材)

行動シナリオ

価値と関連のあるシーン
行動ストーリー
発生するタスク

💡価値シナリオで膨らました、価値と関連のあるシーンを元に、行動ストーリーと発生するタスクを考えます。

◎行動ストーリ

仕事が終わり、スーパーに行く。冷蔵庫の中身を思い出しながら、こんな献立にしようかなと考える。忙しく、料理のことをインプットできていないので、同じようなメニューばかり思いついてしまう。さらに、特売品をうまく活用できていないことも多かった。

しかし、このアプリを使ってみたら、冷蔵庫の中身を覚えてくれるので、わざわざメモしたり覚えておく必要がなくなった。冷蔵庫の奥にずっと野菜が眠っていることがなくなった。特売品を登録することができるので、節約にもなった。

◎アプリ上で発生するタスク

ログイン(検索してレシピを閲覧以外をする場合)
ユーザー設定
- 家族の人数
レシピ検索(主菜/副菜/汁物それぞれ)
本日の特売品登録
冷蔵庫に残っているものの登録

操作シナリオ

発生するタスク
操作モデル

💡行動シナリオで考えた、発生タスクを元に、操作モデルを考えます。

◎操作モデル(今回は、検索画面がお題なので、主に検索機能のみ詳細に考えてみました。)

冷蔵庫の中身を登録する
---
レシピの検索
主菜+副菜+汁物のレシピを選択していく→選択で作ったことになる
主菜を選択したら、副菜選択時に主菜×人数分が冷蔵庫の中身から減る
冷蔵庫の中身だけでつくれるレシピを一番上に表示
(特売品を登録してある場合 or ここで登録する)
続いて特売品も使ったレシピを表示
それぞれの中は時間順に並んだレシピが表示される
おすすめ 旬のレシピを表示？
タグが付いている(お弁当ok、旬、ヘルシー、がっつり、など)
だいたい何分で作れるか書いてある
2週間以内に作ったことのあるレシピは排除できる機能

2. コンテンツ分類軸の設計

シナリオを元にする視点で考える

ユーザーがレシピを探すときに必要な情報

- レシピタイトル
- 食材
- かかる時間
- ◯日以内に作ったかどうか

コンテンツが持っている属性を元にする視点で考える

レシピの持つ、属性を洗い出す

- レシピタイトル
- 食材
- かかる時間
- カロリー
- 作り方
- (下準備)
- ポイント・コツ

3. UIモデルを設計

UI Flowsの作成

オブジェクト：ユーザーがみるもの

- レシピ
- 食材
- 食材名
- 残り数

アクション：ユーザーがすること

レシピの検索
レシピの選択
食材の登録
食材の編集・削除

💡画面名も一緒に書いてますが、まずUIフロー図を書いてから、その中身をどの画面に置くかの2ステップで考えるといいと思います。(あまりうまくUIフロー図に落とし込めませんでしたが、、、)

4. レイアウトとインタラクションの設計

今回はお題は、検索画面のみなので、UIフロー図真ん中のレシピ選択画面のプロトタイプ作成とデザインをやりました。

▼完成した画面

▼感想

どこからレシピを持ってくるの？ってとこが抜けていることにタグ作成時に気づいたのですが、今回は、本にある手順で設計をトライして見ることが目的でしたので一旦目をつぶりました。🤣

かつ、その辺はこのプロセスの外側(構造より前の段階の要件や戦略)部分にあるので気づかなかったのかな？とも思いました。

もっと他にも抜けてそう。(というか改めて見たらいろいろ抜けてますね。)今回お題は、検索画面の1画面だけでしたが、実際のサービスだと、1機能がもっと複雑で、UIフロー図ももっとステップがあるので、情報設計はめちゃくちゃ重要です。

情報設計を意識しながらDailyCocodaをする場合は、

・全体を書かずに、お題のところのみ書く
・UIフロー図もこんなに詳細いらない

などもっと短い時間で仕上げる工夫がいると思いました。

シナリオからタスクをさらっと書いたら、UIモデルを設計し、そのあとは手書きでワイヤー書いて抜けてるとこ探しながらレイアウト作成
→UIデザイン

がよさそうかな？ 次回やってみます。

cocodaの他のコンテンツ、「依頼」の方は1サービス作成なので、もっとこの方法が生きてきそうです。

わたしは手を動かす目的でDailyCocodaをしているので、情報設計の重要性はわかっていても、
今回実際のUIデザイン作成以外にめっちゃ時間がかかってしまってしんどかったです。w