DailyCocoda!「#9 天気予報アプリ」&「#10地図アプリ」アプリのUIデザインの作成工程と考え

2020年5月8日 22:01

こんにちは、こんばんは。

UIデザインの練習のためにDailyCocoda!をちょこちょこと進めています。今回は「009-天気予報アプリ」と「010-地図アプリ」のUIデザインをしたので、工程と考えを簡単にまとめたいと思います。　

009　天気予報アプリ

ユーザー「20代半ばのビジネスマン」は働き盛りで忙しく、営業マンで外回りに行って外出していると想定。

コンセプトは「出勤前にさっと確認」なので、ボタンをタップなどの操作が必要なく、現在地や登録地点※の天気が分かることを意識。※天気を予報する場所の基準の場所を予め登録しておくことで、家にいながら会社周辺の気温をパッと確認することができるように。

パッとみ見たときに、その日の数時間先の天気と気温が分かるように画面中央に表示させた。天気はアイコンで、気温は数字ではなくグラフで表示することで朝晩などの寒暖の差をさっと確認できる。

グラフの数字の色は、最高気温が温かみのある赤、最低気温は冷たさの感じられる青色。グラフと週間予報に背景色を入れて、現在の天気と気温が表示されている部分と識別させた。

雨のアイコンを見る際は、アイコンだけではなく「降水確率」を見ている！と今振り返って思う。「雨か。時間は？どのくらい？」がパッと見て取れる方が、傘の準備も困らない。（？）

アイコンが少し子供っぽくなったのでビジネスマン風のかっこいい見た目ではなくなってしまった・・・・

ユーザー「スマホを買ってもらった中学生」ということで、親との連絡手段というの理由で買ってもらったものと想定。中学生なのでそこまで行動範囲が広く無いと考え、予め行く場所が一定決まっていると考える。

コンセプト「よく使う道がすぐに確認できる地図アプリ」なので、現在地（出発地）、目的地がワンタップするだけで道案内がされるように考えた。そして、目的地を選択する画面で目的地を追加できる手軽さも加えた。

また、「よく使う道を探す」ことが一番の目的なので、指の届きやすい下に「行き方を調べる」ボタンを配置。（最近のスマホは大きくて右端、左端を気軽にタップはしなさそう・・・とか思ったり。）

地図上の色が多いため、使用カラーは少なくメインの緑みの青に統一した。

GoogleMapなどはお気に入りや予約ができたりと多機能で便利ですが、今回は中学生が目的地を確認するためのものを想定しているので、シンプルに検索機能と道案内のみ。

予めピンで目的地が表示されていて、ピンをタップしたらそこにたどり着くというものの方がよかったのでは・・と思って見たり。

、、、、

そもそも「よく使う道」なら地図見なくてもよくない・・？（コンセプトちょっと考え間違えたかも、と今思った）

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

このデザイン過程のまとめnoteも書き方に迷っていて、どうしたら分かりやすいかな？とか、どうやったらデザインした過程を上手く伝えられるのだろうと・・・今後も模索しながら、色々変えながら発信していきたいと思います。

コメント、スキ　励みになります。ありがとうございます。

明日は、Cocoda#11をやるぞ〜

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