はじめに
こんにちは、piyovateです🐣✨
前回の記事では、ラズパイPico WHで取得した温湿度データをブラウザから確認できるようになりました。
今回は、この取得したデータを実際に会社のホームページに表示するための『表示方法やデザイン、表示場所』などを検討・決定しましたので、その内容をご紹介します！
📌 今回の目標
- ホームページに表示する温度・湿度データのデザインを決定
- 具体的な表示場所を決定
- 温度・湿度それぞれを分かりやすい絵文字で状態表示するように決定
🎨 Step1：デザイン検討のポイント
ホームページへの表示にあたり、以下のポイントを重視しました。
- 視認性が高く直感的であること
- 既存のサイトデザインと調和すること
- スマホ画面（ハンバーガーメニュー表示）にも対応できること
- 情報がシンプルかつわかりやすいこと
検討した結果、『温度・湿度それぞれを個別に評価し、それぞれの状態を絵文字で表現』することにしました。
🌡️ Step2：温度・湿度の状態と絵文字（最終決定）
決定した温度・湿度の状態は、以下の5段階表示です。
温度の状態（絵文字5段階）
| 状態 | 温度範囲 | 絵文字 |
|---|---|---|
| 非常に暑い | 28℃以上 | 🥵 |
| 少し暑い | 25〜27℃ | 😅 |
| 快適（ちょうどよい） | 20〜24℃ | 😌 |
| 少し涼しい | 17〜19℃ | 🙂 |
| 非常に寒い | 17℃未満 | 🥶 |
湿度の状態（絵文字5段階）
| 状態 | 湿度範囲 | 絵文字 |
|---|---|---|
| 非常にじめじめ | 80%以上 | 💦 |
| ややじめじめ | 65〜79% | 💧 |
| 快適（ちょうどよい） | 40〜64% | 😊 |
| やや乾燥 | 30〜39% | 🍂 |
| 非常に乾燥 | 30%未満 | 🌵 |
🖥️ Step3：決定した表示デザインと表示場所
今回、以下の表示方法と場所に決定しました。
- 広い画面（PCなど） → フッター部分に表示
- 狭い画面（スマホなど） → フッター部分とハンバーガーメニューに追加で表示
フッター表示例（PC・スマホ共通）
現在のオフィス環境：温度😌 / 湿度😊
ハンバーガーメニュー表示例（スマホ画面）
現在のオフィス環境：
温度😌 / 湿度😊
📸 フッター表示（実際の表示写真）
📱 ハンバーガーメニュー表示例（スマホ画面）
オフィス環境の状態が絵文字でシンプルに表示されています✨
🚩 Step4：工夫したポイント・気づいたこと
- 最初は温湿度をまとめて「快適度」として評価していましたが、それぞれの状態を明確に区別して表示することで、環境の状態が一目でわかりやすくなりました。
- 詳細な絵文字表示により、実際の体感に近い状態が直感的に伝わるようになりました。
- スマホ表示でもフッターに常時表示し、さらにハンバーガーメニューにも追加することで、どの画面を閲覧している時でもオフィス環境の確認が簡単になりました。
🔜 次回の予定
次回は、今回決定したデザインを実際のホームページに組み込むため、フロントエンド（HTML・CSS・JavaScript・PHP）のコード修正と実装を行います。
具体的には以下の内容を予定しています。
- 温湿度データをリアルタイムで取得し、決定したデザインで表示できるようコード修正
- 営業時間中はリアルタイム表示を行い、それ以外の時間帯は「営業時間外」と表示する仕組みを検討・実装
- 平均気温や湿度などを表示する方法の検討・実装（必要に応じて実施）
実際にホームページに実装した結果や工夫した点もあわせてご紹介しますので、次回もぜひお楽しみに🐣✨
🔗 シリーズリンク
- 次回：coming soon
- 前回：🌿 ラズパイを活用した『社内環境（温湿度）見える化システム』をつくる⑤【Pico WHでWebサーバーを立ち上げ＆ローカルで取得テスト編】
- 第１回：🌿 ラズパイを活用した『社内環境（温湿度）見える化システム』をつくる①【アイデア決定編】
📚 シリーズ全記事はこちら：Qiitaストックページ