[SCJP] GDSC Senshu UI/UX workshop

Transcript

1. UI/UX ワークショップ ２０２３年１０月２８日　１９：００〜２２：００
2. Solution Challenge Japan 参加登録締め切り：１０月３１日　(火） 最終発表会：１２月３日（日）
3. 山口苑惠 平山優花 本日のスピーカー 伊東良太朗
4. 19:00~　オープニング・Solution Challenge JPとは？ 19:05~　プロダクト開発におけるUI/UXデザインの役割 19:55~　休憩 20:00~　グループワーク前半：簡単なUIを模写してみよう！ 20:30~　グループワーク後半：チームでオリジナルのUI画面をつくってみよう！ 21:00~ 休憩 21:00~ グループワーク続き 21:30~ 発表 21:45~ まとめ・アンケート 21:55~ クロージング・写真撮影 タイムテーブル
5. このWSでのルール
6. 02 レクチャー 「プロダクト開発におけるUI/UXデザインの役割」
7. UI/UXとは？ アプリ開発においてのUI/UXの役割 実際に体験してみよう！ ユーザーに寄り添ったUI/UXを心がけるために 01 02 03 04 レクチャー内容
8. 01 UI/UXとは？
9. UI (User Interface) : ユーザーが操作するWebサイトやアプリケーションの視覚的な要素 例：ボタン、メニュー、レイアウトなど UX (User Experience)： Webサイトやアプリケーションとの相互作用においてユーザーが得られる全 体的な体験、体験価値 例：使いやすさ、効率性、満足度 UIとUX、両者の違い
10. UIは手段、UXは体験 共通の目的はユーザーフレンド リーなシステム UIを工夫することで、UXが　 向上する UIとUX、両者の違い
11. 　左：東芝のテレビリモコン 　右：AmazonのFire stick どちらのリモコンが使いやすいでしょうか？ 良いUIの基準とは
12. 　左：東芝のテレビリモコン 　右：AmazonのFire stick 60代の方がテレビの音量を調節する場合、 どちらのリモコンが使いやすいでしょう か？ 良いUIの基準とは
13. 良いUIの基準とは 利用者にとってのわかりやすさ 使用方法が簡単にイメージできるか デザインのシンプルさ・かっこよさ
14. 02 アプリ開発においての UI/UXの役割
15. アプリやWebサイトの継続的な利用につながる ↑ アプリを利用する人の体験価値を固める（UX を向上させる) ↑ 使い勝手の良い UI
16. UI/UXはユーザーのアプリ利用の継続を左右する
17. 03 実際に体験してみよう！
18. User Inyerface：https://userinyerface.com/ プチ・グループワーク：最悪のUIから改善点を探してみよう
19. メールアドレス等（すべて架空のものでOKです）を入力し進めてい ただき、アカウント登録完了画面が表示されたら完了です 一人が画面共有をし、全員で話し合いながら進めてください 特に使いづらかった箇所など、チーム内で自由に話し合ってみて　　 ください！ 進め方について： プチ・グループワーク：最悪のUIから改善点を探してみよう
20. 登録完了画面
25. 04 ユーザーに寄り添った UI/UX作りを心がけるために　　　　
26. ユーザーフレンドリー：直感的な操作でスムーズに目的を達成させる仕組み 例：アイコンの活用、ボタンの位置、カーソルを当てたりクリックした際の色の変化等 直感的に操作しやすいUIを取り入れてみよう
27. ウェブアクセシビリティ（Web Accessibility）： デバイス環境やインターネット接続状況、年齢や身体的障害に関係なく、 すべての人がWebサービスやWebコンテンツを利用できるようにすること ウェブアクセシビリティを意識してみよう 小さな文字が読みにくい人が利用できるよう、文字の 大きさを調節できるようにする 手の震えなどで細かい操作が難しい人が扱いやすい　 よう、ボタンを大きめに設計する 外出先でのアプリ利用時に騒音などで音が聞こえにく いことを考慮し、字幕を利用してコンテンツを楽しめ るように設計する 例:
28. 長岡花火大会のアプリ:　 暗い会場で使うことを想定し、操作画面が暗く設定されている 高齢者や障害の有無など限らず、誰でもサービスを楽しむことができる
29. 情報へのアクセスしやすさ ≠ アプリの使いやすさ 特定のユーザーへの配慮は、他のユーザーにとって使いづらさを　　 感じさせる要因にもなる可能性がある 「誰もが」の対象範囲をどこまで広げるかを調整する ウェブアクセシビリティを意識してみよう
30. UIの正解は１つではない。ユーザーにの求めてるものによって方向性は　 変わる アプリ開発者が考えるユーザーが求めているものと、実際にユーザーの求 めているものが違う場合もある 「誰が」「いつ」といった、アプリを使うシナリオやシチュエーションを 想像する ユーザーテストを行い、フィードバックを得る ユーザーのニーズを正しく把握するために
31. 5分休憩
32. 03 グループワーク
33. 簡単なUIを模写してみよう！
34. チーム表
35. 完成図
36. ブレイクアウトルームに分かれて 自己紹介＋グループ名を決めよう！
37. 完成図
38. 簡単なUIを模写してみよう！ 〜２０：２５
39. チームでオリジナルの機能のUIを１つ つくってみよう！ 〜２１：３０
40. 対象 メイン機能 カレンダーアプリ 地図アプリ 日記アプリ アレルギーを持つ子どもを育てている家族 就活中の大学生 視覚障害を持つ方 スマホをもったばかりの中学生 新規事業を立ち上げたい若手社会人
41. 5分休憩
42. 対象 メイン機能 カレンダーアプリ 地図アプリ 日記アプリ アレルギーを持つ子どもを育てている家族 就活中の大学生 視覚障害を持つ方 スマホをもったばかりの中学生 新規事業を立ち上げたい若手社会人
43. 04 発表
44. 05 まとめ
45. 身の回りに溢れているデザインから見つけてみよう！
46. 商品一覧ページの状態で、１つの商品に関する 複数の画像を閲覧できる 商品の一覧ページと詳細ページを行き来する　 頻度が減り、ストレスを感じにくい 最近印象に残ったUI： ZARAのオンラインショップページ 身の回りに溢れているデザインから見つけてみよう！
47. アプリの使用中に、使いやすい・使いづらいと感じたら　　　　 なぜそう思ったのか考えてみよう 印象に残ったUIデザインを参考にし、アプリ開発の際に　　　　 取り入れてみよう！ 身の回りに溢れているデザインから見つけてみよう！
48. ワークショップ for Solution Challenge JP の開催日程 10/29 (日) 14:00~16:00 / GDSC TMU Flutter ワークショップ （フロントエンド） 参加応募方法：RSVP (イベントページ) 10/29 (日) 19:00~22:00 / GDSC Keio Firebase ワークショップ（バックエンド） 参加応募方法：Google Form (https://forms.gle/hQnAsrz26FLR4WZs6) その他詳細：GDSC Slack コミュニティ #general
49. 写真撮影
50. ご参加いただき ありがとうございました！
51. アンケートにご協力 お願いします！ https://forms.gle/KibkvXpC6spkKDoA8