お天気ウィジェットを作れるCSS/JSコードスニペット7選

生活が多様化する現代においても、天気は非常に多くの人の生活に影響をおよぼします。朝起きたらアプリで天気を調べることが習慣になっている人も多いのではないでしょうか。

今回はミニマルなものから遊びごころたっぷりのものまで、幅広いお天気ウィジェットを7つご紹介します。

（すべてCodePen内で公開されているものです。CodePenの詳細はこちら）

1. カード外に飛び出すアニメーション

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

カード型UIを使ったお天気ウィジェット。天気に応じて、カード内の景色が変化します。

このスニペットの特徴は、シンプルなカードを使いつつ、アニメーションでアクセントをつけているところ。雨、雪、太陽などを表すアニメーションがカードいきいきと動いています。

アニメーションの一部がカード外に飛び出しているのもおしゃれですね。

2. シンプルイズベスト

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

シンプルでありながら、丸みをおびたデザインが美しいスニペット。

ハイコントラストで可読性が高く、ホバー効果も目をひきます。

3. 抽象化したアイコン

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

典型的なお天気ウィジェットとは異なる、大胆なCSS3のアイコンたち。シンプルなアニメーションが抽象的なアイコンにアクセントを加えています。

このスニペットではアイコンが大きめですが、小さいサイズでもじゅうぶん見栄えするはず。

4. SVGアイコン

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

直感的なアニメーションがついた、シャープなSVGアイコン。ベクターなので、任意のサイズに拡大縮小できる点が大きな魅力です。

どんな天気予報アプリでも活躍してくれそうですね。

5. 位置情報を活用

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

位置情報検出して、Webサイトの訪問者へ現在地の天気を教えてくれるコードスニペット。

Googleマップを背景にしたデザインに、安心感がありますね。

6. ゆらゆらと揺れる波

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

位置情報、カード型UI、シンプルなアニメーションなど、本記事で紹介したいくつかの要素がうまく組み合わせられている、ミニマルな天気ウィジェットです。

あっと驚くような要素はありませんが、毎日チェックするお天気アプリにぴったりの、控えめで美しいデザインです。

7. マリオ天気予報

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

正確性はさておき、遊び心たっぷりなのがこちらのコードスニペット。太陽のキャラクターで、なつかしい（そして恐ろしい）思い出がよみがえった人もいるのでは？

APIに接続すれば、正確な天気情報も取得できます。

おわりに

Webサイトに天気予報を表示すること自体は、技術的にはそれほど難しくありません。真の課題は、目立ちすぎず、かつ注目も集めるお天気UIをデザインすることです。

今回ご紹介したスニペットは、（マリオ以外）上記の条件を満たしたユニークなデザインばかり。とくにさりげないアニメーションの使いかたが現代的ですね。

ぜひ本記事を参考に、オリジナルのお天気ウィジェットを作ってみてください。

（執筆：ERIC KARKOVACK　翻訳：Nakajima Asuka　編集：Sato Mizuki）