![見出し画像](https://assets.st-note.com/production/uploads/images/99911126/rectangle_large_type_2_5ececd1edb62179ea400b5da251c6d47.png?width=800)
家族で遊べる場所を探すアプリ/オブジェクト指向UIデザインのワークアウトLv.5に挑戦
こんにちは、おそのです。
UI/UXの知識をしっかり身に付け、パワーアップしてデザイナーになる!
ために、UI/UXについてのアウトプットをnoteに書きます。
先日、ワークアウトのレベル4を書きました。
この本は、自分でオブジェクト指向UIを考えるワークアウトがあります。
今回は、そのワークアウトのレベル5にチャレンジしたのでnoteに残します。
ワークアウト(実践)はレベル18まであります。
それでは早速、レベル5:家族で遊べる場所を探すアプリをデザインしていきます。
先見せ👀Figmaで作ったものがこちら
![](https://assets.st-note.com/img/1678458534195-cB1T1rynKF.png?width=800)
![](https://assets.st-note.com/img/1678458686787-GmMl2gfCxS.png?width=800)
本の通り3ステップを踏みます🚗
Step1.オブジェクトの抽出(モデルレイヤー)
Step2.ビューとナビゲーションの検討(インタラクションレイヤー)
Step3.レイアウトパターンの適用(プレゼンテーションレイヤー)
本で答え合わせをしたあと、赤字で修正しています。
Step1.モデルレイヤー
「名詞」とそれらの関係を抽出
![](https://assets.st-note.com/img/1678422129535-QPLZ7I61dM.png?width=800)
「名詞」を汎化、粒度を揃えていきます。
![](https://assets.st-note.com/img/1678422179084-V4e5e8rhIH.png?width=800)
汎化を始めて行くと、レベル5にしてこんな簡単なはずはないと思い、ヒントを見ました。
『公園』はメインオブジェクト確定ですが、
『すべり台(遊具)』という言葉が2つの意味で使われていることを理解し、異なるオブジェクトとして抽出してくださいとありました。
くっっ!
✖️『公園』-『遊具設置場所』
『公園に設置されている遊具』が間違っていました。
インタラクションレイヤーに入る前に修正しています。
「名詞」の関係を繋げて、オブジェクト=目当てを特定します。
![](https://assets.st-note.com/img/1678422251397-invuGgImRc.png?width=800)
メインオブジェクトは『公園』と『公園に設置されている遊具』と『遊具の種類』になりました。
タスクはないけれどプロパティを自分で考える
![](https://assets.st-note.com/img/1678424824900-NYd2NgYxCr.png?width=800)
写真、地図、駐車場の有無、駐輪場の有無、トイレ、赤ちゃんスペース、開園時間など必要かと思いました。
Step2.インタラクションレイヤー
ビューとナビゲーションの検討をします。
![](https://assets.st-note.com/img/1678422305642-FWpBnhS7jP.png?width=800)
ルートナビゲーションは『公園』と『遊具(遊具の種類)』にしました。
『コレクション公園に設置されている遊具』は『シングル公園』に表示させることにします。
『シングル遊具の種類』は『シングル公園』につなげられると思ってしまいました。
今思うと『シングル遊具の種類』に『コレクション公園』を表示させるなら間違いと気づきました。
Step3.プレゼンテーションレイヤー
ワイヤーフレームの検討をします。
googlemap、お出かけアプリ、予約サイトを参考にしています。
![](https://assets.st-note.com/img/1678422411294-kDKaaUzMNi.png?width=800)
![](https://assets.st-note.com/img/1678422356296-sfdm7auAex.png?width=800)
この手描きのラフから、Figmaで画面まで作りました。完成したのがこちらです。
![](https://assets.st-note.com/img/1678458559657-uNTHRcX9Vw.png?width=800)
![](https://assets.st-note.com/img/1678421452191-FmAiZsMS26.png?width=800)
難易度が少しずつ上がっています。
以上、レベル5です。
ワークアウト完了のレベル18まで、地道に進めていきたいと思います。
でわでわ
この記事が気に入ったらサポートをしてみませんか?