本書では、UIは単なる画面デザインではなく、ユーザーとシステムをつなぐ接点であると説明されている。また、UXはサービスを利用する前から利用後までを含めた総合的な体験を指しており、UIとUXは密接に関係している。
本研究で制作するエキゾチックアニマル管理アプリにおいても、情報を表示するだけではなく、ユーザーが迷わず操作できることや、継続的に利用しやすい体験を提供することが重要であると考えられる。
実際に行ったユーザー調査では、「情報が分散している」「管理を継続しにくい」といった意見も見られた。そのため、本研究では機能面だけでなく、長期間利用しやすいUX設計についても検討する。
本書では、「デザインとは見た目ではなく設計である」と述べられている。
つまり、色や形を決めることだけではなく、情報をどのように整理し、ユーザーにどのような行動を促すかを考えることがデザインの本質である。
本研究では、健康管理、温湿度モニタリング、病院検索、コミュニティ機能など、多くの情報を扱う予定である。そのため、情報の優先順位や画面構成を整理し、分かりやすく伝えることが重要である。
今後は情報設計やナビゲーション設計についても検討を進めていく。
本書では、UIは利用環境によって大きく影響を受けると説明されている。
例えば、スマートフォンとPCでは操作方法が異なり、それに応じて適切な画面設計も変化する。また、利用する場所や時間帯によっても必要な情報は異なる。
本研究ではスマートフォンアプリを中心に設計を行う予定であるため、片手操作や視認性、情報の確認しやすさなどを考慮する必要がある。
さらに、将来的には水槽型装置やセンサーとの連携を想定し、実際の飼育環境とデジタルUIをつなぐ設計についても検討したい。
本書では、人間は色、形、動きなどの視覚情報から多くの情報を認識していると説明されている。
特にスマートフォンアプリでは、ユーザーが短時間で必要な情報を理解できるように設計することが重要である。
本研究で対象とするエキゾチックアニマル飼育者は、温度や湿度、給餌記録、健康状態など多くの情報を確認する必要がある。そのため、重要な情報を優先的に表示し、視覚的に理解しやすいデザインが求められる。
一般的に、異常状態は赤色、正常状態は緑色、注意状態は黄色で表示されることが多い。このような色による情報伝達を活用することで、ユーザーは状況を素早く判断できると考えられる。
また、アイコンやグラフを活用することで、数値情報だけでは分かりにくい環境データも直感的に理解しやすくなる。
そのため本研究では、人間の認知特性を考慮しながら、分かりやすい情報表示方法について検討する。
本書では、人間が一度に処理できる情報量には限界があることが説明されている。
情報量が多すぎる場合、ユーザーは必要な情報を見つけにくくなり、操作ミスや利用継続率の低下につながる可能性がある。
本研究で提案するアプリには、健康管理、温湿度管理、病院検索、コミュニティ機能、飼育図鑑など複数の機能が存在する。
そのため、すべての機能を同じ階層に配置するのではなく、利用頻度や重要度に応じて情報を整理する必要がある。
今後の設計では、ユーザーが迷わず目的の機能へ到達できるよう、ナビゲーション構造や情報設計について検討を行う。
本書では、ユーザーが目的の情報へ効率よく到達できるようにするためには、情報構造が重要であると述べられている。
本研究のユーザー調査では、「情報が分散している」「信頼できる情報が見つけにくい」という意見が多く見られた。
そのため本研究では、現時点で以下のような情報構造を想定している。
今後はワイヤーフレームを作成しながら、より適切な情報配置について検討する予定である。
本書では、ユーザーが現在どこにいるか、次にどこへ移動できるかを理解できるナビゲーション設計が重要であると説明されている。
本研究ではスマートフォンアプリを想定しているため、片手操作でも利用しやすいナビゲーション構造が必要である。
また、アンケート調査では20〜25歳の若年層ユーザーが全体の約7割を占めていた。一方で、飼育初心者も多く含まれていることから、複雑な操作を避け、できるだけ少ないステップで目的の画面へ移動できる設計を目指す。
今後はユーザーフローの作成を通して、各機能間の移動方法や操作手順について検討していく。
本書では、デザインは作り手の考えだけではなく、ユーザーの視点から設計することが重要であると説明されている。
本研究では、アンケート調査とインタビュー調査を通して、エキゾチックアニマル飼育者が抱える課題を整理した。
その結果、
などの課題が明らかになった。
そのため今後のUI設計では、機能を増やすことだけではなく、ユーザーが実際に感じている問題を解決できる設計を中心に進める必要があると考えられる。
本書では、ユーザーの操作に対して適切なフィードバックを返すことが重要であると説明されている。
例えば、
などを明確に表示することで、ユーザーは現在の状態を理解しやすくなる。
本研究においても、温湿度モニタリングや給餌記録機能では、ユーザーが安心して利用できるような通知方法や状態表示について検討する必要がある。
本書では、画面ごとのデザインルールを統一することが重要であると述べられている。
ボタン配置やアイコン、カラーなどが統一されていることで、ユーザーは操作方法を理解しやすくなり、学習コストを減らすことができる。
本研究では、初心者ユーザーも多く含まれているため、分かりやすく一貫性のあるUIデザインを目指す。
また、継続的な記録や健康管理を行うアプリであるため、長期間利用しやすい体験設計についても検討する。
本書を通して、UIデザインは単に画面を作ることではなく、ユーザーが情報をどのように理解し、どのように行動するかまで考える必要があることを学んだ。
また、ユーザー調査から得られた課題をもとに、情報の整理方法や機能配置を考えることの重要性を理解した。
そのため今後は、これまで行った調査結果と本書で学んだ内容を参考にしながら、情報構造やユーザーフローについて整理していきたい。
さらに、ワイヤーフレームの作成を通して、機能の配置や情報の見せ方を検討し、実際のUIデザインへ発展させていく予定である。
この2週間は、インターネット上の資料や教材などを参考にしながら、実際の飼育ケースの制作について、初歩的な調査と計画を行いました。
今回使用する主な機器は、以下のものです。
DHT11は、温度と湿度を測定します。ESP32は、データの処理と送信を行います。ESP32-CAMは、飼育ケースの中の様子を撮影するために使用します。
まず、基本的な温湿度測定の部分から制作します。
DHT11には、電源、GND、データの端子があります。そのため、ジャンパーワイヤーを使って、DHT11とESP32を接続します。
最初は、直接飼育ケースに設置せず、ブレッドボードを使って接続と動作を確認します。
接続ができたら、パソコンからESP32にプログラムを書き込み、DHT11のデータを読み取ります。
プログラムを動かした後は、シリアルモニターを使って、温度と湿度が正しく表示されるか確認します。
例えば、
温度：26℃
湿度：60％
のように表示されることを確認します。
その後、周囲の温度や湿度を少し変えて、表示される数値も変化するか確認します。これによって、センサーが正常に動作しているかを確認します。
DHT11が正常に動作したら、次にESP32のWi-Fi機能をテストします。
ESP32をWi-Fiに接続し、DHT11から取得した温度と湿度のデータをネットワーク上に送信できるようにします。
基本的な流れは、DHT11 → ESP32 → Wi-Fi → App / UIです。
まずESP32が正常にWi-Fiへ接続できるか確認し、その後、温度と湿度のデータを送信できるかテストします。
これができれば、将来的にはユーザーが手動で温度や湿度を入力する必要がなくなり、飼育ケースから自動的にデータを取得できるようになります。
温湿度センサーのテストが終わったら、次にESP32-CAMを取り付けます。
まず、ESP32-CAMとカメラを接続し、書き込み用ソケットを使ってパソコンからプログラムを書き込みます。
その後、カメラが正常に撮影できるかを確認します。
カメラが正常に動作したら、アクリル飼育ケースの上部または前面に設置します。
実際にいくつかの位置を試し、ペットの動きと飼育ケースの中をできるだけ広く確認できる場所を決めます。
位置が決まったら、カメラが動かないように固定します。
各機器のテストが終わったら、実際の飼育ケースに取り付けます。
まず、DHT11をケース内部に設置します。センサーはケース内の空気を測定するため、ヒーターなどの近くには置かないようにします。
ESP32はケースの外側または上部に設置し、水や湿気が直接かからないようにします。
その後、ジャンパーワイヤーを使ってDHT11とESP32を接続し、配線を整理します。
ESP32-CAMはケースの上部または前面に設置します。
最終的には、
ケース内部：DHT11温湿度センサー
ケース外部：ESP32＋配線
ケース上部・前面：ESP32-CAM
という構成を考えています。
このようにすることで、ペットの活動スペースをできるだけ確保しながら、必要なデータを取得できるようにします。
すべての機器を設置した後、全体の動作を確認します。
まず、DHT11が温度と湿度を継続して測定できるか確認します。
次に、ESP32がWi-Fiに接続し、データを正常に送信できるか確認します。
同時に、ESP32-CAMで映像を撮影し、ネットワークを通して確認できるかテストします。
基本的な動作が確認できたら、次に異常状態についてもテストします。
例えば、温度や湿度が設定した範囲を超えた場合に、システムが異常を検知し、UIに通知を表示できるか確認します。
最後に、完成した装置と現在制作しているUIを連携させます。
Appの画面では、
などを表示する予定です。
ユーザーはAppを開くだけで、現在の飼育環境を確認できます。
また、外出中でもカメラを使って、ペットの様子を確認できるようにします。
最終的な流れは、
DHT11 → ESP32 → Wi-Fi → UI
そして、
ESP32-CAM → Wi-Fi → UI
という形を考えています。
現在、制作に必要な主な材料は準備できています。
次は、まずESP32とDHT11を接続し、温湿度データを正常に取得できるかテストします。
その後、ESP32-CAMの書き込みと動作確認を行い、2つのシステムを30×20×15cmのアクリル飼育ケースに取り付けます。
【实验一：ESP32物联网温湿度监测实验-哔哩哔哩】 https://b23.tv/U4ZxHm5
【ESP32-CAM视频流传输教程-哔哩哔哩】 https://b23.tv/5nuBIq2