カフェインとカラダのカラクリ
カフェインがもたらす身体への作用 ・・・・・・・・・・・・・・・・
- 浦朱里
- '''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
まとめ
調査
現状調査
＜事例＞
事例1
ペットボトル入りコーヒー飲料を中学生の子どもが飲んだところ、急性カフェイン中毒にな った。
事例2
ペットボトル飲料にカフェインゼロと書いてあるのに、後ろの表示を見ると少し含まれてい るような数字が書いてある。
＜用語＞
・ノンカフェイン(カフェインを含まない)
・デカフェ(本来カフェインを含んでいる飲料や食物からカフェインを"取り除いた"もの)
・カフェインレス(カフェインを取り除くのではなく、最初からカフェイン含有量が少ない。カフェインの含有率が0.1％以下に抑えられたもの。)
それぞれ明確な数値基準は定まっていない。
先行事例
農林水産省 (食品中のカフェイン濃度)
食品安全委員会(妊婦,授乳中の女性,健康な子供及び青少年,健康な成人 海外の主なリスク評価)
厚生労働省
国民生活センター | 調べてみました、飲料のカフェイン含有量
コーヒー摂取と全死亡
技法・技術情報
プロジェクト管理
スケジュール
ToDo
メモ
1杯当たり80mg(2g使用した場合)
文部科学省「日本食品標準成分表2015年版（七訂）」より引用
2025.05.13
学科サイト更新
- サブタイトル
- 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
- 文化庁 博物館総合サイト
- 鑑賞ガイド・ワークシート-京都国立博物館
- 【学芸員が解説】美術館の楽しみ方！すぐに実践できる作品鑑賞のコツ
テーマ案３つ（カフェイン、日記、博物館）を出した。基礎調査をした。
main.jpg
wire frame.jpg
main.png
image.jpg
