Daily UI　新感覚のお天気App 　を分析からUIデザインしてみた

おはようございます。ダイゼン（@daizennnn）です。

Daily UIとは？
毎日出されるお題に従ってUIデザインを作っていくというチャレンジ企画のこと。
Cocoda!さんが出されているDaily Cocoda!と英語版サイトのDaily UIが有名。
さて、50日間の怒涛のDaily UIチャレンジを終え、今総復習を兼ねて、最初からデザインをやり直しています。

Cocoda!さんで提供されているDaily UIチャレンジ。2周目の5日目を記録していきます。

ちなみに１週目に制作した時のまとめはこちらです。

今回のお題は「毎日開きたくなるお天気App」

制作までの手順

課題に対してのペルソナ 作り（欲求と課題を作る）
↓
ターゲットのキーワードを抽出
↓
ターゲットが解決したいジョブを考察
↓
使用されているシーンを想像
↓
実際にこのターゲットが既存サービスを使うときの課題を考察し仮説を立てる
↓
立てた仮説を検証（関連記事など、実際に検索として、またはニーズを体現するサービスや製品として存在するか）
↓
既存アプリの調査を行う
↓
既存アプリの市場マップを作る（どこのポジションを取りたいかを考察）
↓
一番類似しているアプリのトレースを行う（分析含め）
↓
上記を踏まえて、解決策を考える
↓
アイコンとロゴ下書き
↓
Illustratorで具現化
↓
完成

コンセプトとペルソナ 

身近でお天気の悩みを考えた時に、真っ先に自分の住んでいるメキシコを思い浮かべました。突然夕立が降ったり、雨量が激しい時もあったり、とにかく読めない。

同じ悩みを持っている人は必ずいると思ったので、Cocoda!のお題に近づけて、ターゲットを高校生の男の子に設定し、どういうシチュエーションで「お天気」に触れるのか、どういう悩みがあるのかを高校生の視点に立って考えてみました。（本当であれば実際に聞き込みをしてみたかった）

このDavid君のお悩みは
・雨が突然降ることで、フットサルの練習がキャンセルになったり、彼女とのデートの約束が台無しになってしまう
・突然雨に降られ、立ち往生することがある
・忙しい高校生なので、せっかくの休日が雨でもそれなりに楽しみたい

David君のお悩みが解決できるようなアプリを考えてみましょう。

競合調査と類似サービスのUIトレース

まずカテゴリーとして
・天気だけに特化したアプリ
・天気に関連した複合型アプリ
・情報量がある
・情報がシンプル
というふうに分けてみました。

上記記載のアプリは全てダウンロードして、使った感じも試してみました。
（位置情報が大事なアプリなので、日本のアプリはダウンロードできても、エラーですぐに落ちてしまいました。そのため、今回調査対象にはほとんど入れていません）

上の図の既存サービスのポジショニングマップから作りたいアプリの方向性を考えます。
｜ポジショニング
花粉量まで示しているかなり詳細なアプリは世界的にも、「Yahoo! Wheather」「 AccuWeaather」「Wheather Live」が強く、お天気専門で情報量で勝つことは厳しいので、ここは狙いません。

｜参入障壁
これを高くして参入を防ぐには、独自の情報を提供する、ということが鍵かなと思いました。日本製の「天気アラーム」「洗濯＆天気」は情報量がかなり少なく、その分見やすさとそれぞれの機能に合わせて必要な情報のみが表示されます。

CLIMAのポジショニング
上記の分析から、「情報量が多い」「天気以外の関連」情報に特化していきます。
ペルソナ の課題が雨が降ってしまうことではなく、David君の「予定が台無しになってしまう」ということ。
そのため「天気」×「予定」にフォーカスして設定していきます。

その前に既存アプリのトレーシングをして、デザイン面、機能面、情報設計を研究していきます。

ベーシックなお天気アプリのトレースとして「Accu Weather」を選定。良い点と自分が見つけた改善点を書いていきます。

｜良い点
・単純に天気を知りたいニーズを1ページで満たしている
（スクロール前に基本情報が詰まっている）
・色はあまり使用されておらず白ベースで透明度が変わっている程度。お天気によって背景色が変わるため、どの色でもはっきり見えるように工夫がされている。
・導線が単純
・収益ポイントが広告収入と有料課金であるため、メニューには「意見」や「有料版への導入」に関連する項目が多いが、あまり必要に開くことがないメニューだからこそ、大きく主張されている。（設定は位置情報を入力以外はほとんど必要はないはず）
・天気の特性として、日中晩の寒暖差を知りたいニーズは多く存在。平均気温と夜の気温が目立つ箇所に表示されている。
・広告が表示されても特に邪魔にならない配置

｜改善点
・メニュー表示の中で唯一無料ユーザーにとって必要な情報が「設定」であるにも関わらず、中央部に設置されていて埋もれている印象。

あんまり改善点はありませんでした。
お天気アプリという見方だと、ユーザーにとって本当に必要な情報は限られているので、情報量は多いものの、ライトユーザーとヘビーユーザーに対してきちんとわかりやすく届けられています。

課題と解決策

設定した課題はペルソナ の悩みをベースに設定していきました。
David君の悩みは「デートの予定が台無しになってしまう」こと。

同じような悩みを抱えている人はいないか、検証してみました。
上記参考URLから調査をしました。

55％が雨で予定がキャンセルになっても良いと答えた人
45％がキャンセルは嫌だ、という人。

半分近くが雨だとネガティブになってしまう、雨は雨なりの予定を考えなくてはならないのが億劫と考えている人が45％も存在します。（David君と同じ）

「予定が台無しになってしまうのが嫌だ」
↓
半数近くが予定のキャンセルは嫌だ、と回答。
雨天時で遊べる〜といったまとめサイトが存在するため、キャンセルせずに、むしろ、雨なりの楽しみ方を模索する人がいる

CLIMAが提示したい解決方法は「お天気アプリだけど、どんなお天気でも臨機応変に楽しむことができるを教えるアプリ」であること。

アプリの特徴

今回はロゴだけの制作ですが、コンセプトができていないとロゴなんて無理だ！と思い立ってしまったので、しっかりとターゲットとコンセプトも作り上げています。

CLIMAの特徴は以下。

①雨中心で考えたときの行動がわかる　
「雨中心」と書いていますが、天候中心で私たちの行動が決められないもの、と考えています。
主人公は誰なのか、「人間」です。
天候は操作できませんが、天候によってできることが異なることから「予定」を操作することをメインの特徴にしました。
雨天でも遊べる場所が地域別に表示されたら、突然の雨でも行き先がある程度提案されているので、困ることやキャンセルする必要がなくなります。

②雨が降ったときの新しい発見となる
プラスの価値として、「雨が降る」＝ネガティブ　な感情になってしまいがちであるため、アプリをみることで「新しい発見」がある、ということをコンセプトに設定しました。

最後にアイコンとロゴの意味について。

中身は書いてある通りです。

１周目と２周目の比較

大きくデザインを変えました。改善した点としては以下：
・ロゴの意味づけ
・使う動機を明確化

｜ロゴの意味付け
1周目は気に入ったフォントをベースにイラストをつけて制作しただけのものでした。
というのもそもそもコンセプトを大きく変えたからです。
1周目では「お天気アプリ」としての役割が大きく、ターゲットも大きく絞り小中学生メインです。親しみやすいアイコン・キャラクターにすることで、愛着を沸かせることをベースにしていました。（参考にしたサイトの中にしいたけ占いがあるほど）

2周目では上記に書いた通り、コンセプトを決めて、ターゲットを大きく変えています。

｜使う動機を明確化
使う動機は1周目と2周目で大きく異なります。

1周目：お天気の確認。CLIMAちゃん（仮）がお天気を教えてくれる。
2周目：天候に合わせたスポット確認。

そもそも2周目はお天気アプリではありませんね。

２周目の反省点

アイコンしか作成していませんが、振り返ってみて改善点を洗い出してみます。

｜コンセプトとアイコンが中途半端
アイコンだけ見ると、完全にお天気アプリです。
アプリ機能がお天気に加え、予定を提案をしてくれるので、「予定」の部分が完全にアイコンから読み取ることができません。

一眼で何を伝えたいのか、それがわかるグラフィックを作ることが今後の課題です。

｜ペルソナ の完全なる架空人物化
言い方かっこいいですが（笑）、失敗したのが、ターゲットがメキシコ人であり、課題を設定したのは、日本の情報をベースにしたこと。
架空すぎると、誰にも響かないサービスになってしまいますので。

日本のマーケットでは〇〇という仮説だけど、メキシコで通じるかはノットイコールです。

これの対策としては
ターゲットを設定した上で対象となる人物の所属する市場調査→調査からターゲットが抱えている課題の仮説を立てる→課題を検証する

の順番でペルソナ 設定を行なっていきます。（〇〇の方がいいよ！などご意見があれば教えていただきたいです。）

以上、5日目でした！

過去の作品はこちらからどうぞ！

UIUXデザイン勉強アカウントを作りました！723_uiuxdesignで！