CSSとJSを使った天気予報アプリ・ベスト８

天気は毎日の生活に大きく影響してきます。その為に、ウェブやアプリでの天気予報があります。ユーザーは、いつでも好きなところで天気予報を確認したいのです。

 

UIを使うと、単に天気を知るだけでなく、天気予報をエンターテインメントにする事もできます。色、アニメーション、面白いアイコンを組み合わせて作る事ができます。所々にサプライズを1つか2つ入れると、インパクトのあるものになります。

 

いくつかUIを使った天気予報を紹介します。日がサンサンと降り注いでいる様子を見てみてください。

 

 

Weather Beyond Borders

カード型UIは、天気予報と合います。あなたはまとめるだけです。しかし、これは他と違います。色々な天気のアニメーションが入っています。雨、雪、日差しがカードから飛び出してきます。

See the Pen
Animated Weather Cards by Steve Gardner (@ste-vg)
on CodePen.

 

 

Simply Beautiful

このUIは、簡単な作りになっています。 一般的な丸い形で、読みやすい色の組み合わせになっています。そして、hoverエフェクトも入っていて、注目されるデザインです。

See the Pen
Simple Weather App Design by Colin Espinas (@Call_in)
on CodePen.

 

Abstract Icons

これはCSS3アイコンの一種類です。一般的な weather imageryより目立ちます。簡単なアニメーションになっていて、少し抽象的です。 下の例は、大きいアイコンになっていますが、小さいアイコンに設定する事もできます。場所を取らずに目立つデザインになっています。

See the Pen
Animated Weather Icons(pure CSS) by Akhil Sai Ram (@akhil_001)
on CodePen.

 

 

SVG Movement

これは、シャープなデザインのSVGアイコンで作られています。アニメーションが直感的で目立つ動きをします。しかし、トップ画面からはみ出ません。ベクター形式なので、自動でサイズを調整します。ここが、他のアプリとは大きく違う点です。

See the Pen
some weather icon svgs by Nat (@n-sayenko)
on CodePen.

 

 

Your Local Weather on Demand

地域情報は、必要な情報を見つけるのに最適です。これは、あなたが現在いる場所を特定して、そこの天気を表示します。Google Mapと繋がっています。

See the Pen
Show the Local Weather by Den McHenry (@denmch)
on CodePen.

 

 

Gentle Waves

これは、いくつかの要素が組み合わされています。場所を特定して、カードのような画面に、簡単なアニメーションで表示します。表示は、必要最小限ですが、目立ちます。たくさん情報がありすぎて、見にくいという事がありません。

See the Pen
Weather card by The Coding Aviator (@thecodingaviator)
on CodePen.

 

 

Now and Beyond

これは、あなたが今いる場所を特定して、その場所の深夜から翌日までの天気を表示します。最初に、現在の温度などが表示されます。さらに見ていくと、３時間後の予想が見れます。 video backgroundが入っていて、実際の映像が見れます。

See the Pen
Fluency – CIT261 by Bermon Painter (@bpainter)
on CodePen.

 

 

Here’s Mario With Today’s Weather

この面白いUIの天気予報が正確でなければ、観賞用として楽しめます。イントロダクションなしで始まり、太陽が怒ったような顔をしています。APIで、いつでも本当の天気予報に繋ぐ事ができます。

See the Pen
Super Mario Weather by ErreC (@Errec)
on CodePen.

 

 

ウェブサイトに天気予報を表示させる

ウェブサイトに天気を表示させる事は、難しい技術ではありません。しかし、目を引くUIをデザインする(控えめでありながら) のは、技術がいります。今回紹介したもの(Marioを除いて) は、重要な情報を整理して変わった形で表示します。特に、天気の表示にアニメーションを使うのは効果的です。単純に、静止画より面白いです。

 

もっとUIの天気予報が見たいですか? 傘を持って、CodePen collectionを見てください。