飲食店の発注管理アプリ ~デザイン編~
こちらの記事は前回投稿した、飲食店の発注管理アプリのデザイン編です。
上記の記事から少し抜粋します。
ユーザーを理解する
- アプリをどこで使う？
- キッチン
- 車
- 店内
どんなシーンで使う？アプリを使用するまでの流れ
-
値段設定する時
1.「今回仕入れた肉っていくらだっけ？」
2.履歴を確認
3.最近注文した履歴から日付かカテゴリ、業者から確認
4.注文した履歴を見つけたら、詳細確認。
5.仕入れた肉の値段が確認できる。 -
発注する時
1.「在庫確認しよう」
2.店舗からの注文
3.「履歴から確認するか」
4.履歴内容を見る
5.「履歴の内容を少し変更して発注しよう」
6.編集画面
7.発注項目確認
8.「卵見てみるか」
9.卵は3パックどのくらい必要だろう？
10.「入力しよう」
11.項目から卵を探す
12.「3パック」
13.「次はチーズ」
14.「2パック」
15.よし完了
16.確認画面へ進む
17.「発注もれはないかな？」
18.項目確認
19.「よし送信」
20.送信完了
21.「送信できたかな？」
22.発注内容がLINEに届く
23.「大丈夫そう。発注完了！」
デザイン
figmaを使って作成しました。
https://www.figma.com/file/UXNe62E4dZXzV6j7mGGcce/Kitchen-Master?node-id=0%3A1&t=r81tFVudbKx4gJdU-1@figma
意識したこと
- 色
- 料理に関する事なので、食欲をそそる暖色系のオレンジにしました。
- 一つの配色を決めたら、下記のサイトを参考にして、配色を決めました。
https://mycolor.space/
- アイコンを多めにした
- ペルソナがあまりツールを使われない方だったので、直感的にアプリを触れるようにアイコンを多めにしました。
- ペルソナがあまりツールを使われない方だったので、直感的にアプリを触れるようにアイコンを多めにしました。
- 発注するのは主にスマホからなので、スマホ用は横長に機能をできるだけ追加しないようにしました。
参考にした記事
SESの方のデザインの考え方と、デザイナーのデザインの考え方が全然違ったので、面白かったですw
デザイナーの方のデザインの考え方を参考にしました。
配色参考記事
figma参考記事
モバイルオーダー参考記事
終わりに
React.jsでフロントエンドを作成するため、Atomic Designの考えを持ってデザインしていけば良かったとデザイン考えた後に思いました。なのでフロントエンド実装する前に、少し修正しようと思います。
また、今回初めてfigmaなどのツールを使って、デザインをしてみましたが、どのように相手が使いやすくできるかを考えるときに没頭でき、楽しかったので引き続きデザインに対してのアンテナも張っていこうと思います。
次はフロントエンドの記事を投稿します！
(ER図はバックエンドの記事と一緒に投稿します。)
Discussion