モンスターアカデミア 広告

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

天気ウィジェット
ENGINEER

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

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

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

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

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


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

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

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

2. シンプルイズベスト

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


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

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

3. 抽象化したアイコン

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


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

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

4. SVGアイコン

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


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

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

5. 位置情報を活用

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


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

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

6. ゆらゆらと揺れる波

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


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

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

7. マリオ天気予報

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


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

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

おわりに

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

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

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

(執筆:ERIC KARKOVACK 翻訳:Nakajima Asuka 編集:Sato Mizuki)

※Workship MAGAZINEでは日々情報の更新に努めておりますが、掲載内容は最新のものと異なる可能性があります。当該情報について、その有用性、適合性、完全性、正確性、安全性、合法性、最新性等について、いかなる保証もするものではありません。修正の必要に気づかれた場合は、サイト下の問い合わせ窓口よりお知らせください。

高単価なお仕事でキャリアを広げませんか?

「フリーランスとして、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」
「報酬が低くて疲弊している。もっと稼げるお仕事ないかな……」

フリーランス・複業・副業向けお仕事マッチングサービス『Workship(ワークシップ)が、そんな悩みを解決します!

  • 28,000人以上のフリーランス、パラレルワーカーが登録
  • 朝日新聞社、mixi、リクルートなど人気企業も多数登録
  • 公開中の募集のうち60%以上がリモートOKのお仕事
  • 土日、週1、フルタイムなどさまざまな働き方あり
  • 時給1,500円〜10,000円の高単価案件のみ掲載
  • お仕事成約でお祝い金10,000円プレゼント!

登録から案件獲得まで、利用料は一切かかりません。一度詳細をのぞいてみませんか?

>フリーランス・複業・副業ワーカーの方はこちら

>法人の方はこちら

Workship CTA

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ