こんにちは、駆け出しwebデザイナー（2年目）のつついです。
Cocoda!も10日目になりました。

だいぶあったかくなってきたので、
デザイナさんでお散歩好きな方がいらっしゃったらお散歩しましょう

今日は初のグラフィック課題です。

お題

天気予報アプリのアイコン

前提

おてんきアプリのサービスを考える時間は無いので、

iOSのネイティブお天気アプリと同機能で

・高校生向け
・毎日確認したくなるような天気予報アプリ
・ポップで楽しい

というCocoda!のお題条件に従ってリデザインしました。

リサーチ

とりあえずホーム画面が埋まるくらいお天気アプリをダウンロードしまくってみました

使用されている要素は
太陽、雲、雨、傘、雷、風、アメダス、しずく、文字、温度計
に集約されています。

今回はiOSのネイティブお天気アプリと同機能なので、
上のようによく使われている一般的な要素で構成するのが良いでしょう。

こちらがデザイン前のiOS純正お天気アプリ。
パスラインもグラデーションも半透明も洗練されていて素晴らしいですね

iPhone や iPod touch の天気 App とアイコンについて
👉https://support.apple.com/ja-jp/HT207492

GoodPatchのオウンドメディアでもアプリアイコンに関する知見がシェアされていたのでチェックしておきました

アプリアイコンを考えれば、デザインを知ることができる！ 初心者のためのアイコンリサーチ
👉https://goodpatch.com/blog/app-icon-design/

AdobeのBehanceに素敵お天気アプリのUIを載せている方がいらっしゃいました。
長い長方形と円とモーションだけで様々な天気を表現されていてすごくかわいいです。

Weather app by Gabriel Nazoa
https://www.behance.net/gallery/22645245/Weather-app

アウトプット

こんな感じになりました。

Before

After

考えたこと

ポップで楽しいことが大好きな高校生は、アプリを開く前から「曇り」とか「雨」とかの心配したくないので、アイコンの要素は太陽だけで行きます。

空の色も少し明るくして、黄色い太陽はまぶしいくらいに輝いて。
炭酸飲料のMATCH的な配色です。

だんだんギャルばっかりの高校生活をだんだん思い出してきました。

また、「毎日確認したくなるような天気予報アプリ」としなくてはならないので、

要素を限りなくシンプル（正円、塗り、グラデーションのみ）にして、飽きが来ないよう意識しました。

アイコンのデザインだけで毎日確認したくなることはないはずなので、せめて邪魔をしないように。
（アイコンだけで毎日確認したくなるようなものをつくれた方は教えてください、、(｡-人-｡) ）

太陽のグラフィックもかなり抽象的ですが、
青バックに黄色という配色と
中央が最も明るいグラデーション（太陽は光源であるため影無し）
でギリわかるくらいにしています。

おしまい

グラフィック課題は初めてでしたが、いざ自分でつくってみようとすると初めて見えてくるところがあったので、とても良い勉強になりました。

クレジット

Mr.フリー素材の大川さん(https://note.mu/ryumagazine)、
今回もありがとうございました。

アニ文字で遊ぶ歌い手のフリー画像（写真） モデル：大川竜弥