Glass Bomb
持病を共有するwebアプリ
概要
これは何？
目に見えない自分の持病や、それと付き合ってきた時間を、視覚的な形に落とし込んだものです
背景と目的
幼い頃から川崎病の後遺症と向き合い、現在も通院生活を送っています。しかし、いざ友人に自分の持病を説明しようとすると、言葉に詰まってしまう自分に気づきました。この「曖昧な理解」によるもどかしさを解消するため、自身の症例を可視化するものです。
自分自身の理解を深めることはもちろん、この記録が将来、同じ病気を抱える子どもたちや、不安の中にいるご両親にとっての「道しるべ」となることを目指しています。
コンセプト
Webアプリを見ただけで簡単に病状がわかる
成果物の仕様
Webアプリ
制作ツール
- VScode
- illustrator
- Blender
プロジェクトの期間
2026.04.09 - 2026.XX.XX
※通年で行う予定
まとめ
- 前期まとめ
自身の病気の情報収集とwebアプリのUI設計を行った。
後期ではBlenderを用いた視覚的にわかりやすい映像を取り入れwebアプリの完成度を高めていく予定である
- 後期まとめ
調査
現状調査
現在、川崎病やその後遺症である冠動脈瘤に関するWebサイトは多数存在するが、詳細な情報が不足している記事が少なくない。また、専門的な情報があっても文字中心の構成が多く、一般の読者には理解しにくいという課題がある。さらに、患者自身が自身の症例をもとにリアルな体験や経過を発信している事例はほとんど見られない。
先行事例
技法・技術情報
プロジェクト管理
スケジュール
ToDo
- テーマ設定
- 情報収集
- 制作
ワイヤーフレーム制作サイトマップ制作VScodeにて大まかにコーディング
以下後期タスク- Blenderによる映像制作
- VScodeにて最終コーディング
- 検証
- まとめ
進捗記録
2026.07.09
概要の記入
制作
2026.07.02
概要の記入
制作
- 「自分と病気」の項目の文章を再構想
- 時系列
- その時々の自分の心情と身体情報の記入
- 第三者からの視点
- 第三者の理解度
2026.06.25
- 持病の解釈の間違い
今まで-血管が太くなった分血液のスピードを薬であげないと詰まると思っていた。
- 現在-薬でスピードを上げるのでなく薬で血栓(血のかたまり)ができにくくすることで詰まりを押さえている。
- ワイヤーフレームを改善
テイストを合わせるデザインを意識
2026.06.18
- ワイヤーフレームの大幅改善
見やすさを追求した。
- Figmaによりサイトマップ制作
2026.06.11
- 自身の心臓のデータ(九州大学病院から入手)
- Bee DICOM Viewerというアプリでデータを確認
GoogleDriveリンク
※リアルな心臓の画像のため閲覧注意
2026.06.04
Illustratorでアイコン作成
2026.05.21
2026.05.14
- 自分が通院している病院から自分の心臓のデータを入手
- 説明が難しい病気
- 肥大型心筋症
- 先天性心疾患の術後
- 1型糖尿病
- 膠原病（SLE、関節リウマチなど）
- 線維筋痛症
- 慢性疲労症候群（ME/CFS）
- てんかん
- 潰瘍性大腸炎・クローン病
2026.05.07
2026.04.30
- 川崎病性冠動脈瘤 概要
- 川崎病心臓血管後遺症の診断と治療に関する ガイドライン
自分自身が覚えている川崎病の経過
幼稚園
- 年中？年長？川崎病福岡で発症
- 熊本で何ヶ月か入院
- 川崎病性冠動脈瘤(後遺症)により定期通院
- 運動制限、内服薬している薬により血液の流れを早くしているそのため
- 出血時に止まらなかったりちょとした衝撃でアザができやすくなる
小学校
- 体育や運動会など見学がほとんど
中学校
- 運動制限により部活は吹奏楽をする
- 中１で大阪の国立循環器病研究センター にいき九州では受けられない検査などを徹底的行う。→結果問題なし現状通り内服薬を飲み続ける
- トレッドミルや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）を用いた地域課題の可視化
- 内容: 特定のコミュニティの人々にカメラを渡し、彼らの視点で「地域の好きなところ」「困っていること」を撮影してもらうワークショップ。そのプロセスと結果を分析し、住民主導のまちづくり手法を研究する。
- 「移ろい」を記録するアーカイブ・デザイン
- 内容: 再開発で消えゆく街並みや、高齢化で失われつつある伝統行事を独自の視点で記録。単なる写真集ではなく、それをどう展示・共有すれば「次世代への継承」という社会的機能を持たせられるかを考察する。
