天気アプリのデザイン:ホーム画面のリデザイン、ビフォーアフター

天気アプリを開く人は、ひとつの疑問の答えを探しています。いま外はどんな様子で、このあとどうなるのか。以下の初稿はその答えを出したうえで、さらに続けます。予報が返すものを全部見せているからです。完全な地名、秒単位のタイムスタンプ、9pxの9枚のタイル、そして10日分のカラフルなアイコン。修正版は同じデータを使いながら、ホーム画面が何のためにあるのかを決めます。

画面全体のビフォーアフター

初心者の初稿

修正版

左側では、最初のカードに地名、タイムスタンプ、単位切り替え、気温、天気、さらに4つの情報が小さな1行に詰め込まれています。その下には小さな文字の白いボックスが3つ。右側では、画面の上部に置かれているのは3つだけです。都市、数字、そして空模様。その下はすべて同じ青の上のカードです。

右側のカードはすべて同じ左端20pxから始まり、天気アイコン(白い雲の後ろの黄色い太陽)は最初のブロックの右側、数字の反対側に置かれています。

修正1:都市名と大きな数字ひとつ

Before

After

州と国まで入った地名、タイムスタンプ、切り替え、小さな情報の行。それに対して、都市名、大きな数字、空模様、その日の気温幅。

初稿の最初のカードは、予報データの入力フォームのようです。「New York, NY, United States」は、本人がすでにいると知っている場所に3つも名前を付けています。「Updated 10/24/2026 09:41:12」は秒まで正確ですが、本人には役に立ちません。タイムスタンプを見て着る服を決める人はいません。単位切り替えは、最も重要なカードの隅に居座っています。

修正版は「New York」と「72°」だけにして、数字を84pxにしました。画面で一番大きい要素です。それが問いへの答えだからです。次に言葉で空模様「Partly cloudy」、続いてその日の幅「H 75° L 61°」。体感気温と降水確率はこのブロックから外れました。体感気温は下の詳細に移り、専用のカードを持ちます。

再利用できるルール:ホーム画面の上部は、ひとつの答えのためにあります。人が二番目に確認するデータは、一段下に置きましょう。

修正2:6時間、カード1枚、読めるゆとり

Before

After

枠線付きの帯に並ぶ8本の細い列と、わかりやすい言葉のタイトルが付いた6本の広い列。

初稿は8時間を1行に押し込むので、どの列も細く、文字は小さくなっています。修正版は6つを見せます。Now、10 am、11 am、12 pm、1 pm、2 pm。列が2つ減った分、各時間のアイコンも数字も大きくなりました。

カードのタイトルはラベルから文章に変わりました。「Sunny spells until 3 pm」。6列が全体として何を意味するのかを伝えるので、天気が変わる時刻を探してアイコンを1つずつ目で追う必要がありません。

再利用できるルール:データの行には、そこから何を読み取るべきかを伝える見出しを付けましょう。

修正3:4つの詳細、それぞれに大きな数字

Before

After

白いカードに並ぶ9枚の小さなタイルと、数字を大きな文字で見せる4枚の大きなカード。

9pxの9枚のタイルは、すべての詳細を同列に扱っており、どれもひと目では読めません。気圧、露点、視程は確かに本物のデータですが、修正版が最優先に置くものではありません。

修正版が残すのは4つ。体感気温、湿度、風、UV指数です。それぞれにカード、アイコン、小さなラベル、そして初稿よりはるかに大きな数字を与えました。「6 High」や「8 mph NW」は腕の長さ離れても読めます。残りの6つ、気圧、視程、露点、日の出、日の入り、大気質は、このホーム画面にはありません。

本格的な天気アプリには、それらの置き場所が詳細画面などとして必要ですが、このリデザインではそこまで描いていません。

これは正直なトレードオフです。ホーム画面は速く読めるようになり、残りのデータには別の居場所が必要になります。

修正4:3日間と、日ごとの幅を示すバー

Before

After

降水確率と最高・最低気温をテキストで並べた10行と、日ごとの幅をバーで示した3行。

「75° / 61°」が10行並ぶと、読み手は頭の中で10個の計算を比べなければなりません。一番暖かい日はいつか。どこから寒くなるのか。答えは数字の中にありますが、目で掘り出す必要があります。

比較はバーが代わりにやります。各日の最低と最高は、50°から78°までの共通のスケール上に置かれるので、バーが長いほど、あるいは右にあるほど、暖かい日や幅の広い日だとわかります。色はバーに沿って涼しい青から暖かい黄色へ変わります。降水確率は行から外しました。10月24日の土曜日が「Today」で、続く2日が並びます。

再利用できるルール:問いが「系列同士がどう違うか」なら、比較を描きましょう。

細かな修正

• 左端をひとつに。 初稿は左14px、右12pxで、ブロック同士がそろっていませんでした。修正版はすべてのブロックが20pxの端から始まり、カード間は12pxです。
• より深い青。 空は#1D4ED8から#3B82F6へのグラデーションで、初稿の青を明るい側の端にしました。カードは24%(#1E3A8A)のネイビーのベールの上にあるので、空の上の白い箱ではなく、空の一部として読めます。
• 読める白文字。 初稿の#3B82F6上の9px白文字は、画面で最も弱い組み合わせです。暗いカードの上で文字を大きくして解決しました。
• 本物のタイプスケール。 文字は8〜13pxから、iOSの13〜28ptのサイズになり、最上位に84pxの気温があります。
• タブは5つではなく4つ。 修正版はタブをひとつ減らしました。
• メインカードに単位切り替えなし。 FとCのスイッチは最初のカードから消えました。

自分の天気アプリを監査する

Figmaファイルを手に入れる

無料のファイルには、両方の画面がコンポーネントとして入っており、すべての修正がビフォーアフターのペアで、カラー変数とiOSのテキストスタイルも含まれています。

無料のFigmaファイル

天気ホーム画面、ビフォーアフター

両方の画面と、修正した全パーツをFigmaコンポーネントで。無料、閲覧専用、ドラフトに複製してお使いください。

Figmaで開く

FAQ

天気アプリのホーム画面は、最初に何を見せるべきですか?

都市名と大きな気温ひとつ、それから空模様とその日の最高・最低気温です。それ以外はすべて一段下に置きます。この先の数時間、いくつかの詳細、短い予報です。

天気アプリのホーム画面には、詳細をいくつ表示すべきですか?

ほとんどの人には4つで十分です。体感気温、湿度、風、UV指数。気圧、視程、露点、日の出・日の入りは詳細画面に置きましょう。

天気アプリは時間ごとの予報をどう見せるべきですか?

1枚のカードに6時間ほど、大きなアイコンと数字で、その時間帯が全体として何を意味するかを伝えるタイトル(たとえば「Sunny spells until 3 pm」)を添えます。

アプリで複数日の予報をどう見せますか?

ホーム画面には3日分。それぞれに、共通のスケール上でその日の最低から最高までのバーを付けます。それより長いリストは専用の画面に置きましょう。

天気アプリではどのフォントサイズを使うべきですか?

iOSのテキストサイズなど、プラットフォームのタイプスケールを使い、気温は他のどの要素よりもはるかに大きく保ちます。修正版の画面は13〜28ptで、気温は84pxです。

出典

• 両方の画面は自作で、Figmaで設計・計測しました。場所、気温、日付は演習用の架空のものです。
• コントラストはWCAG 2.2のコントラスト式で確認しました。修正版のすべてのカードで白文字は4.6:1以上、初稿の#3B82F6上の9px白文字は3.7:1です。
• Apple Human Interface Guidelines: Typography。修正版の画面で使ったiOSのテキストサイズの出典です。
• 最初にApp Brainyでカルーセルとして公開しました。