メタ・ノート

わかりやすくシンプルに。それが「GRAPH」です。〜国産天気予報アプリ「SORA」のデザインテーマ「GRAPH」が出来るまで〜

デザインテーマGRAPH

とにかく

シンプルで直感的な天気アプリにしたい!

そんな思いでGRAPHを作りました。

「今日は昨日より寒い?」「午前中って雨降る?」
朝起きて、着替える時の我が家の会話。
ほぼ毎日のように今日の天気を僕に聞いてくる家族。
僕は気象予報士でもなんでもありません。
ただ、仕事で天気アプリの開発に携わっているだけなのに、まるで「天気情報に詳しい人」みたいな扱い。
「自分で調べたらええがな」
と言いながらも天気アプリを起動して
「今日は昨日より暖かくなるみたい。雨は降らん。以上!」

このように毎日天気情報を見るんですけど表示時間は多分10秒ぐらい。
「昨日より暑いか寒いか、晴れるか降るか、降るならいつ頃か」
天気情報として知りたい内容ってこんなもんです。

これらの情報が、朝の外出時にサクっとチェック出来れば僕的にはじゅうぶん。
なので「GRAPH」のコンセプトは

「とにかくシンプルに。そして直感的に一日の天気の流れが把握できるもの。」

画面内で目線が迷わないように情報を整理して、わかりやすくシンプルに、飽きないデザインを意識しました。

個人的には、湿度、風速、風向き、概況は無くても困らない情報なのであっさりと切り捨てました。
あと、天気マークはカラーの方が好みなので敢えてベタ路線でマークをデザイン。
僕の場合、天気マークは太陽や雲の形状よりも色の方が認識しやすいのでカラーで表示する事は絶対外せない要素でした。
(といいながらも、全ての天気マークに微妙なアニメーションを施すなど、形状も気にしてますけど…)

我が家の会話にもありますように
「昨日と比べてどうなの?」というところが結構気になるポイント。
これをグラフで表示すれば直感的に気温の変化が把握出来るのでグラフを用いる事を即決。
グラフでは、3時間ごとの気温と天気を同時に表現すればわかりやすくなると考えたのですが、シンプルにするにはどうすれば良いか。グラフ上に天気マークを並べると画面がゴチャるので僕的にちょっと違うなぁ、と。

おっと、待てよ。

僕は「天気マークは形状よりも色で認識」するためドットに色が付くだけでじゅうぶんじゃないか!

と言う訳で、グラフ上のドットの色を変えて天気を表すという単純な方法で画面もシンプルになりスッキリ感も増して一石二鳥。あらやだステキ。
こんな感じで色々考えながらグラフ部分をデザインしている時っ!
ジーっとグラフ上のドットを見つめていると脳内でドットの粒が落ちて来たんですね。

「あ〜、そうかそうか、ここで粒を降らせたら雨(雪)が降る事がひと目でわかりますやん!」

と思いまして、すぐにサンプル動画を作成しフィードテイラーの @itok_twit さんにご相談。

「No problem!」

@itok_twit さんに不可能の文字はありません。すぐに実装して頂きました。(このドットアニメーションは僕のお気に入り機能のひとつです。)

あと、天気アプリとしては「週間予報」も欲しい情報だったので別画面で表示するようにしました。
SORAでは、左右スワイプで地域の切替が出来る事を制作ルールのひとつにしていたので、上下スワイプで今日の天気と週間天気を切替える事にしました。(ちなみに週間天気画面でも左右スワイプで地域切替ができます)
画面下にページコントロール(小さな白いドット)が表示されているにも関わらず、まさかの上下スワイプ。ページコントロールも一緒に持ち上げてしまおう、と。(笑)

週間予報画面でもグラフ表示されますので気温の変化がわかりやすく、週末の予定を決めるときも
「週末の遠足は晴れるぅ!」
「お花見には何を着て行こうかなぁ〜。花見っ、ビールっ!」
と、これからの季節に大活躍間違い無しです。

GRAPHは機能満載、情報てんこ盛りの天気アプリではありませんが、一日の天気や気温の流れが直感的に把握できますので「昨日より寒いか暑いか」「晴か雨か」がサクッとわかれば十分な僕みたいな方には超絶オススメです!

最後になりましたが、開発面で大変お世話になったフィードテイラーの @oishi さんと @itok_twit さん、どうもありがとうございました!

天気予報データ、開発、デザイン、全てが国産の「SORA」。
さあ、アナタも今すぐシンプルで直感的な「GRAPH」の世界へ!

▼ iTunes App Store:
SORA
available on the app store

「SORA」についての詳細はフィードテイラーさんのブログをご覧ください。
デザインにこだわった天気予報アプリ「SORA」をリリースします | 関西/大阪のiPhone・iPadアプリ開発 feedtailor Inc. 社長ブログ

弊社代表 @kasydmk 作のデザインテーマ「gradient」についてはこちらのブログをご覧ください。
デザインとシンプルさを重視した国産天気予報アプリ「SORA」をリリースしました

「SORA」専用サイトもあります!