カフェインとカラダのカラクリ
カフェインがもたらす身体への作用 ・・・・・・・・・・・・・・・・
- 浦朱里
- '''Keywords：caffeine,coffee,health,illustration,website
概要
これは何？
カフェイン摂取が身体に与える影響を、段階的に部位別にイラストと短文で紹介するWebサイト。
背景と目的
飲料等へのカフェイン含有量の表示は義務ではなく、事業者が任意に行うこととされている。そのため消費者が意図せず多量のカフェインを摂取する場合もある。
適切な摂取量とリスクを広く啓発し、健康意識の向上に貢献することを目的とする。
コンセプト
医学的用語や複雑な情報は省き、直感的に理解できる視覚表現と短文のシンプルな構成にする。
成果物の仕様
シングルページ構成のWebサイト
インスタントコーヒー(1杯140ml)1,2杯、3,4,5杯、6杯に含まれるカフェイン摂取量に対し、影響部位のイラストと説明文を段階的に表示する。
制作ツール
Illustrator,HTML,CSS
プロジェクトの期間
2025.04.15 - 2024.07.15
まとめ
調査
現状調査
世界保健機関では妊婦に対し、コーヒーを１日３から４杯までにすることを呼びかけてる。
英国食品基準庁では妊娠した女性に対して200mgに制限するよう求めている。
カナダ保健省では1日あたりのカフェイン摂取量として、健康な成人で400 mgまで、妊婦や授乳中、あるいは妊娠を予定している女性は300mg（コーヒーをマグカップで約２杯）までとしている。
先行事例
農林水産省 (食品中のカフェイン濃度)
食品安全委員会(妊婦,授乳中の女性,健康な子供及び青少年,健康な成人 海外の主なリスク評価)
厚生労働省
国民生活センター | 調べてみました、飲料のカフェイン含有量
コーヒー摂取と全死亡
技法・技術情報
プロジェクト管理
スケジュール
ToDo
進捗記録
2025.05.13
学科サイト更新
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リンク
- 一言日記・タスク管理ノート
- カフェイン過敏症
- 美術館の鑑賞ガイド
