カフェインとカラダのカラクリ
カフェインが身体に与える影響
- 浦朱里
- Keywords：caffeine,coffee,health,illustration,website
概要
これは何？
カフェインが身体に与える影響を、段階的に部位別にイラストと短い文で紹介するWebサイト。
背景と目的
飲料等へのカフェイン含有量の表示は義務ではなく、事業者が任意に行うこととされている。そのため消費者が意図せずカフェインを摂取する場合がある。
カフェインの適切な摂取量とリスクを広く啓発し、健康意識の向上に貢献することを目的とする。
コンセプト
医学的用語や複雑な情報は省き、直感的に理解できる視覚表現と短い文のシンプルな構成にする。
成果物の仕様
シングルページ構成のWebサイト
インスタントコーヒー(1杯,カフェイン80mg)
1,2杯/3,4,5杯/6杯に含まれるカフェイン摂取量に対しての、影響部位のイラストと説明文を段階ごとに表示する。
制作ツール
Illustrator,HTML,CSS
プロジェクトの期間
2025.04.15 -
まとめ
調査
現状調査
カフェインの多量摂取により、嘔吐や動悸、場合によっては痙攣などがみられ、医療機関に救急搬送され入院 が必要となることもある。また2015年12月には九州地方の 20 代男性がエナジードリンクと眠気防止薬を⻑期間飲み続け、死亡した。このように一度に多量のカフェインを摂取するカフェイン中毒と、長期的にカフェインを摂取し続けるカフェイン依存症により健康に被害を及ぼすことが問題となっている。
先行事例
農林水産省 (食品中のカフェイン濃度)
食品安全委員会(妊婦,授乳中の女性,健康な子供及び青少年,健康な成人 海外の主なリスク評価)
厚生労働省
国民生活センター | 調べてみました、飲料のカフェイン含有量
コーヒー摂取と全死亡
技法・技術情報
プロジェクト管理
スケジュール
ToDo
2025.06.03
学科サイト更新
- トップイラスト変更に伴いイメージ写真変更
- ワイヤーフレーム、サイトマップ載せる
Webサイト制作
- トップイラスト改善、作成
2025.05.27
学科サイト更新
- keyword改善
- 現状調査見直し
Webサイト(HTML,CSS)作成
- 背景制作
- トップのイラスト入れ
- about文章
- メニューバー
ワイヤーフレーム、サイトマップ
- 修正
2025.05.20
学科サイト更新
- 進捗記録
- タイトル
中間審査準備
- ワイヤーフレーム改善
- 発表内容作成
- タイトル考え直し
調査
- 用語
- ノンカフェイン(カフェインを含まない)
- デカフェ(本来カフェインを含んでいる飲料や食物からカフェインを"取り除いた"もの)
- カフェインレス(カフェインを取り除くのではなく、最初からカフェイン含有量が少ないもの。カフェインの含有率が0.1％以下に抑えられたもの。)
それぞれ明確な数値基準は定まっていない。
2025.05.13
中間審査準備
1杯当たり80mg(2g使用した場合)
文部科学省「日本食品標準成分表2015年版（七訂）」より引用
学科サイト更新
- サブタイトル
- keywords
- メインビジュアル
HTML,CSS作成
- タイトル
- メニューバー
- about文
- 画面表示設定
アドバイス
- イラストレーターの書き出し
- アセットの書き出しからPNGで書き出す
- PCサイズは大きめで書き出す(115pxは3,4倍拡大させる)
- webの時は設定から単位をピクセルにする、大きさ14~16px
- 時間があればパソコン用のワイヤーフレーム作成
- HTML
- 背景はグレースケールの上から色をのせる
- スマホサイズのメニューは小さくする
2025.04.29
学科サイト更新
- 概要、調査欄記入
サイトマップ作成
ワイヤーフレーム作成
アドバイス
- サイトマップ
- それぞれにタイトルをつける（英語、日本語表記を合わせる）
- それぞれにタイトルをつける（英語、日本語表記を合わせる）
- ワイヤーフレーム作成
- スマホサイズを想定して作成を始める
- アイコンは規則的に並べて、同じサイズにする
- 言葉が医学的 もっとカジュアル寄りの言葉で表す
- 縦で作成する(デザインカンプ)
2025.04.22
案決定
カフェインから受ける体への影響を視覚的に知らせるWebサイト制作
サイトマップ作成
参考サイト
アドバイス
- figmaでサイトマップの作成
- ワイヤーフレーム作成
- 信頼できるサイトを探して学科サイトに掲載
- about欄を作る
- コーヒー一杯のカフェイン量の目安を掲載する
2025.04.15
ガントチャート制作
案
- ブラックコーヒーを飲むごとの身体の変化をWebサイトとアニメーションでまとめる。
コラムに飲料別の基本的なカフェイン量、個人の適性摂取量を載せる。 - 構成例
INTLOOP20周年特設サイト - イメージ
OneDriveリンク
2025.04.08
基礎調査、Webリンク
- 一言日記・タスク管理ノート
- カフェイン過敏症
- 美術館の鑑賞ガイド
- 福岡市観光サイトYOKANAVI
- 文化庁 博物館総合サイト
- 鑑賞ガイド・ワークシート-京都国立博物館
- 【学芸員が解説】美術館の楽しみ方！すぐに実践できる作品鑑賞のコツ
テーマ案３つ（カフェイン、日記、博物館）を出した。基礎調査をした。
site map.png
main.jpg
wire frame.jpg
image.jpg
