見出し画像

OOUI(オブジェクト指向UIデザイン)の実践を、Airtableを使ってやってみた【その3】

OOUI(オブジェクト指向UIデザイン)の書籍に記載されている演習課題を、Airtableを使ってプロトタイプを作りながらやってみました。

↓他の課題の投稿はこちらです。
(なぜAirtableなのか?といったことは1回目に書いています)

演習課題は全部で20あるのですが、今回は以下の課題です。

レベル3 イベント店舗管理アプリケーション

OOUI(オブジェクト指向UIデザイン)の実践

実際にやったことの流れとツールは以下の通りです。

  1. 書籍に記載されている実践課題から要求一覧を整理(Notion)

  2. オブジェクトの抽出(Notion)

  3. 概念モデル図の作成(Figjam)

  4. ビューの関係図を作成(Figjam)

  5. 3を見ながらプロトタイプを作成(Airtable)

  6. 4,5を見ながら、画面イメージを作成(Figma)

実際にやったこと

↓実際にやったことはこちら、Notionにまとめました。

詳細な流れは以下のとおりです。

メモアプリケーション

1. 書籍に記載されている実践課題から要求一覧を整理(Notion) 〜 2. オブジェクトの抽出(Notion)2. オブジェクトの抽出(Notion)

店にはカテゴリを関連付けたのですが、それだけでは細かい部分まで表現できないので(例えばタイ料理屋なのか韓国料理屋なのか)、店にサブカテゴリのプロパティをもたせました。

3. 概念モデル図の作成(Figjam) 〜 4. ビューの関係図を作成(Figjam)

カテゴリはコレクションビューを、メニューはシングルビューを省略しています。

5. 3を見ながらプロトタイプを作成(Airtable)

店はギャラリービューにすると既視感のある感じになります。

イベントというよりショッピングモールっぽい

6. 4,5を見ながら、画面イメージを作成(Figma)

「マップ」は全会場を俯瞰するものが必要かなと思ったのでルートナビゲーションをを1つ作成しました。
マップのピン?から店へリンクできたらよいのですが、マップはイラスト画像がわかりやすそうなので、リンクはつけられないかなと、、、

店一覧画面
店詳細画面
会場一覧画面
会場詳細画面
マップ
店一覧画面
店詳細画面
会場一覧画面
会場詳細画面
マップ

さいごに

店の数とか、バリエーションによって色々変わってきそうだな〜とやってて思いました。
あとはスマートフォン画面だとスクロールではなくタブにしたほうが良いとかの勘所が難しいです。

UIにとって何がどういう変数なのかとか、うまく整理してまとめるスキルが必要そうです。

この記事が気に入ったらサポートをしてみませんか?