カフェインとカラダのカラクリ
カフェインがもたらす身体への作用 ・・・・・・・・・・・・・・・・
メインビジュアル、あるいは
プロジェクトの最新の状態を視覚的に掲載
- 浦朱里
- '''Keywords：caffeine,coffee,health,illustration,website
概要
これは何？
カフェイン摂取が身体に与える影響を、段階的に部位別にイラストと短文で紹介するWebサイト。
背景と目的
日常的に摂取されるカフェインは、個人差のある健康影響を引き起こす可能性がある。
適切な摂取量とリスクを広く啓発し、健康意識の向上に貢献することを目的とする。
コンセプト
医学的用語や複雑な情報は省き、直感的に理解できる視覚表現と短文のシンプルな構成にする。
成果物の仕様
シングルページ構成のWebサイト
各カフェイン摂取量に対し、影響部位のイラストと説明文を段階的に表示する。
メンバー
制作ツール
Illustrator,HTML,CSS
プロジェクトの期間
まとめ
調査
現状調査
飲料等へのカフェイン含有量の表示は義務ではなく、事業者が任意に行うこととされており、 表示されていない商品も多く販売されている。消費者が意図せず多量のカフェインを摂取する場合もある。
先行事例
農林水産省 (食品中のカフェイン濃度)
食品安全委員会(妊婦,授乳中の女性,健康な子供及び青少年,健康な成人 海外の主なリスク評価)
厚生労働省
国民生活センター | 調べてみました、飲料のカフェイン含有量
[[コーヒー摂取と全死亡>https://epi.ncc.go.jp/jphc/outcome/3527.html
技法・技術情報
プロジェクト管理
スケジュール
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リンク
- 一言日記・タスク管理ノート
- カフェイン過敏症
- 美術館の鑑賞ガイド
