【アプリ模写100本ノック #4】デリッシュキッチンをUX視点で分析してみた
こんにちは、ぶんです！
Webディレクター視点を鍛えるために、
「アプリ模写100本ノック」に挑戦しています。
このシリーズでは、
・実際のアプリを観察
・UI構造の模写
・UX視点での気づきと仮説
を記録しています。
今回は#4回目 「デリッシュキッチン」アプリです。
※本シリーズの進め方はこちら
https://note.com/boonhouse_com/n/nf0221680e8c9
「今回の学び」
・同じアクセントカラーでも優先度によって色に濃淡を付けることで統一感を出しながら情報の優先度をつける。
・見せたいコンテンツによって案内ボタンの位置を考える。必ずしも上に配置しなくても良い。
実戦① ホーム画面
画面の役割:献立決めの情報収集を行いレシピ検索や献立決めの行動のきっかけを得る画面。
📝気づいたこと(30分ワーク中の気づき)
・レシピ動画が自動で再生され始める。
・おすすめ動画→各種メニューボタン→今月・今日のおすすめ動画/特集とコンテンツ量が多い構成（ホーム画面のページがかなりスクロール出来るくらい長い）
・初期画面に収まっている画面内に映るコンテンツはレシピ動画のみでシンプル
🔁観察時点での気づき・考察
・ホーム画面を見るユーザーは目的が定まっていない(作りたい料理が決まっていない)状態のため、動画の自動再生や特集などのコンテンツ量を多くしているのか？(情報提供がメイン？)
・"おすすめを見る"のボタンの配置は通常は動画の上部に位置させるケースが多いが、設計者は動画を最優先と判断しボタンを動画の下部に配置しているのか？
👤ユーザー視点
・レシピが決まっていない、目的が定まっていない状態であれば作りたい料理のきっかけになるコンテンツが多くて、作りたいレシピを見つけられそう。
実戦② みつける画面
画面の役割： カテゴリー・テーマ別からレシピの検索を行う画面。
📝気づいたこと(30分ワーク中の気づき）
・献立決めの順番に合わせて先に決めることが多いおかずが上部に配置されている。
・カテゴリー名の左部は写真アイコンが配置されている。
🔁観察時点での気づき・考察
・見やすさの観点で言うと、カテゴリーをリスト型にするのではなくカード型にした方（コンテンツの幅を大きくする）が見やすそうだが、画面内で全てのカテゴリーを収まるようにすることを優先してリスト型の設計になっているのか？
・クリックするとより詳細なカテゴリーを選択できるようになっており、ユーザーの状態を考慮した設計になっている
👤ユーザー視点
・献立が決まっていない段階では、使いたい食材(お肉・野菜・魚介)など大まかな状態からレシピを検索することができるので探しやすい。
💡改善案
・視認性を高めるために、カテゴリー横のレシピの写真をアイコンに変更する。
実戦③ 献立画面
画面の役割:レシピ検索や献立提案を受けながら1週間の献立決めを行う画面。
📝気づいたこと(30分ワーク中の気づき)
・献立提案をうけるボタンのカラーは、同じ黄色でもメニューバーの献立ボタンのカラーよりもカラーが濃い。
・献立が決まっていない状態では、献立の写真部分はグレーアウトになっており、ネクストアクション(献立提案を受ける)まで記載されている。
・献立が決まると買い物リストボタンもアクティブになる。
・写真のレイアウトもメイン2/3、副菜&汁物で1/3の割合。
🔁観察時点での気づき・考察
・同じアクセントカラー(黄色)でも重要度の高い献立提案をうけるボタンの方が色を濃くして強調されている。(押せる感を出すためのシャドウも付いている)
・献立決めの後に買い物を行うアクションを想定して、買い物リストを確認ボタンが献立メニューコンテンツの下部に配置されている。
👤ユーザー視点
・献立を決めに労力を感じるユーザーは多そうなため、提案をうけれるボタンによる献立決めの補助があることで、献立決め自体のタクスのハードルが下がりそう。
全体まとめ
① 今回見えた設計の特徴
・調理という行為だけでなく、調理に至るまでの情報収集→買い出し・献立決めという一連のタスクまでを網羅したアプリコンテンツになっており、このアプリで調理にまつわる全てを解決できるアプリになっている。
・情報の優先度に合わせてコンテンツの配置な色の濃淡が工夫されており、ユーザー目線での設計が感じられた。
② 自分の気づきの変化
設計者の意図を考えながら分析を行うことで、なぜこの配置にしたのか？なぜこのコンテンツがあるのか？を考えられるようになりました。それにより、なぜこの配置にしたんだろう？という疑問で終わらず、こうなのではないか？という仮説を立てられるようになりました。
③ 次回への視点
設計者側の視点だけに寄りすぎず、でもユーザーからしたらこう思うのではないか？使いやすいのではないか？とユーザー側の視点からの視点も意識しながら、改善点や別のアイデアも考えていけるようにしていきたいです！