おやすみなさい、ごちそうやさん
スクロールで物語が展開するWEB絵本
- 浅田真優花
- Keywords:・・, ・・・, ・・・, ・・・
- 成果物
概要
これは何?
物語とイラストによって、心を落ち着かせリラックスできる時間を届けるスマートフォン用のWEB絵本サイト
背景と目的
現代社会では、仕事や対人関係、将来への不安など、さまざまな要因からストレスや精神的疲労を抱える人が増加している。特にその影響は「睡眠」に現れやすく、不眠や浅い眠りに悩む人も多い。そこで、心を穏やかにし、リラックスできる時間を提供することを目的として、WEB上で楽しめる絵本コンテンツを制作する。本企画では「睡眠」をテーマに、やさしい物語と穏やかなビジュアル、音や色彩などの要素を組み合わせることで、視覚的・感覚的に癒される体験を目指す。日常の中で緊張状態にある人々が、一時でも心を解きほぐし、「睡眠」に対して少しでもポジティブな気持ちになれるような“癒しの時間”を届けることを目的とする。
コンセプト
可愛らしいイラストと眠りをテーマにした物語で癒しの時間を提供する
ターゲット
リラックスしたい大人
疲れを感じていて癒しが欲しい人
成果物の仕様
- 形式・・・WEB
- サイズ・・・スマートフォンサイズ
- 時間尺・・・一周3〜4分
制作ツール
Visual Studio Code
GitHub
Illustrator
プロジェクトの期間
2025.09.15~2026.01.07
まとめ
- 柔らかいビジュアルとリラックスできる色である青色をメインに色を組み合わせることによって視覚から癒しを与えられた。
- オルゴールのBGM を流せるようにしたことでより物語の没入感を高めた。
- 装飾やボタンは最小限にとどめ、イラストと文字をメインにシンプルで見やすいサイトを制作できた。
調査
現状調査
- 青色はリラックス効果が期待できる
- 服交感神経が優位に働くため。海を連想し癒されるため。
先行事例(参考サイト)
技法・技術情報
プロジェクト管理
スケジュール
ガントチャート
ToDo
進捗記録
2025.12.1
サイト完成
2025.11.24
サイト制作の続き
2025.11.17
サイト制作
2025.10.27
イラスト完成❣️
2025.10.20
イラスト制作の続き
2025.10.13
イラスト制作の続き
2025.10.06
イラスト制作
絵柄のイメージ⬇️
サイト仕様の見直し
2025.09.29
Todo
- ターゲットの設定→ストレスや疲労を感じている大人
- スクロールの方向の決定→縦
- 動きの参考になるWEBを見つける
- 字コンテ
- サイト自体のラフスケッチ
- ワイヤーフレーム
- 技術確認(音楽のON・OFF)
→音楽付きスライドショー
2025.09.22
テーマ案
参考サイト
参考イラスト
コンテンツ
制作ツール
2025.09.15
私の関心
① 個人的関心(趣味・体験・日常の困りごと)
・・・慢性的な疲れ
② 社会的課題(環境問題、高齢化、都市、教育など)
・・・ストレスによる不眠
③ デザイン領域(グラフィック、映像、UI/UX、サイン、空間など)
・・・WEB
キーワードの選出
テーマ案
- 不眠症の人のためのWEBサイト
- 匿名つぶやきWEBサイト
- 視覚的な癒し要素の研究