![見出し画像](https://assets.st-note.com/production/uploads/images/88540838/rectangle_large_type_2_4d88fe4a7ec93b8b43f57232bef83a5a.png?width=1200)
【BONO】オブジェクト指向UIが学べる「コンテンツ中心のUI設計」シリーズ完遂ログ
BONO「コンテンツ中心のUI設計」シリーズをひと通り完了したのでまとめます。
お題
メンバーと部活の管理アプリ
要件
あらかじめカイさんが要件を用意してくださっています。
![](https://assets.st-note.com/img/1665203097183-Y4QPnPLy4W.png?width=1200)
![](https://assets.st-note.com/img/1665203072045-fQx0mrdaSL.png?width=1200)
まずは動画を見ずにやってみる
▼ FigJamでざっくり仲間分けします。
![](https://assets.st-note.com/img/1665203069692-BWTwcHnnvk.png?width=1200)
▼ どんな流れでアプリを使うか、妄想でユーザフローも書き出します。
今回は社内の部活所属メンバーを想定して、どんなシチュエーションで「削除」や「追加」といったアクションを行うか妄想しました。
![](https://assets.st-note.com/img/1665203491979-d6aMssnWw3.png?width=1200)
▼ 手書きで画面と動線を書きます。
![](https://assets.st-note.com/img/1665203062020-T25rduYLZ2.jpg?width=1200)
▼ ざっくりプロトタイピング
![](https://assets.st-note.com/img/1665204609835-VTcQWfuijq.png?width=1200)
動画で学習
ある程度で見切りをつけて解説動画を観ます。
▼ ノートテイキング(ぼ〜っと見るより自分の言葉でまとめるのが圧倒的におすすめです)
![](https://assets.st-note.com/img/1665203052278-b55MX1tVNX.jpg?width=1200)
▼ よしUIフロー図を追加で作ろう〜
![](https://assets.st-note.com/img/1665205173984-LhL71IPjHn.jpg?width=1200)
リデザイン
▼ UIフロー図を追加で作ります。
![](https://assets.st-note.com/img/1665205384408-j5PeLqi238.png?width=1200)
▼ 画面をリデザインします。
![](https://assets.st-note.com/img/1665205496841-vCNuqZIvx0.png?width=1200)
【リデザイン部分】
・メンバーリストをカードからアンダーバーに変更
←ユーザの意識をメンバー情報に集中させるため
・メンバーリスト詳細に「このメンバーを削除する」リンクを追加
←前の画面に戻って削除する導線をカット
・部活編集画面に「この部活を削除する」リンクを追加
←トップまで戻って削除する導線をカット
・削除の際の左側アイコンをチェックアイコンからマイナスアイコンに変更
←一度に複数削除のシーンは今回あまり考えられないため。
(退職者や退会者などおそらく1人削除のケースが多く考えられるため)
▼ Figma生ファイル
やりたいことできつつ導線がだいぶすっきりしました~
次にやること
10月課題にも指定されている、情報設計を学習できる出張申請アプリシリーズをクリアします!
あとOOUIの本には類似課題がたくさん掲載されています。要件指定のないDailyUIよりこっちを先にやった方が段階的にレベル上げできそう。
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか?