![見出し画像](https://assets.st-note.com/production/uploads/images/91050074/rectangle_large_type_2_901beb581e9add7af46966c5f7ee1a89.png?width=1200)
チームで「Ezolico」をデザインした話⑤
北海道産のジャガイモだけで作ったコロッケは、ホクホクで美味でした。
今回は、「UXの5段階モデル」の骨格段階で行ったことについて説明していきます。
5段階モデル「骨格段階」
![](https://assets.st-note.com/img/1668349671966-UskMNtasx6.png?width=1200)
ここでは大きなゴールを「ユーザーの目に触れる画面の大枠(プロトタイプに近づける)」を作成することとし、以下のことを行いました。
・ワイヤーフレーム作成
ワイヤーフレーム
機能ごとに役割を分担し、それぞれがワイヤーフレームを作成しました。
筆者は「経路検索機能」を担当しました。
ユーザーが経路検索画面をどのように操作し、それぞれの画面がどのような役割をもっているかを考えながら、ワイヤーフレームを制作しました。
以下のようなユーザーと画面の動きを詳細なフローにして考えました。
![](https://assets.st-note.com/img/1668146813793-oGQxeSmexl.png?width=1200)
![](https://assets.st-note.com/img/1668146593753-wjPXujUbh5.png?width=1200)
![](https://assets.st-note.com/img/1668272407205-TmKDyC1Oiz.png?width=1200)
![](https://assets.st-note.com/img/1668150911480-buIiCzsd8D.png?width=1200)
![](https://assets.st-note.com/img/1668151158769-T0Oz3VZrEW.png?width=1200)
参考となる既存サービスを集め、構造、情報設計、ボタン配置などを考えながら、ユーザーにとって使いやすいかつ分かりやすい画面をつくることを意識しました。
次回はワイヤーフレームをもとにUI画面を制作し、プロトタイプを作っていきます。
つづく…
この記事が気に入ったらサポートをしてみませんか?