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

今回はミニマルなものから遊びごころたっぷりのものまで、幅広いお天気ウィジェットを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をのぞいてみませんか?

  • 朝日新聞社、mixi、リクルートなど人気企業も多数登録
  • 公開中の募集のうち50%以上がリモートOKのお仕事
  • 土日、週1、フルタイムなどさまざまなお仕事が掲載
  • 万一のトラブル時にも無料で賠償責任保険つき
  • マッチング〜面談まで全てWorkship内で完結
  • お仕事成約でお祝い金1万円プレゼント!

登録から案件獲得まで、いっさいお金はかかりません。詳細は以下ページをご覧ください!

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

>法人の方はこちら

Workship CTA

SHARE

RELATED

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