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