カフェインとカラダのカラクリ
カフェインが身体に与える影響
- 浦朱里
- '''Keywords：caffeine,coffee,health,illustration,website
概要
これは何？
カフェインが身体に与える影響を、段階的に部位別にイラストと短い文で紹介するWebサイト。
背景と目的
飲料等へのカフェイン含有量の表示は義務ではなく、事業者が任意に行うこととされている。そのため消費者が意図せずカフェインを摂取する場合がある。
カフェインの適切な摂取量とリスクを広く啓発し、健康意識の向上に貢献することを目的とする。
コンセプト
医学的用語や複雑な情報は省き、直感的に理解できる視覚表現と短い文のシンプルな構成にする。
成果物の仕様
シングルページ構成のWebサイト
インスタントコーヒー(1杯,カフェイン80mg)
1,2杯/3,4,5杯/6杯に含まれるカフェイン摂取量に対しての、影響部位のイラストと説明文を段階ごとに表示する。
制作ツール
Illustrator,HTML,CSS
プロジェクトの期間
2025.04.15 - 2024.07.15
まとめ
調査
現状調査
＜事例＞
事例1
ペットボトル入りコーヒー飲料を中学生の子どもが飲んだところ、急性カフェイン中毒にな った。
事例2
ペットボトル飲料にカフェインゼロと書いてあるのに、後ろの表示を見ると少し含まれてい るような数字が書いてある。
先行事例
農林水産省 (食品中のカフェイン濃度)
食品安全委員会(妊婦,授乳中の女性,健康な子供及び青少年,健康な成人 海外の主なリスク評価)
厚生労働省
国民生活センター | 調べてみました、飲料のカフェイン含有量
コーヒー摂取と全死亡
技法・技術情報
プロジェクト管理
スケジュール
ToDo
進捗記録
2025.05.13
中間審査準備
1杯当たり80mg(2g使用した場合)
文部科学省「日本食品標準成分表2015年版（七訂）」より引用
学科サイト更新
HTML,CSS作成
- タイトル
- メニューバー
- about文
- 画面表示設定
アドバイス
- イラストレーターの書き出し
- アセットの書き出しからPNGで書き出す
- PCサイズは大きめで書き出す(115pxは3,4倍拡大させる)
- webの時は設定から単位をピクセルにする、大きさ14~16px
- 時間があればパソコン用のワイヤーフレーム作成
- HTML
- 背景はグレースケールの上から色をのせる
- スマホサイズのメニューは小さくする
2025.04.29
学科サイト更新
サイトマップ作成
ワイヤーフレーム作成
アドバイス
- サイトマップ
- それぞれにタイトルをつける（英語、日本語表記を合わせる）
- ワイヤーフレーム作成
- スマホサイズを想定して作成を始める
- アイコンは規則的に並べて、同じサイズにする
- 言葉が医学的 もっとカジュアル寄りの言葉で表す
- 縦で作成する(デザインカンプ)
2025.04.22
案決定
カフェインから受ける体への影響を視覚的に知らせるWebサイト制作
サイトマップ作成
参考サイト
アドバイス
- figmaでサイトマップの作成
- ワイヤーフレーム作成
- 信頼できるサイトを探して学科サイトに掲載
- about欄を作る
- コーヒー一杯のカフェイン量の目安を掲載する
2025.04.15
ガントチャート制作
案
2025.04.08
基礎調査、Webリンク
- 一言日記・タスク管理ノート
- カフェイン過敏症
- 美術館の鑑賞ガイド
