#author("2025-12-08T12:18:48+09:00;2025-12-08T11:51:55+09:00","default:member","member") #author("2025-12-08T12:24:19+09:00;2025-12-08T11:51:55+09:00","default:member","member") *おやすみなさい、ごちそうやさん スクロールで物語が展開するWEB絵本 #image(main.png) -''浅田真優花'' -'''Keywords：癒し, 睡眠, 絵本''' -[[成果物>https://s2ms2.github.io/oyasumigochisouyasan/]] //-__[[相互評価シート>https://www.example.com]]__ ← ここからコメントをお願いします。 ~ //***CONTENTS //#contents2_1 //~ **概要 ***これは何？ //&color(red){これは何か・・を簡潔に}; 物語とイラストによって、心を落ち着かせリラックスできる時間を届けるスマートフォン用のWEB絵本サイト ~ ***背景と目的 //&color(red){プロジェクトの背景と目的}; 現代社会では、仕事や対人関係、将来への不安など、さまざまな要因からストレスや精神的疲労を抱える人が増加している。特にその影響は「睡眠」に現れやすく、不眠や浅い眠りに悩む人も多い。そこで、心を穏やかにし、リラックスできる時間を提供することを目的として、WEB上で楽しめる絵本コンテンツを制作する。本企画では「睡眠」をテーマに、やさしい物語と穏やかなビジュアル、音や色彩などの要素を組み合わせることで、視覚的・感覚的に癒される体験を目指す。日常の中で緊張状態にある人々が、一時でも心を解きほぐし、「睡眠」に対して少しでもポジティブな気持ちになれるような“癒しの時間”を届けることを目的とする。 ~ ***コンセプト //&color(red){基本的な考え方、枠組み、視点など}; 可愛らしいイラストと眠りをテーマにした物語で癒しの時間を提供する ~ ***ターゲット リラックスしたい大人 疲れを感じていて癒しが欲しい人 ~ ***成果物の仕様 //&color(red){&small(成果物の形式・サイズ・時間尺等);}; -形式・・・WEB -サイズ・・・スマートフォンサイズ -時間尺・・・一周３〜４分 ~ //***メンバー //&color(red){共同プロジェクトの場合のみ｜メンバーと役割分担を明記}; //~ ***制作ツール //&color(red){使用するツール｜ハードウエア・ソフトウエア}; Visual Studio Code GitHub Illustrator ~ ***プロジェクトの期間 //&color(red){プロジェクトの期間｜20XX.XX.XX - 20XX.XX.XX }; 2025.09.15~2026.01.07 ~ ***まとめ //&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。}; -柔らかいビジュアルとリラックスできる色である青色をメインに色を組み合わせることによって視覚から癒しを与えられた。 -オルゴールのBGM を流せるようにしたことでより物語の没入感を高めた。 -装飾やボタンは最小限にとどめ、イラストと文字をメインにシンプルで見やすいサイトを制作できた。 ~ ~ **調査 ***現状調査 //&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し}; //-[[日本での不眠症の割合（R4・厚生労働省）>https://seikatsusyukanbyo.com/statistics/2024/010762.php]] -[[ 大人が絵本を読むと得られる効果>https://mymo-ibank.com/money/3941#:~:text=%E5%AE%89%E7%9C%A0%E3%83%BB%E3%83%AA%E3%83%A9%E3%83%83%E3%82%AF%E3%82%B9%E5%8A%B9%E6%9E%9C,%E3%81%93%E3%81%A8%E3%82%82%E5%88%86%E3%81%8B%E3%81%A3%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99%E3%80%82]] --安眠・リラックス効果 --想像力や考える力の向上 -青色はリラックス効果が期待できる --服交感神経が優位に働くため。海を連想し癒されるため。 ~ ***先行事例(参考サイト) //&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など}; -[[眠れない夜を楽しむアプリ>https://yohitsuji.com/]] ~ ***技法・技術情報 //&color(red){プロジェクトの遂行に必要な技法・技術に関する調査}; -[[ホームページ作成は難しい？難易度や作り方を解説>https://wepage.com/blog/article/215/index.html]] ~ ~ **プロジェクト管理 ***スケジュール //&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。}; [[ガントチャート>https://docs.google.com/spreadsheets/d/1jQQvQeYw__6ztthz3VI8qRqAMPsClC2K-PqgRvYwkLc/edit?usp=sharing]] ~ ***ToDo //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」}; -技術確認（音楽のON・OFF） →[[音楽付きスライドショー>https://s2ms2.github.io/test3/]] -字コンテ →[[「おやすみなさい、ごちそうやさん」>https://docs.google.com/document/d/1lLjJZu7abuZrwmdWDhrmv15uZdcyGzovjIKZQHdl1Ig/edit?usp=sharing]] -イラスト制作 →-[[Googleドライブ>https://drive.google.com/file/d/1Inlpsf77UysfKYeh9MwX0WPAKJVqwA8j/view?usp=sharing]] -WEB制作 //***NotToDo //&color(red){やらないこと：何をするかではなく「何をしないか」を考える}; //&color(red){例：10人以上の会議には出ない。苦手なことは誰かに頼む・・}; ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。}; #hr ~ ~ **2025.12.08 ***最終発表でいただいた講評 -改善点 --PCのサイズでも対応するようにする --文字の向きとスワイプの向きを合わせる --キャラクターの動きとスワイプの向きをリンクさせる --ボイス付きver.も見たい --サイトにどう誘導するか --見終わった後の余韻をどうするか --もう一度見てもらったり、日常で思い出してもらう工夫 --GIFで動かしてみる --キラキラ、ゆらゆらさせてみる ~ -高評価な点 --癒されそう --世界観ができている --パンケーキの質感が良い ~ #image(comments.jpg) ~ ~ **2025.12.01 ***サイト完成 -[[成果物>https://s2ms2.github.io/oyasumigochisouyasan/]] ~ #image(pancake.jpg) ~ ~ **2025.11.24 ***サイト制作の続き -２年前期以来WEB制作に触れていなかったので思い出しながらの作業でしたが、なんとか形になりそうな感じになった。 -課題としては、もっとコードについて知識を増やすことや、CSS、JSの苦手意識を減らしていくこと。 ~ ~ **2025.11.17 ***サイト制作 -VS codeで制作 --[[GitHub Copilotについて>https://qiita.com/RyoWakabayashi/items/1207128e88669c76bf5f]] ---VS codeにAIの拡張機能が追加されたと聞いて、コード書きが苦手な私でも挑戦しやすいなと思った。実際にAIを使ってみると自分の気づかなかった間違っている箇所を修正してくれるので、積極的に使って効率化を図りたいと思った。 ~ ~ **2025.10.27 ***イラスト完成❣️ -[[Googleドライブ>https://drive.google.com/file/d/1Inlpsf77UysfKYeh9MwX0WPAKJVqwA8j/view?usp=sharing]] ~ #image(22.png) ~ -全22枚のイラスト -青〜緑の癒し効果が期待できる配色 ~ ~ **2025.10.20 ***イラスト制作の続き -[[夜の色ってどんな色？>https://iro-color.com/colorchart/word/iro.php?q=%E5%A4%9C]] -[[癒しとは？>https://note.com/hisui_greenroom/n/n5b64379525e7]] -[[世の中の人たちが癒されるもの>https://milltalk.jp/boards/3764]] --癒しとは、安心➕五感が心地よく刺激されるもの。 --動物、子供、自然、人などが多い。 ~ ~ **2025.10.13 ***イラスト制作の続き -[[Illustratorでテクスチャでオブジェクトに質感を追加する⽅法>https://www.adobe.com/jp/learn/illustrator/web/mezzotint-grain-effect]] -[[Illustratorレイヤー整理＆活用術>https://liginc.co.jp/577967]] ~ #image(irare.jpg) ↑実際にテクスチャを使用してみました ~ ~ **2025.10.06 ***イラスト制作 絵柄のイメージ⬇️ #image(ilust.jpg) ~ ***サイト仕様の見直し -縦スワイプ➡️横スワイプ --絵本らしさをデジタルで表現するため ~ ~ **2025.09.29 ~ ***Todo -ターゲットの設定→ストレスや疲労を感じている大人 -スクロールの方向の決定→縦 -動きの参考になるWEBを見つける -字コンテ -サイト自体のラフスケッチ -ワイヤーフレーム -技術確認（音楽のON・OFF） →[[音楽付きスライドショー>https://s2ms2.github.io/test3/]] ~ ~ **2025.09.22 ~ ***テーマ案 -WEB絵本 ✔️ -音楽とスライドショー ~ ***参考サイト -[[インディゴ白書>https://45r.jp/ja/indigo-hakusho/]] -[[株式会社マルキョウ採用サイト>https://www.marukyo-web.co.jp/newgraduates2024/]] ~ ***参考イラスト -[[Pinterest>https://pin.it/6vPzR8jsy]] ~ ***コンテンツ -絵本（イラストと文字） -音楽 ~ ***制作ツール -Illustrator -アイビスペイント //***絵本イラストの描き方 //***シナリオ //***絵コンテ ~ ~ **2025.09.15 ~ ***私の関心 ① 個人的関心（趣味・体験・日常の困りごと） ・・・慢性的な疲れ ② 社会的課題（環境問題、高齢化、都市、教育など） ・・・ストレスによる不眠 ③ デザイン領域（グラフィック、映像、UI/UX、サイン、空間など） ・・・WEB ~ ***キーワードの選出 -癒し -睡眠 -森 -音楽 -動物 -夜 ~ ***テーマ案 -不眠症の人のためのWEBサイト -匿名つぶやきWEBサイト -視覚的な癒し要素の研究 ~ ~ ~ //**20XX.XX.XX //***XXXX //-◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯ //-◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯ //~ //***XXXXXXX //-◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯ //-◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯