#author("2025-07-26T07:59:44+09:00","default:member","member") #author("2025-07-26T08:00:17+09:00","default:member","member") *カフェインとカラダのカラクリ カフェインが身体に与える影響 ~ #image(main.jpg) ~ -''浦朱里'' -'''Keywords：caffeine,coffee,health,illustration,website''' - https://west0423.github.io/caffeine-my-website/ ~ **概要 ***これは何？ カフェインが身体に与える影響を、段階的に部位別にイラストと短い文で紹介するWebサイト。 //&color(red){これは何か・・を簡潔に}; ~ ***背景と目的 飲料等へのカフェイン含有量の表示は義務ではなく、事業者が任意に行うこととされている。そのため消費者が意図せずカフェインを摂取する場合がある。 カフェインの適切な摂取量とリスクを広く啓発し、健康意識の向上に貢献することを目的とする。 //&color(red){プロジェクトの背景と目的}; ~ ***コンセプト 医学的用語や複雑な情報は省き、直感的に理解できる視覚表現と短い文のシンプルな構成にする。 //&color(red){基本的な考え方、枠組み、視点など}; ~ ***成果物の仕様 シングルページ構成のWebサイト インスタントコーヒー(1杯,カフェイン80mg) 1,2杯/3,4,5杯/6杯に含まれるカフェイン摂取量に対しての、影響部位のイラストと説明文を段階ごとに表示する。 [[完成サイト>https://west0423.github.io/caffeine-my-website/]] ~ ***制作ツール Illustrator,HTML,CSS ~ ***プロジェクトの期間 2025.04.15 - 2025.07.15 ~ ***まとめ カフェインが体に与える影響とカフェインの基礎知識として飲み物ごとのカフェイン含有量表と最大摂取量表をイラストと短い文章で作成した。 イラストは全体の雰囲気が統一されるように簡易的なイラストにすることを心がけた。 短い文章は大事なところをピックアップして、文章の長さなど全体を統一することが必要だと感じた。 今後はfade-inやアフターエフェクトなどを用いてより視覚的に説明するwebサイトを作成していきたい。 ~ ~ **調査 ***現状調査 カフェインの多量摂取により、嘔吐や動悸、場合によっては痙攣などがみられ、医療機関に救急搬送され入院 が必要となることもある。また2015年12月には九州地方の 20 代男性がエナジードリンクと眠気防止薬を⻑期間飲み続け、死亡した。このように長期的にカフェインを摂取し続けるカフェイン依存症と一度に多量のカフェインを摂取するカフェイン中毒が問題となっている。 ~ ***先行事例 [[農林水産省 (食品中のカフェイン濃度)>https://www.maff.go.jp/j/syouan/seisaku/risk_analysis/priority/hazard_chem/caffeine.html?utm_source=chatgpt.com]] [[食品安全委員会(妊婦,授乳中の女性,健康な子供及び青少年,健康な成人 海外の主なリスク評価)>https://www.fsc.go.jp/factsheets/index.data/factsheets_caffeine.pdf]] [[厚生労働省>https://www.mhlw.go.jp/stf/seisakunitsuite/bunya/0000170477.html?utm_source=chatgpt.com]] [[国民生活センター | 調べてみました、飲料のカフェイン含有量>https://www.kokusen.go.jp/kiken/pdf/366dl_kiken.pdf]] ~ ***技法・技術情報 ~ ~ **プロジェクト管理 ***スケジュール -[[ガントチャートリンク>https://ksumail-my.sharepoint.com/:x:/g/personal/k23as010_st_kyusan-u_ac_jp/EcAsq3z20plPp_FbAF80g0IBbHF1Q05AIPV3AeZRJWYAbw?e=zKryaK]] ~ ***ToDo //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」}; ~ //***NotToDo //&color(red){やらないこと：何をするかではなく「何をしないか」を考える}; //&color(red){例：10人以上の会議には出ない。苦手なことは誰かに頼む・・}; ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。}; #hr ~ ~ **2025.07.15 ~ ***ブラッシュアップ -学科サイト更新 --webサイトリンク変更、掲載 --進捗記録未記入欄記入 ~ ~ **2025.07.08 ~ ***ブラッシュアップ -含有量(抹茶,インスタントコーヒー)表示変更 -カフェイン最大摂取量(青少年)表示変更 ~ ~ **2025.07.02 ⭐︎⭐︎最終審査日⭐︎⭐︎ ~ &color(red)⭐︎⭐︎最終審査日⭐︎⭐︎ ***ブラッシュアップ -基礎知識欄上に移動 -↑に伴いハンバーガーメニュー並び変更 ~ ~ **2025.06.24 ~ ***Webサイト(HTML,CSS.)作成 -カラダへの影響 --イラスト修正 --文章作成 -カフェイン基礎知識 --カフェイン摂取量(表、イラスト) --モーダルウィンドウ設定 -fade-in全削除 ~ ~ ***学科サイト更新 -webサイトリンク掲載 ~ ~ **2025.06.17 ~ ***Webサイト(HTML,CSS.)作成 -背景修正 --グレースケール画像のサイズ軽減 --重複消す -カラダへの影響飛ぶボタン作成 -スマホサイズの対応画面作成 --ハンバーガーメニュー作成 -残っていたカラダへの影響イラスト作成,修正 --3.4.5(脳・神経、胃・消化器官) --6杯以上(脳・神経、胃・消化器官、筋肉・運動神経) ~ ~ **2025.06.10 ~ ***Webサイト(HTML,CSS.)作成 -JavaScript追加 -カラダへの影響イラスト作成 --1.2杯(脳・神経、心臓・血管、胃・消化器官、筋肉・運動神経) --3.4.5(心臓・血管、胃・消化器官、筋肉・運動神経) --６杯以上(脳・神経、心臓・血管) -影響文章作成 -フォント変更 ~ ~ **2025.06.03 ~ ***学科サイト更新 -トップイラスト変更に伴いイメージ写真変更 -ワイヤーフレーム、サイトマップ載せる #image(site map.png) ~ ***Webサイト制作 -トップイラスト改善、作成 ~ ~ **2025.05.27 ~ ***学科サイト更新 -keyword改善 -現状調査見直し ~ ***Webサイト(HTML,CSS)作成 -背景制作 -トップのイラスト入れ -about文章 -メニューバー ~ ***ワイヤーフレーム、サイトマップ -修正 ~ ~ **2025.05.20 ~ ***学科サイト更新 -進捗記録 -タイトル ~ ***中間審査準備 -ワイヤーフレーム改善 -発表内容作成 -タイトル考え直し ~ ***調査 -用語 --ノンカフェイン(カフェインを含まない) --デカフェ(本来カフェインを含んでいる飲料や食物からカフェインを"取り除いた"もの) --カフェインレス(カフェインを取り除くのではなく、最初からカフェイン含有量が少ないもの。カフェインの含有率が0.1％以下に抑えられたもの。) それぞれ明確な数値基準は定まっていない。 ~ ~ **2025.05.13 ~ ***中間審査準備 1杯当たり80mg(2g使用した場合) 文部科学省「日本食品標準成分表2015年版（七訂）」より引用 -[[ワイヤーフレーム>https://ksumail-my.sharepoint.com/:i:/g/personal/k23as010_st_kyusan-u_ac_jp/EVqeHHiJp4FFllBa6RVNEMQBvNnqgJP3fFEe_La5_jGruw?e=eoHcCY]] -[[サイトマップ>https://www.figma.com/board/AZHcD1svrWe2wwTWygsksF/%E3%82%AB%E3%83%95%E3%82%A7%E3%82%A4%E3%83%B3%E3%80%80%E3%82%B5%E3%82%A4%E3%83%88%E3%83%9E%E3%83%83%E3%83%97?t=XXO1PsaGlsyV4dUw-6]] ~ ***学科サイト更新 -サブタイトル -keywords -メインビジュアル ~ ***HTML,CSS作成 -タイトル -メニューバー -about文 -画面表示設定 ~ ***アドバイス -イラストレーターの書き出し --アセットの書き出しからPNGで書き出す --PCサイズは大きめで書き出す(115pxは3,4倍拡大させる) --webの時は設定から単位をピクセルにする、大きさ14~16px --時間があればパソコン用のワイヤーフレーム作成 -HTML --背景はグレースケールの上から色をのせる --スマホサイズのメニューは小さくする ~ ~ **2025.04.29 ~ ***学科サイト更新 -概要、調査欄記入 ~ ***サイトマップ作成 -[[Figmaリンク>https://www.figma.com/board/AZHcD1svrWe2wwTWygsksF/%E3%82%AB%E3%83%95%E3%82%A7%E3%82%A4%E3%83%B3%E3%80%80%E3%82%B5%E3%82%A4%E3%83%88%E3%83%9E%E3%83%83%E3%83%97?t=XXO1PsaGlsyV4dUw-6]] ~ ***ワイヤーフレーム作成 -[[onedriveリンク>https://ksumail-my.sharepoint.com/:i:/g/personal/k23as010_st_kyusan-u_ac_jp/EVqeHHiJp4FFllBa6RVNEMQBvNnqgJP3fFEe_La5_jGruw?e=eoHcCY]] ~ ***アドバイス -サイトマップ --それぞれにタイトルをつける（英語、日本語表記を合わせる） ~ -ワイヤーフレーム作成 --スマホサイズを想定して作成を始める --アイコンは規則的に並べて、同じサイズにする --言葉が医学的 もっとカジュアル寄りの言葉で表す --縦で作成する(デザインカンプ) ~ ~ **2025.04.22 ~ ***案決定 カフェインから受ける体への影響を視覚的に知らせるWebサイト制作 ~ ***サイトマップ作成 -[[サイトマップリンク Figma>https://www.figma.com/board/AZHcD1svrWe2wwTWygsksF/%E3%82%AB%E3%83%95%E3%82%A7%E3%82%A4%E3%83%B3%E3%80%80%E3%82%B5%E3%82%A4%E3%83%88%E3%83%9E%E3%83%83%E3%83%97?t=XXO1PsaGlsyV4dUw-6]] ~ ***参考サイト -[[独立行政法人国民生活センター>https://www.kokusen.go.jp/pdf/n-20211104_3.pdf]] ~ ***アドバイス -figmaでサイトマップの作成 -ワイヤーフレーム作成 -信頼できるサイトを探して学科サイトに掲載 -about欄を作る -コーヒー一杯のカフェイン量の目安を掲載する ~ ~ **2025.04.15 ~ ***ガントチャート制作 -[[ガントチャートリンク>https://ksumail-my.sharepoint.com/:x:/g/personal/k23as010_st_kyusan-u_ac_jp/EcAsq3z20plPp_FbAF80g0IBbHF1Q05AIPV3AeZRJWYAbw?e=zKryaK]] ~ ***案 -ブラックコーヒーを飲むごとの身体の変化をWebサイトとアニメーションでまとめる。 コラムに飲料別の基本的なカフェイン量、個人の適性摂取量を載せる。 -構成例 [[INTLOOP20周年特設サイト>https://www.intloop.com/company/history/20th/]] -イメージ [[OneDriveリンク>https://ksumail-my.sharepoint.com/:i:/g/personal/k23as010_st_kyusan-u_ac_jp/EYgVFuNzBj1PvP0iIa7ehJoB72Kh-_IB6RmMjJ9HBHW5Ug?e=DDhh2Z]] ~ ~ **2025.04.08 ~ ***基礎調査、Webリンク -一言日記・タスク管理ノート --[[SUNNY>https://hello-iroha.com/sunny/sched_idea/54/]] -カフェイン過敏症 --[[カフェインの効果を解説！効力時間やデメリットについても紹介>https://alinamin.jp/tired/caffeine-effect.html]] --[[独立行政法人国民生活センター>https://www.kokusen.go.jp/news/data/n-20211104_3.html#:~:text=%E9%A3%B2%E6%96%99%E7%AD%89%E3%81%B8%E3%81%AE%E3%82%AB%E3%83%95%E3%82%A7,%E3%81%82%E3%82%8B%E3%81%A8%E8%80%83%E3%81%88%E3%82%89%E3%82%8C%E3%81%BE%E3%81%99%E3%80%82]] --[[ミラシルby第一生命>https://mirashiru.dai-ichi-life.co.jp/article/37816]] -美術館の鑑賞ガイド --[[福岡市観光サイトYOKANAVI>https://yokanavi.com/features/65542]] --[[文化庁 博物館総合サイト>https://museum.bunka.go.jp/museum/]] --[[鑑賞ガイド・ワークシート-京都国立博物館>https://www.kyohaku.go.jp/jp/learn/assets/guides/knm-guide_2021.pdf]] --[[【学芸員が解説】美術館の楽しみ方！すぐに実践できる作品鑑賞のコツ>https://bei-cham.com/museum-appreciation/]] ~ テーマ案３つ（カフェイン、日記、博物館）を出した。基礎調査をした。 ~ ~