#author("2026-07-16T12:05:58+09:00","default:member","member") #author("2026-07-16T12:07:09+09:00","default:member","member") *Glass Bomb 持病を共有するwebアプリ #image(aset81.png) -''千々岩聡真'' -'''Keywords：持病,, VScode,,webアプリ,,Blender''' -https://tijimaru.github.io/GlassBomb/ //-__[[相互評価シート>https://www.example.com]]__ ← ここからコメントをお願いします。 ~ //***CONTENTS //#contents2_1 //~ **概要 ***これは何？ //&color(red){これは何か・・を簡潔に}; 目に見えない自分の持病や、それと付き合ってきた時間を、視覚的な形に落とし込んだものです ~ ***背景と目的 //&color(red){プロジェクトの背景と目的}; 幼い頃から川崎病の後遺症と向き合い、現在も通院生活を送っています。しかし、いざ友人に自分の持病を説明しようとすると、言葉に詰まってしまう自分に気づきました。この「曖昧な理解」によるもどかしさを解消するため、自身の症例を可視化するものです。 自分自身の理解を深めることはもちろん、この記録が将来、同じ病気を抱える子どもたちや、不安の中にいるご両親にとっての「道しるべ」となることを目指しています。 ~ ***コンセプト //&color(red){基本的な考え方、枠組み、視点など}; Webサイトを見ただけで簡単に病状がわかる ~ ***成果物の仕様 //&color(red){&small(成果物の形式・サイズ・時間尺等);}; Webサイト -https://tijimaru.github.io/GlassBomb/ ~ //***メンバー //&color(red){共同プロジェクトの場合のみ｜メンバーと役割分担を明記}; ~ ***制作ツール //&color(red){使用するツール｜ハードウエア・ソフトウエア}; -VScode (webサイトのコーディング) -illustrator (視覚的情報制作) -Blender (視覚的情報制作) -Bee DICOM Viewer (医療画像確認アプリ) ~ ***プロジェクトの期間 //&color(red){プロジェクトの期間｜20XX.XX.XX - 20XX.XX.XX }; 2026.04.09 - 2026.XX.XX ※通年で行う予定 ~ ***まとめ //&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。}; -前期まとめ 自身の病気の情報収集とwebアプリのUI設計を行った。 後期ではBlenderを用いた視覚的にわかりやすい映像を取り入れwebアプリの完成度を高めていく予定である ~ -後期まとめ ~ ~ **調査 ***現状調査 //&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し}; 現在、川崎病やその後遺症である冠動脈瘤に関するWebサイトは多数存在するが、詳細な情報が不足している記事が少なくない。また、専門的な情報があっても文字中心の構成が多く、一般の読者には理解しにくいという課題がある。さらに、患者自身が自身の症例をもとにリアルな体験や経過を発信している事例はほとんど見られない。 ~ ***先行事例 //&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など}; -__[[川崎病の子供をもつ親の会>https://kawasaki-disease.gr.jp/]]__ -__[[小児慢性特定疾病情報センター>https://www.shouman.jp/disease/details/04_26_032/]]__ ~ ***技法・技術情報 //&color(red){プロジェクトの遂行に必要な技法・技術に関する調査}; -医療画像を見るため使ったアプリ --__[[Bee DICOM Viewer>https://apps.apple.com/jp/app/bee-dicom-viewer/id1590273176?mt=12]]__ ~ ~ **プロジェクト管理 ***スケジュール //&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。}; //AIに聞いてexcel #image(ganto.jpeg) ~ ***ToDo //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」}; -テーマ設定 --%%案出し%% --%%テーマ決定%% -情報収集 --%%インターネット%% --%%通院中の病院%% -制作 --%%ワイヤーフレーム制作%% --%%サイトマップ制作%% --%%VScodeにて大まかにコーディング%% ~ 以下後期タスク --Blenderによる映像制作 --VScodeにて最終コーディング -検証 --学科サイトアンケート --SNSアンケート -まとめ --検証の結果からwebアプリの改善 --情報の整理 //***NotToDo //&color(red){やらないこと：何をするかではなく「何をしないか」を考える}; //&color(red){例：10人以上の会議には出ない。苦手なことは誰かに頼む・・}; ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。}; #hr ~ ~ **2026.07.16 -ページの再構成案 --1st page : 本サイトについての概要 --2nd page : 川崎病性冠動脈瘤について(一般論) --3rd page : 自身の治療について --4th page : 自身のこれまでの体験談 -二つに分けた昇華方法 --病気を第三者に紹介したり、自身と同じ病気にかかった子供達や親御さんに寄り添えるデザイン(現状の治療法、これまでの体験談) --病気を抱えている人が倒れた際第三者が助けたいときヘルプマークなどにQRコードやNFCタグなどを使って瞬時にカルテが出てきて今どうすればいいか確認できるデザイン ~ ~ **2026.07.09 ***概要の記入 -まとめ ***制作 -Blenderでの映像の技術調べ --__[[Youtube 赤血球のアニメーション>https://www.youtube.com/watch?v=Ldj_RtcXh3I]]__ --__[[Youtube Blender流体シミュレーション入門｜初心者がゼロから学ぶ基本>https://www.youtube.com/watch?v=rNridSMRBwQ&t=324s]]__ ~ ~ ~ **2026.07.02 ***概要の記入 -まとめ ~ ***制作 -「自分と病気」の項目の文章を再構想 --時系列 --その時々の自分の心情と身体情報の記入 --第三者からの視点 --第三者の理解度 ~ ~ **2026.06.25 -持病の解釈の間違い 今まで-血管が太くなった分血液のスピードを薬であげないと詰まると思っていた。 -現在-薬でスピードを上げるのでなく薬で血栓(血のかたまり)ができにくくすることで詰まりを押さえている。 ~ -ワイヤーフレームを改善 テイストを合わせるデザインを意識 #image(aset1.webp,50%) ~ ~ **2026.06.18 -ワイヤーフレームの大幅改善 見やすさを追求した。 #image(aset7.webp,50%) -Figmaによりサイトマップ制作 #image(Group_1.png) ~ ~ **2026.06.11 -自身の心臓のデータ(九州大学病院から入手) -Bee DICOM Viewerというアプリでデータを確認 __[[GoogleDriveリンク>https://drive.google.com/drive/folders/1FJAmn3MKPXlH23WS1uljqj_PylseDkC0?usp=drive_link]]__ ※リアルな心臓の画像のため閲覧注意 ~ ~ **2026.06.04 Illustratorでアイコン作成 #image(aset2.png) ~ ~ **2026.05.21 -WEBアプリのワイヤーフレーム作成 #image(wf1.png) ~ ~ **2026.05.14 -自分が通院している病院から自分の心臓のデータを入手 -説明が難しい病気 --肥大型心筋症 --先天性心疾患の術後 --1型糖尿病 --膠原病（SLE、関節リウマチなど） --線維筋痛症 --慢性疲労症候群（ME/CFS） --てんかん --潰瘍性大腸炎・クローン病 ~ ~ **2026.05.07 -Figmaによりサイトマップ制作 #image(site.png) ~ ~ **2026.04.30 //1 同じ症例での特化 //2 ヘルプマークを持っている人などぱっと見だけでは病状がわかりずらかったり説明する際に言葉だけでは難しい際にわかりやすくするウェブアプリデザイン // //マイナンバーに病気の概要を登録するなどプロダクトデザイン //原因不明や他者に説明しずらい病気をあらかた調べる。 -__[[川崎病性冠動脈瘤 概要>https://www.shouman.jp/disease/details/04_26_032/]]__ -__[[川崎病心臓血管後遺症の診断と治療に関する ガイドライン>https://www.j-circ.or.jp/cms/wp-content/uploads/2020/02/JCS2020_Fukazawa_Kobayashi.pdf]]__ ~ 自分自身が覚えている川崎病の経過 ~ 幼稚園 -年中？年長？川崎病福岡で発症 -熊本で何ヶ月か入院 -川崎病性冠動脈瘤(後遺症)により定期通院 -運動制限、内服薬している薬により血液の流れを早くしているそのため -出血時に止まらなかったりちょとした衝撃でアザができやすくなる ~ 小学校 -体育や運動会など見学がほとんど ~ 中学校 -運動制限により部活は吹奏楽をする -中１で大阪の国立循環器病研究センター にいき九州では受けられない検査などを徹底的行う。→結果問題なし現状通り内服薬を飲み続ける -トレッドミルやMRIなどの検査の積み重ねにより運動制限が緩くなってくる ~ 高校 -高校でも吹奏楽を続ける -運動制限もほぼ解け自分で判断するよう医師から促される ~ 大学 -熊本から福岡に移住 通院する病院が九大病院に代わる ~ ~ **2026.04.23 川崎病性冠動脈瘤 後遺症 あまり知られていない病気を見える化する 過去の記録と現在の日常 健康そうに見えるけど、実は心臓に爆弾を抱えているような感覚を表現 運動制限 優越感に浸りたい自分 やりたいけど何もできない 心臓などに疾患がある人は強いストレス、不安、鬱等の問題を抱える傾向がある イライラや敵意（タイプA行動）: せっかち、攻撃的、競争心が強い、敵意を感じやすいといった「タイプA行動パターン」は、心疾患と深く関連しています。 blender→3dcg→webに落とし込む ターゲット 親、友人 「見えない疾患」を抱える人が社会に存在することを直感的に理解させ、周囲の無理解（「元気そうなのになぜ休むの？」等）を解消する 自分が周りと変わらない生活をしすぎていて自分の体に後遺症があるのを忘れる時がある病院に行って再認識 症例が少ない 身近な友達にも川崎病になった子がいたが自分のような後遺症にはならなかった ~ 自分自身は自分自身の理解、解釈 ターゲットは未来の子供達、母親 ~ 年を追うごとに、 より内向的・保守的になる 健康状態に過敏になる（健康不安が強まる） 孤独や不安からうつ状態が重篤化しやすい ~ 表現コンセプト： "Glass Bomb"（透明な爆弾） 健康な肉体という「器」の中に、誰にも見えない「脆い回路」が走っている状態を可視化します。 1. Blenderでの3DCG表現 単なる医学的なモデルではなく、心理的な心臓のメタファーを制作します。 外殻（アバター）： ユーザー自身を模した、健康そうで透明度の高い質感（半透明のガラスやアクリル）。 冠動脈瘤の視覚化： * 心臓の一部に、今にも破裂しそうな「赤い脈動するクリスタル」や、複雑に絡まり赤黒く光る「導火線」を配置。 「タイプA」の表現： 焦りや敵意を感じた時、このクリスタルが激しく明滅し、ノイズ（グリッチ）が発生するエフェクト。 運動制限の制約： キャラクターが走ろうとすると、心臓から伸びる無数の「鎖」が地面に突き刺さり、物理的に進めなくなるアニメーション。 2. Webへの落とし込み（Interactive WebGL） Three.js や React Three Fiber を使い、見る人が「操作」できる体験を作ります。 「日常」と「診断」の切り替え（スクロール演出）： 通常時は、おしゃれなポートフォリオサイトのような明るいデザイン。 特定のポイントで「病院の再認識」を表現。画面にノイズが走り、色調が反転。3DCGのモデルが透過し、心臓の瘤（爆弾）がクローズアップされる。 「やりたいけどできない」の疑似体験： マウスやスクロールを速く動かしすぎると、画面が赤く染まり、心拍音が速まって操作が強制的にロック（一時停止）される。「無理をすると止まるしかない」という制限をシステムとして実装します。 ~ ~ **2026.04.16 ***テーマ案・テーマ設定のための調査 ~ ***研究テーマ案 -「日常の解像度を上げる：共感の多層アーカイブ」 --「楽しかった記憶（光）」と「困っていること（影）」を同時に集めることで、そのコミュニティや社会の「リアルな手触り」をみんなに共有 ~ -「見えない心臓の輪郭：川崎病既往歴を可視化し、共感を繋ぐコミュニケーション・デザイン」 --心臓の鼓動や血管の構造を3DCGで抽象的にモデリングします。川崎病特有の「血管の瘤（こぶ）」や「拡張」を、あえて生々しくないアートとして表現。 --見えないものを可視化する ~ ~ **2026.04.09 ***研究テーマ案 -みんながワクワクするモビリティを制作 --どこか遠出する際やいつもの通学通勤の時間を楽しくするため ~ -なぜ写真は同じ対象物でも人によって異なる写真が出てくるのか(同じ写真が生まれにくいのか) ~ -フォトボイス（PhotoVoice）を用いた地域課題の可視化 --内容: 特定のコミュニティの人々にカメラを渡し、彼らの視点で「地域の好きなところ」「困っていること」を撮影してもらうワークショップ。そのプロセスと結果を分析し、住民主導のまちづくり手法を研究する。 ~ -「移ろい」を記録するアーカイブ・デザイン --内容: 再開発で消えゆく街並みや、高齢化で失われつつある伝統行事を独自の視点で記録。単なる写真集ではなく、それをどう展示・共有すれば「次世代への継承」という社会的機能を持たせられるかを考察する。 ~ ~ ~ ~ ~