#author("2024-11-12T17:41:10+09:00;2024-10-25T04:40:46+09:00","default:member","member") #author("2024-12-20T14:15:44+09:00;2024-12-20T14:15:24+09:00","default:member","member") *KSU防災Guide Book 九産大生向けの災害のサイト制作 #image(icon.png) #image(main.gif) ''Hanako Nakanishi'' -'''Keywords：disaster ,game ,web site ''' https://naitoayano.github.io/sotukennhp5/3.html //-https://www.example.com //-__[[相互評価シート>https://www.example.com]]__ ← ここからコメントをお願いします。 ~ **概要 ***これは何？ 九産大生向けの災害のサイト ~ ***背景と目的 今年1月に発生した能登半島の地震を受けて、災害に対する準備や対応についての啓発活動の重要性を強く感じた。災害が発生した際の適切な行動や避難の重要性を広めるために、災害時に役立つ情報を提供するサイトやコンテンツを作成し、広く発信していきたいと考えている。現在、私たちの大学のホームページには防災に関する項目や緊急連絡先、災害発生時のフローについての記載がなく、避難経路図も古いままということが判明した。そこで情報を充実させることで、学生や教職員が災害時に冷静かつ迅速に行動できる助けになることを期待し作成する。 ~ ***コンセプト //&color(red){基本的な考え方、枠組み、視点など}; 大学内の全体マップや各館の避難経路の地図を載せ、災害時に必要な情報を効率よく提供する。また、学内の大学生の防災意識の向上や正しい対応方法を普及させるサイト。 ~ ***成果物の仕様 //&color(red){&small(成果物の形式・サイズ・時間尺等);}; -webサイト -PDF --各号館ごとの避難経路、緊急連絡先を掲載する。 -ゲーム --クイズを一問一答で解いてもらい、点数を表示する。 -3Dマップ 学校全体を３Dマップ化し、360度回転可能なビューワーとして、サイトに埋め込む。 ~ ***メンバー //&color(red){共同プロジェクトの場合のみ｜メンバーと役割分担を明記}; [[内藤彩乃>https://design.kyusan-u.ac.jp/socialdesign/?cmd=edit&page=%E5%86%85%E8%97%A4%E5%BD%A9%E4%B9%83/%E5%8D%92%E6%A5%AD%E7%A0%94%E7%A9%B6]] -役割 --webサイト、PDF制作(内藤) --3Dマップ、ゲーム制作(中西) ~ ***制作ツール //&color(red){使用するツール｜ハードウエア・ソフトウエア}; Visual Studio Code Blender Adobe XD Windows11 MacBook Air ~ ***プロジェクトの期間 2024.04.12 - 2024.12.20 ~ ***まとめ //&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。}; 災害に関する情報提供サイトやゲームは多く存在するが、大学のホームページに災害対応に関するページが少ないことに気づいた。そこで今回の研究では、本大学の学生向けに災害対応や防災対策を紹介するサイトとそれに付随するコンテンツを作成することにした。前期では、サイトのタイトル、全体の構成、主要なコンテンツ、そしてデザインを決定した。このサイトの目的は、学生に対して災害時の行動指針を提供し、安全意識を高めることだ。 後期中間発表まとめ 後期に入り、防災に関するクイズの制作が完了した。JavaScriptを活用してクイズの回答を自動判定し、ユーザーが楽しみながら防災知識を深められるようデザインやUI面でもシンプルでわかりやすいレイアウトを意識した。また、前期から集めた防災情報の見直しと最新データへの更新も行った。地域や大学の防災計画に関する情報を精査し、閲覧者にとって有益で信頼性の高い内容に整備した。今後は、情報の収集を続けクイズのアップデートを続けていく予定だ。 3Dマップ作成も引き続き進行中だ。前期で基本構造はでき上がりましたが、細部のクオリティ向上とそれに合わせた色付けを行い、リアリティあるマップの完成を目指している。 引き続き、ユーザーにとって分かりやすく利用しやすい防災サイトの完成に向け、3Dやコンテンツ面の強化を図っていく。 ~ ~ **調査 ***現状調査 //&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し}; [[災害に対する意識の現状>https://www.bousai.go.jp/kaigirep/hakusho/h19/bousai2007/html/honmon/hm01000103.htm]] -災害に対する意識や知識が十分であるとは言い難い -大災害直後には意識が高まるが、時間経過とともに意識が薄れる傾向がある -災害に関する警報があっても危険を回避する行動を取らない場合もある -災害が頻発し，災害のことはだいたい知っていると本人が思っていても，実はその知識が不十分な場合がある -小さい子向けの防災のアニメや、ゲームサイトがあった。 -会社では災害時に備えて定期的に定期的に防災に関わる研修や防災訓練など様々な取り組みが行われている -[[九産大のHP>https://www.kyusan-u.ac.jp/other/support/]]には災害の取り組みしか掲載されいない状況 ~ ***先行事例 //&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など}; -[[国土交通省 防災ポータル>https://www.mlit.go.jp/river/bousai/olympic/]] 災害時と日頃から対策することが載っている。 -[[防災シミュレーションゲーム「クロスロード」>https://www.bousai.go.jp/kohou/kouhoubousai/h20/11/special_02_1.html]] シンプルな災害対応のシミュレーションカードゲーム←どちらを選んでも何らかの犠牲を払わなければならないような「ジレンマ」が多数ある。 -[[防災・減災情報サイト>https://www.tokiomarine-nichido.co.jp/world/egao/]] 災害への対応、備えが掲載されており、非常食簡易計算ツールや防災チェックシートなど実際に行動を促すような情報もある。 -[[Pilot.Auto>/https://pilot.auto/ja/]] 3DCGアニメーションをサイトに掲載することで、視覚的な魅力を引き立てることができる。特に、カメラの動きが非常に参考になる点が多く、観る人の興味を強く引きつける効果がある。また、アニメーションを通じて製品やサービスの特徴をより分かりやすく伝えることができ、ユーザーエクスペリエンスの向上にも寄与している。さらに、視覚的なインパクトが強い3DCGアニメーションは、他のコンテンツと差別化を図るうえでも効果的なため、3DCGアニメーションを活用することで、サイト全体の魅力を大幅に高めることが可能だ。 -[[ボラギノールタウン ボラギノールタウン公式ブランドサイト>https://www.borraginol.com/town/home/hospital/]] 3DCG技術を用いて街全体を作り上げ、その街の中にある各建物にカーソルを合わせると、建物の詳細情報が表示される仕組み。この仕組みにより、ユーザーは建物の歴史や機能、その他の関連情報を簡単に確認することができる。 ~ ***技法・技術情報 //&color(red){プロジェクトの遂行に必要な技法・技術に関する調査}; -[[動くデザインアイデア帳>https://coco-factory.jp/ugokuweb/]] -[[ティラノスクリプト>https://tyrano.jp/example/]] ~ ~ **プロジェクト管理 ***[[スケジュール>https://docs.google.com/spreadsheets/d/1IPQDLJ8IlZSbcGSKiRTIdbd1I7T8fZxDmWx2y5Eb164/edit?usp=sharing]] -[[スケジュール>https://docs.google.com/spreadsheets/d/1IPQDLJ8IlZSbcGSKiRTIdbd1I7T8fZxDmWx2y5Eb164/edit?usp=sharing]] --10月にサイトを見てもらいゲームを実際にしてもらう ~ ***サイトマップ #image(sitemap.png,,80%) ~ ***ワイヤーフレーム #image(wireframe.png,,30%) [[サイトの雰囲気のイメージ>https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/1-3/1-3.html]] -ロゴ #image(icon.png,,30%) -[[プロトタイプ>https://naitoayano.github.io/disaster/index.html]] -ゲーム試作 --[[試作4>http://ss742319.stars.ne.jp/game1/test4/index.html]] --[[試作3>http://ss742319.stars.ne.jp/game1/test3/index.html]] --[[試作2>http://ss742319.stars.ne.jp/game1/test2/index.html]] --[[試作1>http://ss742319.stars.ne.jp/game1/test1/index.html]] ~ ***ToDo //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」}; -%%ロゴ%% -%%サイトマップ%% -%%スケジュール%% -%%ワイヤーフレーム%% -%%プロトタイプ%% -記事の作成 -サイト制作 -ゲーム制作 -3dマップの制作 ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。}; #hr ~ ~ **2024.11.08 **2024.11.01 -クイズ 修正 --スコアのシェアボタンが機能していなかった →各SNSをボタンで選択できるように改善 -[[GitHub>https://nakanishihanako.github.io/kuizu1101//]] **2024.10.25 -クイズ完成 --[[クイズ 問題>https://docs.google.com/document/d/1fhLZTebhkGviWb0ry9--nfFoV1F_8f2OqTPUULBwsV0/edit?usp=sharing]] --[[クイズ>http://ss742319.stars.ne.jp/game1/test5/index.html]] **2024.10.18 -最後の問題の解説後にスコアを表示 -点数ごとに1ことコメントが表示 -解説のページに選んだ答えと正解の答えを解説部分より上に表示 -選択肢が正解かどうか色で強調 -アニメーションの追加 -進捗バーを下部に表示させ、パーセントの追加 -解説ページのレイアウトを調整し、行間や要素の間隔を広げ、読みやすくた --[[GitHub>https://nakanishihanako.github.io/kuizu1018/]] **2024.10.11 クイズ作成 -1問ごとに画面が切り替わる -回答後に答えと解説を表示させてから次の問題に進める -進捗バーの表示の追加 --[[GitHub>https://nakanishihanako.github.io/kuizu1011/]] **2024.10.04 -３Dマップ制作 --どこまで細かく作るか --色付け（建物の色を再現or学部ごとに分ける）→用途による -1号館周辺完成 #image(3dmap3.png,,80%) **2024.09.27 クイズを1から作り直した --[[GitHub>https://nakanishihanako.github.io/kuizu0927/]] **2024.09.20 クイズの見直し →左に寄ってしまう現象、背景、問題内容 **2024.07.19 PDF作成 [[参考サイト >https://www.bousai.metro.tokyo.lg.jp/_res/projects/default_project/_page_/001/008/041/04_pdf.pdf//]] **2024.07.12 3Dマップ作成 #image(3dmap1.png,,80%) #image(3dmap2.png,,80%) [[参考サイト1 >https://cgbox.jp/2023/03/12/blender-gis-landscape//]] [[参考サイト2 >https://www.noboyu.com/how-to-embed-3d-models-website/#toc2//]] **2024.07.05 サイト内容の修正 **2024.06.30 クイズ作成 [[試作4>http://ss742319.stars.ne.jp/game1/test4/index.html]] **2024.06.21 クイズ作成 [[参考サイト 1>https://b-risk.jp/blog/2022/09/random-quiz/]] [[参考サイト2>https://taraoblog.com/%E5%88%9D%E5%BF%83%E8%80%85%E3%81%A7%E3%82%82%E7%B0%A1%E5%8D%98%E3%81%AB%E4%BD%9C%E3%82%8C%E3%82%8Bjavascript%E3%82%AF%E3%82%A4%E3%82%BA%E3%82%B2%E3%83%BC%E3%83%A0%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9/]] **2024.06.14 [[記事内容 メモ>https://docs.google.com/document/d/1s4ZdWOeGgEE0Fo4mNK2DTYuEdNKt0Y8CAU3fhz7P16c/edit?usp=sharing]] **2024.06.07 //[[仕様書>]] **2024.05.31 -[[試作3>http://ss742319.stars.ne.jp/game1/test3/index.html]] **2024.05.24 -[[資料>https://blog.ecoflow.com/jp/disaster-kinds/]] -[[被災者の声>https://kumamotojishin-museum.com/]] 夏季休みに熊本に取材（？） -[[試作2>http://ss742319.stars.ne.jp/game1/test2/index.html]] **2024.05.17 -[[ロゴ作成(仮)>https://drive.google.com/file/d/1Ri9EDQFf6P7w-ufNfvbEad0TocWFU8ZE/view?usp=sharing]] -[[試作1>http://ss742319.stars.ne.jp/game1/test1/index.html]] **2024.05.10 -[[必要な食事>https://bousai.nishinippon.co.jp/19250/#:~:text=%E4%BA%BA%E9%96%93%E3%81%8C%E9%A4%93%E6%AD%BB%E3%81%99%E3%82%8B%E3%81%AB,%E3%81%A7%E3%81%82%E3%82%8B%E3%81%A8%E3%81%84%E3%81%86%E3%81%93%E3%81%A8%E3%81%A7%E3%81%99%E3%80%82]] -[[必要な水分>https://www.lifehacker.jp/article/170303_thirsty_body/]] 餓死まで2〜3週間 脱水症状から死に至るまで4～5日程度 -[[非常食簡易計算ツール>https://www.tokiomarine-nichido.co.jp/world/egao/sonae/goods/count-tool.html]] -[[備蓄品リスト>https://www.pasona-ns.co.jp/column_wp/detail/emergency-supplies.html]] ***サイトに載せる内容 -なぜ災害が起こるのか -防災は何のためにするのか -災害が起こった時の最適な行動 -過去に災害が起きた時に避難できなかった人の割合、理由 -備蓄しておかないといけない物,理由 -[[非常食簡易計算ツール>https://www.tokiomarine-nichido.co.jp/world/egao/sonae/goods/count-tool.html]] -可能であれば被災者の声 //***サイトマップ //#img(disaster_sitemap.png,,30%) **2024.05.03 ***ゲームの内容 -ルート分岐を用意し、実際に被災したらというシチュエーションでクイズ -サイトを読んでいる前提で2択か3択の簡単なクイズ [[流れ・設定>https://docs.google.com/document/d/140KEEtLEoTVhAdch8YUjyQkIlcdEfhlQrz1y1oLW6Wo/edit]] **2024.04.26 ***防災ゲーム -全年齢対象 -目的 災害用の備えの重要性 -[[防災ゲームのリスト>https://note.com/kenyamiyazaki/n/nb18f31977995#38bef505-938e-4348-82a5-a92da0d6e72d]] **2024.04.19 ***貿易ゲーム -学生対象（小学生ー中学生） -目的 公正な社会の可能性について共に考える -[[貿易ゲームのルール>http://www.interq.or.jp/www-user/hanatyan/yes/tradegame.html]] **2024.04.12 ***候補 -貿易ゲーム -地震 -SDGs ~ *** ~ ~ ~