当サイトについて
About Weather Icons Studio
auto_awesome コードが「天気」に変わる瞬間。
きっかけは、ある天気予報デジタルサイネージを開発していたときのことです。 「101」「203」……APIから送られてくる無機質な数字の羅列（気象庁コード）の意味がわからず、私は悪戦苦闘していました。
しかし、コードの規則性を理解し、それを Erik Flower 氏の美しい「Weather Icons」と結びつけたとき、 画面上の数字がいきいきとした「空模様」に変わる面白さに気づきました。
このスタジオは、氏のアイコンの美しさを広めるだけでなく、 「コードと天気の対応」を深く学び、正しく伝えるために作りました。 正確な天気情報は、防災意識を高め、誰かの生活を守ることに繋がると信じているからです。
tips_and_updates スタジオの使い方
アイコンを選ぶ
気象庁コードごとに整理された一覧や、検索バー、日本語の「晴れ系」などのカテゴリから、イメージに合うものを探します。
配色を吟味する
スタジオのプリセット（基本・警報・夜間）を使って、実装シーンに最適な色を確認します。
夜間モードを試す
夜間モードをオンにすると、晴れアイコンが「月」に変わるなど、ダークテーマでの見え方をシミュレーションできます。
実装へ
コードをコピーし、あなたのプロダクトへ。正しく、美しい天気表示の完成です。
menu_book 気象庁コード（JMA）の仕組み
日本の気象庁が使用する「天気テロップ番号」の3桁には、それぞれ役割があります。スタジオでは、これらを直感的に扱えるよう配色設計を同期させています。
1. 基本の4系統（百の位）
百の位を見れば、ベースとなる天気がわかります。
2. 変化のタイミング（十の位）の完全解読 ▼
十の位は、天気の「移り変わり」や「特殊な現象」を示す重要なスイッチです。
0〜8までの数字には、それぞれ明確な役割が割り当てられています。
| 十の位 | 意味 / 役割 | 例 (JMA_DEF準拠) |
|---|---|---|
| 0 | 基本（なし・時々・一時） | 100(晴), 101(晴時々曇) |
| 1 | のち（後半に変化） | 110(晴後時々曇), 212(曇のち一時雨) |
| 2 | のち（特定パターン） | 223(曇のち雨 ※地域による) |
| 3 | のち（雨・雪系への変化） | 132(晴のち一時雨) |
| 4 | のち時々（雨・雪） | 240(曇のち時々雨) |
| 5 | のち一時（雨・雪） | 250(曇のち一時雨) |
| 6 | 時々（雨・雪が強まる） | 260(曇時々雪), 361(雪時々止む?) |
| 7 | 時々/一時 + 雷・霧など | 170(晴時々雪、雷を伴う) |
| 8 | のち + 特殊現象 | 181(晴のち雪で雷を伴う) |
3. 変化の魔法（一の位）の完全解読 ▼
一の位は、「変化の種類（時々・一時）」と「変化後の天気（副要素）」の組み合わせです。
| 一の位 | 意味 | 対象 | 例 (JMA_DEF準拠) |
|---|---|---|---|
| 0 | なし | - | 100 快晴 |
| 1 | 時々 | 晴/曇 | 201 曇時々晴 |
| 2 | 一時 | 雨 | 202 曇一時雨 |
| 4 | 時々 | 雨 | 301 雨時々晴 |
| 6 | 時々 | 雪 | 401 雪時々晴 |
| 8 | のち | 雨/雪 | 281 曇後雨 |
lightbulb デザインの幅を広げるコラム
explore 風向アイコン：度数と16方位の使い分け ▼
⚠️ 重要：追加CSSとクラス指定
風向アイコンを表示するには、本体CSSとは別に weather-icons-wind.css の読み込みが必須です。
クラスは wi wi-wind に加え、方向を示すクラス（例：towards-23-deg や wi-towards-n）の計3つを指定します。
360 Wind Degree Examples (度数指定)
APIから「風向：23度」のような数値データが返ってくる場合に最適です。0度から360度まで、1度刻みで精密に表現できます。
Towards (向かう方向)
風が吹き抜けていく「行先」を指定します。0度が上（北）です。
From (吹いてくる方向)
風の「発生源」を指定します。南風なら180度を指定します。
explore Wind Cardinal Examples (16方位指定)
「北」「南南東」といった方位名で管理したい場合に便利です。North(n)を上として、16方位のクラスが用意されています。
| 方位 | Towards (行く先) | From (風上) | Class (Towards例) |
|---|---|---|---|
| 北 (N) | wi-towards-n | ||
| 北北東 (NNE) | wi-towards-nne | ||
| 北東 (NE) | wi-towards-ne | ||
| 東北東 (ENE) | wi-towards-ene | ||
| 東 (E) | wi-towards-e | ||
| 東南東 (ESE) | wi-towards-ese | ||
| 南東 (SE) | wi-towards-se | ||
| 南南東 (SSE) | wi-towards-sse | ||
| 南 (S) | wi-towards-s | ||
| 南南西 (SSW) | wi-towards-ssw | ||
| 南西 (SW) | wi-towards-sw | ||
| 西南西 (WSW) | wi-towards-wsw | ||
| 西 (W) | wi-towards-w | ||
| 西北西 (WNW) | wi-towards-wnw | ||
| 北西 (NW) | wi-towards-nw | ||
| 北北西 (NNW) | wi-towards-nnw |
💡 ポイント：アプリの仕様に合わせて選ぼう
- Towards: 「南に向かって吹く風」を表現（矢印は下を向く）
- From: 「南から吹いてくる風」を表現（矢印は上を向く）
dark_mode 月齢アイコン：28段階の精密なサイクル（異名つき） ▼
Weather Icons の月齢は、new（新月）→ full（満月）→ waning-crescent（欠けていく月）までを
計28段階で表現できます。ここでは、各段階に日本の「月の異名」を割り当てて一覧化しています。
※「異名」は一般的な呼称を基準に、28段階へ当てはめています（地域・時代で揺れがあるため、厳密な暦注ではなく“UI用途の目安”として扱ってください）。
palette 基本の4色の配色設計
天気予報の実装において、色は「直感的理解」を助ける最も重要な要素です。スタジオでは、JMAコードの分類に基づき、視認性と情緒的意味を両立させた配色を採用しています。
晴れ系：#D97F63 (洗朱)
太陽の熱量と「注意喚起」を兼ねた暖色。日本の伝統色である洗朱を採用し、画面上で適度な活気を与えます。
曇り系：#6B7280 (Gray)
ニュートラルで、周囲の情報を邪魔しない色。空が雲で覆われ、光が遮られている状態を落ち着いたグレーで象徴します。
雨系：#3B82F6 (Blue)
水と湿気、転じて視界の悪さを想起させる寒色。降水現象を瞬時に認識させるための、彩度を高めたブルーです。
雪系：#22D3EE (Cyan)
氷の結晶と低温をイメージした明るい水色. 雨のブルーよりも明度を高くすることで、結晶の煌めきと冷たさを表現します。
nights_stay 夜間用の配色設計
ダークモードや夜間表示では、背景色（黒系）に馴染みつつ、情報の可読性を保つ配色が求められます。スタジオの「夜間用」プリセットは以下の設計に基づきます。
快晴 (月明かり / #FFFDE7)
暗闇で最も目に優しいクリーム色。
曇り (星空 / #E0E7FF)
穏やかな夜空を感じさせる薄い青。
雨 (静寂 / #C7D2FE)
しっとりした夜を想起させるインディゴ。
雪 (ホワイト / #FFFFFF)
鮮明なコントラストを保つ基本白。
gpp_maybe 防災情報の配色（UD）
スタジオの「警報」プリセットには、気象庁やデジタル庁が推奨するユニバーサルデザインカラーを採用しています。
特別警報 (#B40068)
命を守る、最も強い紫赤。
警報 / 危険 (#FF2800)
重大な災害、強く警告する赤。
注意報 (#F2E700)
注意喚起、視認性の高い黄色。
auto_awesome 制作の裏側について（AIとの共創）
このツールの設計・実装は、開発者の想いをAIが汲み取り、共に対話を重ねることで実現しました。
デジタルサイネージ開発での実体験に基づいた「コードの面白さ」や「防災への貢献」というコンセプトを、AIの技術によって誰もが学び、使える形へと昇華させた「人間とAIの共同作業」の成果です。
history_edu 出典・参考文献・ライセンス
権利とポリシーについて
1. 再配布について: 当サイトはアイコンファイルそのものを自サーバーで再配布するのではなく、提供元の公式CDN（cdnjs等）を介して表示しています。これは推奨されるライブラリ利用形態の一つです。
2. 著作権の尊重: 使用しているフォントの著作権は制作者・企業に帰属します。当ツールはそれらの利用を容易にするためのインターフェースを提供しており、権利を主張するものではありません。
3. ライセンスの継承: 当サイトから取得したコードをプロジェクトに組み込む際は、各フォントの元ライセンス（SIL OFL / Apache 2.0等）が適用されます。商用利用を含め、安全に利用可能です。
4. コードの利用について: 生成したコードは、個人・商用問わず自由に使ってください。ただし、このツール自体のまるごとコピーはご遠慮ください。
Weather Icons: SIL OFL 1.1 / Material Symbols: Apache License 2.0 / Content: CC BY 4.0
favorite 謝辞 / Acknowledgments
本プロジェクトの核である「Weather Icons」の制作者、Erik Flower 氏に最大の敬意と感謝を捧げます。 氏が情熱を注いで作り上げた美しいアイコンセットと、それをオープンソースとして公開する寛大な精神がなければ、このスタジオは決して生まれることはありませんでした。
Our deepest gratitude goes to Erik Flower, the creator of "Weather Icons." This studio would never have existed without the beautiful icon sets you built with such passion and your generous spirit in sharing them as open-source. Thank you for your incredible work.