【野鳥が好きなUIデザイナーが、野鳥のアプリを考えてみた #03】Weekly Note #17
こんにちは！UIデザイナーの菅野です。
#03となりました 、その名も「ハッ！トリ」。
今回は主要ページのデザインを作成してみたので、ご紹介できたらと思います。
（マガジンにまとめていますので、初回からみていただけるとわかりやすいかと思います。）
目次
１. 画面遷移図の振り返り
２. 主要ページ紹介（前編）
１. 画面遷移図の振り返り
簡単ですが、画面遷移図です。
このアプリにどんな機能がついているか、画面遷移はどうなるのかが確認できます。
２. 主要ページ紹介
さて、早速ですが主要ページの紹介をさせていただきます。
今回は画面遷移図からみて、
① ホーム
② ずかん
③ はっけん
を紹介いたします🙌
①ホーム
ホームでは、「マップ」と「近くに生息している鳥」が表示されます。
＜マップ＞
野鳥を発見した場合は、「はっけん」から登録し、マップに記録として残すことができます。登録すると、その場所に羽マークで印が付き、タップすると野鳥の種類が表示されます。
＜近くに生息している鳥＞
位置情報からどんな鳥が近くにいるか予測され、場所によって表示が入れ替わります。
スワイプで全て表示することが可能です。
下層ページ
① ホーム
② 近くに生息している鳥をスワイプした時のUI
③ 野鳥をタップした際の詳細（実機で見たイメージ）
④ 野鳥をタップした際の詳細（全体のイメージ）
🐥工夫した点
野鳥を探すアプリなので、開いた時にすぐにバードウォッチングできるように意識しました。自分の周りにどんな野鳥がいるかを表示することで、
「普段目の前に現れないだけで、実はこんなに多くの種類の野鳥がいるんだ！」
「みたことないから、見てみたい！」
と、直感的に感じられるUIを目指しました。
②ずかん
・登録した野鳥
・山野の鳥
・水辺の鳥
・種類別
でタブ分けされます。
それぞれのタブのUI
① 登録した野鳥
日付ごとに分けられ、新しい順に表示されます。
② 山野の鳥
主に山野に生息する鳥が表示されます。
③ 水辺の鳥
主に水辺に生息する鳥が表示されます。
④ 種類別
種類別で一覧が表示されます。
🐥工夫した点
自分が登録した野鳥を図鑑に記録していくことができ、コレクションを集めるようなワクワク感を持ってもらいたいと「登録した野鳥」と言う項目を取り入れました。
③はっけん
このページでは、２パターンで野鳥を登録することができます。
＜特徴から野鳥を探す＞
野鳥の種類がわからない場合は、ここから登録します！
① はっけん トップ
② 場所の選択
③ 大きさの選択
④ 色の選択
⑤ 野鳥の選択
4つの段階を踏んで、野鳥を絞り込み検索のようなイメージで見つける・登録することができます。
＜名前から登録する＞
こちらはすでに鳥の種類が分かっている場合に、名前から登録します！
① はっけん トップ
② 名前の入力
③ 野鳥の選択
名前を入力すると候補が出てきて、そのまま登録ができます。
＜登録完了時＞
登録すると、ポップアップでハッ！トリロゴ（アニメーション付き）が表示されます。（※前回の記事参照）
また、登録数が増えるなど良いアクションがあった場合は、バッジがもらえたりと楽しいコンテンツが用意してあります。
🐥工夫した点
野鳥を発見した時、図鑑で調べて確認してから登録するのでは時間がかかってしまいます。発見した時にすぐ条件を入力すれば、即登録ができるように工夫しました。
また、登録完了時などにバッジがもらえるなど、嬉しいコンテンツを作ってみました！
ここまで読んでいただき、ありがとうございました！🦢
主要ページ紹介ですが、これまた長くなってしまいそうなので前編と後編に分けせていただきました！
一旦形にすることが目標でもあるので、スピード重視で進めています。
UIデザインについて（もしくはそれ以前に）突っ込みどころが多いかもしれませんが、暖かく見守っていただけると嬉しいです・・！笑
だんだんと展開できてきたので、今後は実際にアプリを使用しているイメージで動かしてみたり、デザインのフィードバックをcocodaなどでいただいたりと、このハッ！トリを使って勉強できたらと思っています！
次回は、主要ページ紹介（後編）です！
関連記事
この記事が気に入ったらサポートをしてみませんか？