お世話になっております。 ご指定の画面のデザインを制作しましたので、ご確認よろしくお願いします。 # 画面デザインについて メインカラーを緑色に設定し、「店員呼出」のように直接注文とは関係のない機能は青色にすることでユーザーが注文というタスクに集中できるようにしています。また、カート画面以降はフッターメニューを非表示にしているため、ユーザーの離脱を防ぐことができます。 デザインは実機で確認しながら行っているため、文字やボタンのサイズなども使いやすいように調整しています。 # 今後のデザイン提案について 現状ですと、このアプリがどんな店舗で使われることが想定されているのか、オーダー以外にどんな機能があるのかなど、不明な部分があります。 例えば、居酒屋のようなお店で使われるアプリでしたら、再注文ができるデザインを検討する必要があります。 もし採用いただけましたら、他社などリサーチを行い、UXの観点から必要な機能を洗い出し、その上で改めてSOTOのブランドに合ったデザインをご提案させていただきたいです。 Webエンジニアの経験もあるため、実装しやすさの観点からもデザインをご提案できると思っています。 どうぞよろしくお願いします。 --- # 各画面のデザインついて ## メニュー画面 ・メニューではカテゴリでソートではなく、全カテゴリを一覧に常に表示させ、カテゴリをタップでそのカテゴリのセクションまで自動でスクロールさせるようなデザインにしています。特に何を頼むのか決めていないお客様が多いと思うので、全て表示させておくことで一覧性を高めています。 ・メニュー画面からでも商品の個数の調整ができるようになっています。 ・追加された商品数は常にカートをみるボタンに表示されています。 ## 商品詳細画面 ・画面全体で表示せず、アクションシートのようなUIで表示させることで、ユーザーが離脱しづらくなっています。 ・1個以上選択された状態で再度その商品がタップされたら、「カートに追加」ボタンは「カートを更新」ボタンに切り替わります。 ## カート画面 ・カートではユーザーに馴染みのある、横スライドで削除できるような機能をつけています。 ## 注文確定画面(決済画面) ・誤操作防止の確認ボタンのスライドは最終確認である注文確定画面に移動させました。確認ボタンは常に画面下に固定させる予定です。 ・スライドのボタンのみ押すボタンでないことを伝えるためにボタンの形状を変えています。 ## フッターメニュー ・アプリ全体でアイコンのトンマナを統一させるため、塗りではなく丸みを帯びた線のアイコンを用いています。
メンバーからのコメント
お世話になっております。
ご指定の画面のデザインを制作しましたので、ご確認よろしくお願いします。
# 画面デザインについて
メインカラーを緑色に設定し、「店員呼出」のように直接注文とは関係のない機能は青色にすることでユーザーが注文というタスクに集中できるようにしています。また、カート画面以降はフッターメニューを非表示にしているため、ユーザーの離脱を防ぐことができます。
デザインは実機で確認しながら行っているため、文字やボタンのサイズなども使いやすいように調整しています。
# 今後のデザイン提案について
現状ですと、このアプリがどんな店舗で使われることが想定されているのか、オーダー以外にどんな機能があるのかなど、不明な部分があります。
例えば、居酒屋のようなお店で使われるアプリでしたら、再注文ができるデザインを検討する必要があります。
もし採用いただけましたら、他社などリサーチを行い、UXの観点から必要な機能を洗い出し、その上で改めてSOTOのブランドに合ったデザインをご提案させていただきたいです。
Webエンジニアの経験もあるため、実装しやすさの観点からもデザインをご提案できると思っています。
どうぞよろしくお願いします。
---
# 各画面のデザインついて
## メニュー画面
・メニューではカテゴリでソートではなく、全カテゴリを一覧に常に表示させ、カテゴリをタップでそのカテゴリのセクションまで自動でスクロールさせるようなデザインにしています。特に何を頼むのか決めていないお客様が多いと思うので、全て表示させておくことで一覧性を高めています。
・メニュー画面からでも商品の個数の調整ができるようになっています。
・追加された商品数は常にカートをみるボタンに表示されています。
## 商品詳細画面
・画面全体で表示せず、アクションシートのようなUIで表示させることで、ユーザーが離脱しづらくなっています。
・1個以上選択された状態で再度その商品がタップされたら、「カートに追加」ボタンは「カートを更新」ボタンに切り替わります。
## カート画面
・カートではユーザーに馴染みのある、横スライドで削除できるような機能をつけています。
## 注文確定画面(決済画面)
・誤操作防止の確認ボタンのスライドは最終確認である注文確定画面に移動させました。確認ボタンは常に画面下に固定させる予定です。
・スライドのボタンのみ押すボタンでないことを伝えるためにボタンの形状を変えています。
## フッターメニュー
・アプリ全体でアイコンのトンマナを統一させるため、塗りではなく丸みを帯びた線のアイコンを用いています。