前回のあらすじ
今回は実際アプリユーザー側からどういうふうに見えるか、
かっこいい言葉で言うとUI（ユーザーインターフェース）の
イメージとその画面遷移図を作っていきます。
さあ、作るぞ
Figmaを使っていくよ
画面遷移図はFigmaを使用して作成していきます。
⭐️Figmaの特徴
1️⃣ブラウザ・アプリで動くよ！
2️⃣UI（ユーザーインターフェース）を作れるよ！
3️⃣雛形があるかららくらく🥳 自動サイズ調整（オートレイアウト）
で簡単にクオリティの高いUIを作れる
4️⃣プレビュー機能で作ったUIの動きや操作をチェックできる
5️⃣仕様共有・レビュー・実装確認まで一貫して使えるのが大きなメリット
どんな画面がいいかなあ?
ペルソナが自分と同じ３０代近辺なので
できるだけその層が『懐かしー！！』と思ってもらえそうな
画面にしたいなと思います。
個人的それっぽいデザイン
スーファミ、プレステ、ゲームボーイあたりのゲームのUI
メニュー画面
かつみんな慣れ親しんでいる系
となるとやはり候補は
ドラクエ、FF、⭕️ケモンになってきそう。
## 選ばれたのは⭕️F5と7のUIでした
真ん中のピンクのゲージ こだわりポイントです。
わかる方はきっとにやっとするやつです。
ロゴデザインは仮です
とりあえず候補をめちゃくちゃ出して、書いてみて、比較してみて、
いったんですが
『PressStart 2P』というフォントのレギュラーにしました。
SFC時代、アーケードゲーム風でめちゃくちゃきゃわいい。
完成系
ちょっと見ずらいと思いますが、
トップページ
ログイン画面
新規登録画面
メイン画面（年表表示）
ゲーム登録画面
マイページ機能（表示）
マイページ機能（編集）
を作りました。
その後にリレーション（関係性）の設定をします。
矢印みたいなやつ。ここ押したらここいくよー的なのです🥳
最後に実装漏れがないか確認して完成です。
まとめ
Figmaには画面遷移図を簡単に作れる仕組みがしっかり
組み込まれている
ユーザーに優しい設計で使いやすいね
画面遷移図めちゃくちゃ楽しい。