KSU防災Guide Book
九産大生向けの災害のサイト制作
Hanako Nakanishi
概要
これは何?
九産大生向けの災害のサイト
背景と目的
今年1月に発生した能登半島の地震を受けて、災害に対する準備や対応についての啓発活動の重要性を強く感じた。災害が発生した際の適切な行動や避難の重要性を広めるために、災害時に役立つ情報を提供するサイトやコンテンツを作成し、広く発信していきたいと考えている。現在、私たちの大学のホームページには防災に関する項目や緊急連絡先、災害発生時のフローについての記載がなく、避難経路図も古いままということが判明した。そこで情報を充実させることで、学生や教職員が災害時に冷静かつ迅速に行動できる助けになることを期待し作成する。
コンセプト
大学内の全体マップや各館の避難経路の地図を載せ、災害時に必要な情報を効率よく提供する。また、学内の大学生の防災意識の向上や正しい対応方法を普及させるサイト。
成果物の仕様
- webサイト
- PDF
- ゲーム
- 3Dマップ
学校全体を3Dマップ化し、360度回転可能なビューワーとして、サイトに埋め込む。
メンバー
内藤彩乃
- 役割
- webサイト、PDF制作(内藤)
- 3Dマップ、ゲーム制作(中西)
制作ツール
Visual Studio Code
Blender
Adobe XD
Windows11
MacBook Air
プロジェクトの期間
2024.04.12 - 2024.12.20
まとめ
災害に関する情報提供サイトやゲームは多く存在するが、大学のホームページに災害対応に関するページが少ないことに気づいた。そこで今回の研究では、本大学の学生向けに災害対応や防災対策を紹介するサイトとそれに付随するコンテンツを作成することにした。前期では、サイトのタイトル、全体の構成、主要なコンテンツ、そしてデザインを決定した。このサイトの目的は、学生に対して災害時の行動指針を提供し、安全意識を高めることだ。
後期中間発表まとめ
後期に入り、防災に関するクイズの制作が完了した。JavaScriptを活用してクイズの回答を自動判定し、ユーザーが楽しみながら防災知識を深められるようデザインやUI面でもシンプルでわかりやすいレイアウトを意識した。また、前期から集めた防災情報の見直しと最新データへの更新も行った。地域や大学の防災計画に関する情報を精査し、閲覧者にとって有益で信頼性の高い内容に整備した。今後は、情報の収集を続けクイズのアップデートを続けていく予定だ。
3Dマップ作成も引き続き進行中だ。前期で基本構造はでき上がりましたが、細部のクオリティ向上とそれに合わせた色付けを行い、リアリティあるマップの完成を目指している。
引き続き、ユーザーにとって分かりやすく利用しやすい防災サイトの完成に向け、3Dやコンテンツ面の強化を図っていく。
調査
現状調査
災害に対する意識の現状
- 災害に対する意識や知識が十分であるとは言い難い
- 大災害直後には意識が高まるが、時間経過とともに意識が薄れる傾向がある
- 災害に関する警報があっても危険を回避する行動を取らない場合もある
- 災害が頻発し,災害のことはだいたい知っていると本人が思っていても,実はその知識が不十分な場合がある
- 小さい子向けの防災のアニメや、ゲームサイトがあった。
- 会社では災害時に備えて定期的に定期的に防災に関わる研修や防災訓練など様々な取り組みが行われている
- 九産大のHPには災害の取り組みしか掲載されいない状況
先行事例
- 国土交通省 防災ポータル
災害時と日頃から対策することが載っている。
- 防災シミュレーションゲーム「クロスロード」
シンプルな災害対応のシミュレーションカードゲーム←どちらを選んでも何らかの犠牲を払わなければならないような「ジレンマ」が多数ある。
- 防災・減災情報サイト
災害への対応、備えが掲載されており、非常食簡易計算ツールや防災チェックシートなど実際に行動を促すような情報もある。
- Pilot.Auto
3DCGアニメーションをサイトに掲載することで、視覚的な魅力を引き立てることができる。特に、カメラの動きが非常に参考になる点が多く、観る人の興味を強く引きつける効果がある。また、アニメーションを通じて製品やサービスの特徴をより分かりやすく伝えることができ、ユーザーエクスペリエンスの向上にも寄与している。さらに、視覚的なインパクトが強い3DCGアニメーションは、他のコンテンツと差別化を図るうえでも効果的なため、3DCGアニメーションを活用することで、サイト全体の魅力を大幅に高めることが可能だ。
- ボラギノールタウン ボラギノールタウン公式ブランドサイト
3DCG技術を用いて街全体を作り上げ、その街の中にある各建物にカーソルを合わせると、建物の詳細情報が表示される仕組み。この仕組みにより、ユーザーは建物の歴史や機能、その他の関連情報を簡単に確認することができる。
技法・技術情報
プロジェクト管理
- スケジュール
- 10月にサイトを見てもらいゲームを実際にしてもらう
サイトマップ
ワイヤーフレーム
サイトの雰囲気のイメージ
ToDo
ロゴ
サイトマップ
スケジュール
ワイヤーフレーム
プロトタイプ
- 記事の作成
- サイト制作
- ゲーム制作
- 3dマップの制作
進捗記録
2024.11.08
2024.11.01
- クイズ 修正
- スコアのシェアボタンが機能していなかった
→各SNSをボタンで選択できるように改善
- GitHub
2024.10.25
2024.10.18
- 最後の問題の解説後にスコアを表示
- 点数ごとに1ことコメントが表示
- 解説のページに選んだ答えと正解の答えを解説部分より上に表示
- 選択肢が正解かどうか色で強調
- アニメーションの追加
- 進捗バーを下部に表示させ、パーセントの追加
- 解説ページのレイアウトを調整し、行間や要素の間隔を広げ、読みやすくた
2024.10.11
クイズ作成
- 1問ごとに画面が切り替わる
- 回答後に答えと解説を表示させてから次の問題に進める
- 進捗バーの表示の追加
2024.10.04
- 3Dマップ制作
- どこまで細かく作るか
- 色付け(建物の色を再現or学部ごとに分ける)→用途による
- 1号館周辺完成
2024.09.27
クイズを1から作り直した
2024.09.20
クイズの見直し
→左に寄ってしまう現象、背景、問題内容
2024.07.19
PDF作成
参考サイト
2024.07.12
3Dマップ作成
参考サイト1
参考サイト2
2024.07.05
サイト内容の修正
2024.06.30
クイズ作成
試作4
2024.06.21
クイズ作成
参考サイト 1
参考サイト2
2024.06.14
記事内容 メモ
2024.06.07
2024.05.31
2024.05.24
2024.05.17
2024.05.10
サイトに載せる内容
- なぜ災害が起こるのか
- 防災は何のためにするのか
- 災害が起こった時の最適な行動
- 過去に災害が起きた時に避難できなかった人の割合、理由
- 備蓄しておかないといけない物,理由
- 非常食簡易計算ツール
- 可能であれば被災者の声
2024.05.03
ゲームの内容
- ルート分岐を用意し、実際に被災したらというシチュエーションでクイズ
- サイトを読んでいる前提で2択か3択の簡単なクイズ
流れ・設定
2024.04.26
防災ゲーム
2024.04.19
貿易ゲーム
- 学生対象(小学生ー中学生)
- 目的
公正な社会の可能性について共に考える
- 貿易ゲームのルール
2024.04.12
候補