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

Pocket
LINEで送る

デザインテーマ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」専用サイトもあります!

2 Comments

  1. […] わかりやすくシンプルに。それが「GRAPH」です。〜国産天気予報アプリ「SORA」のデザインテーマ「GRAPH」が出来るまで〜 | メタ・ノート […]

  2. […] 先日Windows版も加わり(まだこちらでお知らせできていませんのでまた別の機会に書きます)主要なプラットフォームを全てカバーした、定番のお天気アプリ「そら案内」ですが、Apple Watchの発売に合わせてiOS版のApple Watch対応アップデート(v4.1.0)がリリースされました。 ▼ iTunes App Store: そら案内 既にiPhoneやiPadで「そら案内」をご利用の方は、アップデートして頂くことでApple Watchでもご利用頂けるようになります。 今回のリリースでApple Watch対応として搭載された機能は下記の通りです。 ▼ Glances(グランス) 現在地の天気予報/降水確率/気温に加えて、現在時刻を含む3時間毎の12時間先までの天気、気温の予報の変化を一画面でグラフ表現/表示します。 Apple Watchのどの画面からでも、画面下端から上への指のスワイプですぐに確認することができます。 ▼ Watch App(アプリ本体) 現在地の天気予報/降水確率/気温に加えて、現在時刻を含む3時間毎の24時間先までの天気、気温の予報の変化を二画面を使ってグラフ表現/表示します。 二つの表示は画面を左右にスワイプすることで素早く切り替えすることが可能です。 GlancesとWatch Appの違いは何時間先までの予報を見られるかというところなので、通常使いではGlances、もう少し先まで確認したい時にはWatch Appを起動というように使い分けられます。 Apple Watch対応は、Appleから発表があった昨年からどのようにすればあの小さな画面で“そら案内らしく”便利に使えるかという議論を重ねましたが、シリーズアプリである「SORA」のデザインモード:GRAPHのようなインターフェイスにしてはどうかと提案して、実際にデザインに落とし込んでみると非常にしっくり、これでいきましょうということで開発のGOサインがでました。 このバージョンでは、Apple Watchの主要な機能のひとつである“Notification(通知)”は組み込まれていませんが、非常に重要な機能ですので、実機を入手後に実際に使い込んでみて、どのような通知が理想的なのかを議論しながら、今後のアップデートで提供できれば良いなと思っています。 iPhone 6/6 Plus対応、iOS 8通知ウィジェット対応、そして今回のApple Watch対応と、どんどん進化して便利になる「そら案内」をどうぞよよろしくお願いします。 ▼ そら案内はApp Storeにて無料でダウンロードしてご利用頂けます。 有償の拡張パック(240円 ※本エントリー公開時)をご購入頂くと、以下の機能も追加され、さらに、さらに便利にお使い頂けます。 […]

Comments are Disabled