#author("2026-07-11T15:34:07+09:00","default:member","member") #author("2026-07-17T16:46:05+09:00","default:member","member") *cultivate a break 休憩という存在に向き合って、1日をより良く過ごすためのタイマーサイト #image(TopImg.jpg) -''REIJI HORI'' -'''break,web''' -[[前期成果物>https://ksumail-my.sharepoint.com/:f:/g/personal/k23as027_st_kyusan-u_ac_jp/IgAjRlKpnEyvTar67Wp8kUWKAZ9Q-jPEjr4F5yTDKOcHdiM?e=LchfVr]] //-__[[相互評価シート>https://www.example.com]]__ ← ここからコメントをお願いします。 ~ //***CONTENTS //#contents2_1 //~ **概要 ***これは何？ //&color(red){これは何か・・を簡潔に}; 休憩という存在に向き合って、1日をより良く過ごすためのタイマーサイト ~ ***背景と目的 //&color(red){プロジェクトの背景と目的}; 近年はスマホ・タブレット・PCの所持が当たり前になってきて、それと同時にモニターに向かい長時間作業する人が増えています。しかし休憩時間は軽視されやすく、SNSやスマホを見続けてしまい、十分に休めないまま時間を浪費してしまう課題があります。そこで、休憩の内容に注目し、「何をするか」と「どれくらい休むか」を決めて記録できるサイトを作成します。1日の休憩を可視化し、1日の振り返りや改善につなげることで、休憩の質という観点から1日をより良くするきっかけ作りを目的としています。 ~ ***コンセプト //&color(red){基本的な考え方、枠組み、視点など}; -休憩時間に応じてイラストが成長するスコア要素を導入することでモチベーションの維持に繋げる。 -休憩をする前に何をするかと時間を決めて（仮眠、食事、散歩......）各休憩によって期待される効果も一緒にわかるようにすることで、その時々に適した休憩を取れるようにする。 ~ ***成果物の仕様 //&color(red){&small(成果物の形式・サイズ・時間尺等);}; 前期 サイトデザイン -[[成果物>https://ksumail-my.sharepoint.com/:f:/g/personal/k23as027_st_kyusan-u_ac_jp/IgAjRlKpnEyvTar67Wp8kUWKAZ9Q-jPEjr4F5yTDKOcHdiM?e=LchfVr]] ~ //***メンバー //&color(red){共同プロジェクトの場合のみ｜メンバーと役割分担を明記}; //~ ***制作ツール //&color(red){使用するツール｜ハードウエア・ソフトウエア}; Adobe Illustrator VScode Procreate figma ~ ***プロジェクトの期間 //&color(red){プロジェクトの期間｜20XX.XX.XX - 20XX.XX.XX }; 2026.04.10 - 2026.12.04 ~ ***まとめ //&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。}; 現在はサイトデザイン、使用イラスト、休憩内容の選定など、中身の部分の作成まで進めることができた。後期は実際にサイトを形にしていこうと考えている。その際、プログラムが複雑化されることが予想されるので、まずは必要機能を細分化して作成に取り掛かろうと考えている。 ~ ~ **調査 ***現状調査 //&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し}; -[[スマホやPCなど電子機器の使用時間>https://www.moba-ken.jp/project/lifestyle/20251211.html]] -[[勉強の切り替えに関するアンケート>https://www.trend-lab.studyplus.jp/post/20260108]] -[[休憩時間にスマホは逆効果 集中力をそぐとの研究結果>https://forbesjapan.com/articles/detail/29497]] -[[短時間の昼寝と短時間の休憩>https://pubmed.ncbi.nlm.nih.gov/15697069/]] -[[散歩による休憩>https://link.springer.com/article/10.1186/1471-2458-14-488?utm_source=chatgpt.com]] -[[休憩における適切な時間について>https://hatohato.jp/intro/health_intro/05_deskwork/04_breaks.php?utm_source=chatgpt.com]] -[[適切な休憩は心身の不調リスクを下げ、集中力を高める効果>https://rc.persol-group.co.jp/news/202501301000/]] ~ ***先行事例 //&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など}; -[[ポモドーロタイマー>https://pomodoro.lit-gallery.com/]] -[[フォーカストゥードゥー App Storeリンク>https://apps.apple.com/jp/app/focus-to-do-%E3%83%9D%E3%83%A2%E3%83%89%E3%83%BC%E3%83%AD%E6%8A%80%E8%A1%93-%E3%82%BF%E3%82%B9%E3%82%AF%E7%AE%A1%E7%90%86/id966057213]] -[[タイマー参考事例>https://pin.it/1relU9DXW]] ~ ***技法・技術情報 //&color(red){プロジェクトの遂行に必要な技法・技術に関する調査}; ~ ~ **プロジェクト管理 ***スケジュール //&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。}; ~ ***ToDo //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」}; -必要機能の選定 -サイトマップ作成 -ワイヤーフレーム作成 -サイトデザイン案作成 -サイト内で使う素材の作成 -コーディング //***NotToDo //&color(red){やらないこと：何をするかではなく「何をしないか」を考える}; //&color(red){例：10人以上の会議には出ない。苦手なことは誰かに頼む・・}; ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。}; #hr ~ ~ **2026.07.10 ~ ***メモ -事前調査の再調査 ~ ~ ~ **2026.07.03 ~ ***発表フィードバック -適した休憩かどうかの判断はどうするのか -サイトを使うことでどういう影響があるかをサイト完成前に確かめると良い。 -1日ごとに完結するのであれば、日を跨いで使うときのモチベーションの維持はどうするのか。 -どういう先行事例があってこういう課題があるのでこういうふうにしましたという提案にすると良い。 ~ ~ ~ **2026.06.26 ~ ***発表準備 -タイトル --cultivate a break --休憩という存在に向き合って、1日をより良く過ごすためのタイマーサイト -背景と目的 --近年はスマホ・タブレット・PCの所持が当たり前になってきて、それと同時にモニターに向かい長時間作業する人が増えています。しかし休憩時間は軽視されやすく、SNSやスマホを見続けてしまい、十分に休めないまま時間を浪費してしまう課題があります。そこで、休憩の内容に注目し、「何をするか」と「どれくらい休むか」を決めて記録できるサイトを作成します。1日の休憩を可視化し、1日の振り返りや改善につなげることで、休憩の質という観点から1日をより良くするきっかけ作りを目的としています。 -現場調査 --[[スマホやPCなど電子機器の使用時間>https://www.moba-ken.jp/project/lifestyle/20251211.html]] 15～29歳の男女の約6割がスマートフォンを用いたインターネット利用を1日2時間以上行っており、若年層ほど利用時間が長い傾向がある。 --[[勉強の切り替えに関するアンケート>https://www.trend-lab.studyplus.jp/post/20260108]] 多くの学生が休憩時間に課題を抱えている -コンセプト --休憩時間の長さに比例してイラストが成長するスコア要素を導入することで、モチベーションの維持に繋げる。 --休憩をする前に何をするかと時間を決めて（仮眠、食事、散歩......）各休憩によって期待される効果も一緒にわかるようにすることで、その時々に適した休憩を取れるようにする。 -成果物 --サイトデザイン &image(mobile.jpg,,20%);&image(mobile-menu.jpg,,20%);&image(site-2.jpg,,50%); --イラスト #image(flower.png) -まとめ --現在はサイトデザイン、使用イラスト、休憩内容の選定など、中身の部分の作成まで進めることができた。後期は実際にサイトを形にしていこうと考えている。その際、プログラムが複雑化されることが予想されるので、まずは必要機能を細分化して作成に取り掛かろうと考えている。 ~ ~ ***メモ -サイトデザインの導線の確認 -休憩内容を概要集に記載するか -概要集の作成 ~ ~ ~ **2026.06.19 ***サイトデザイン作成 &image(mobile.jpg,,20%); &image(mobile-menu.jpg,,20%); &image(site.jpg,,50%); ***メモ -休憩内容 --軽い散歩（5〜10分） --仮眠（10〜30分） --窓の外を眺める（2〜5分） --お茶を淹れる（3〜5分） --雑談（5〜10分） --ストレッチ（3〜5分） --軽食（5〜10分） --部屋の片付け（５〜１０分） --外の空気を吸う（2〜3分） --顔を洗う（2〜3分） #image(break-list.png) ~ ~ ~ **2026.06.12 概要集の作成 使用イラストの作成 ***メモ -今までは主にデスクワークを想定していたため成果物をサイトとしていた。 --日常における作業はデスクワーク以外にもありその場合アプリなどの方が良いのでは --サイトかアプリかどちらにするべきか ~ ~ ~ **2026.06.05 ***メモ -データを記録する期間をどうするかを考える。 -中間審査に向けて簡易的な動作がわかるようなものを作るとなおいいかも。 -無理にサイトマップの形にしなくてもいいかも。 -フォントはYusei Magicを使う。 --休憩をイメージさせるために線の揺れが優しく、癒し系の印象のあるフォントを選んだ。 --太さが不均一で、手作り感を演出 **2026.05.22 ***新しいアイディア -1.休憩を開始する際に休憩内容を選択（推奨時間や得られる効果も一緒にわかるようにする） -2.カウントアップ式のタイマーをスタート -3.休憩した時間に比例してイラストが成長していく。 -4.休憩を終え作業を開始する際にタイマーをストップ（時間のリセットはしない） -5.もう一度休憩のタイミングで1.の作業から繰り返す -6.計測終了のタイミングで作業時間を入力 -7.休憩時間と作業時間の比較で適した休憩時間かどうかを判定 -8.その日に行った休憩の内容もわかるようにする ~ ***メモ -サイトを使っていないときに他の電子機器を使っているかどうかの記録が取れない。 --今の所、ユーザーの主体性に委ねるしかない。 --PC限定として利用を絞ってみる。 --作業時間も最終的に記録してもらう。 --ユーザーのスマホ、などの電子機器の使用を強制的に制限したいわけではない。 --スマホなどの電子機器を使用したいとき用の休憩項目を作成する。 -記録をとった後のアウトプットの方法を考える。 --作業時間も記録し休憩時間との比較で結果を表示する。 --休憩時間が多い少ないだけでなく何の休憩をどれだけとったかをわかるようにする。 --その日に行われなかった休憩をランダムでおすすめ表示してその休憩によって得られる効果を一緒に提示する。 ---休憩の項目を選ぶ前と1日の振り返りのタイミングで得られる効果を知ることができるようにする。 ~ ***必要機能の選定 -タイマー機能（カウントアップ） -イラスト成長機能 -休憩内容選択機能 -作業時間入力比較機能 -判定結果表示機能 ~ ***デザイン案 -使う色 --#a6c3ac --#eee2d3 --#8f7e61 --#eaf3d7 #image(colorDemo.png) ***サイトマップ #image(SiteMap.png,center,80%) ~ ***ワイヤーフレーム #image(YFM.png,center,60%) ~ ~ ~ **2026.05.15 ***メモ -日常の記録をとるコンピュータと離れたところでどういった時に休憩をしているのかなど、日常のログを記録して休憩について考えると良いかも。 -携帯やパソコンを触っていない時間を記録しようがない -休憩においては肉体労働もあると思うのでそれも含めて休憩について考えられると良いかも -実際に自分の1日を記録したいと考えている -サイトの実装したい機能をまとめる ~ ***小休憩で推奨される休憩 軽い散歩（5〜10分） 階段昇降 ストレッチ 目を閉じる・遠くを見る 仮眠（10〜30分） 深呼吸 瞑想・マインドフルネス 水分補給 コーヒーブレイク コーヒーナップ 自然を見る・外気に触れる 軽い筋トレ ヨガ 雑談・コミュニケーション 軽食・健康的な間食 日光を浴びる 姿勢変更・立ち上がる 3分程度の運動休憩 作業切替（軽いタスクへ） 呼吸＋ストレッチの組み合わせ 軽い家事・整理整頓 ペットと触れ合う ガムを噛む 軽いマッサージ アロマ・香りを使う ~ ~ ~ **2026.05.08 現状調査 -[[短時間の昼寝と短時間の休憩>https://pubmed.ncbi.nlm.nih.gov/15697069/]] -[[散歩による休憩>https://link.springer.com/article/10.1186/1471-2458-14-488?utm_source=chatgpt.com]] -[[休憩における適切な時間について>https://hatohato.jp/intro/health_intro/05_deskwork/04_breaks.php?utm_source=chatgpt.com]] ~ ~ ~ **2026.05.01 ***メモ -デスクワークに限らずという考えもある -背景はあくまで世の中の現状メイン -現時点で必要な機能を説明できるようにすると聞く側もわかりやすい。 -作業・休憩という言葉は他の言い方、他の事柄にもっと広く言い換えることができそう **2026.04.24 ***テーマ -”休憩で何をするのか何をしたのかどれだけしたのか” -時間管理を助けるサイト -集中力アップを助けるサイト -仮眠の重要性を助けるサイト - ***メモ -作業時間ではなく休憩時間の記録とタイマー --休憩をする前に何をするかと時間を決める（仮眠、食事、散歩......） --1日終了時点でその日のタイムスケジュールが作成される --休憩時間が少なければもっと休憩を取る --休憩時間が多ければ少なくして1日の使い方を改善 休憩という存在に向き合って、1日をより良く過ごすためのサイト ＿＿＿＿＿＿＿＿＿＿＿＿＿＿ -タイマーx締切 -タイマーx -仮眠x -音x -前期までの成果物 --サイトマップ --サイトデザイン --サイト内素材 ---音楽 ---背景素材 ---タイマーデザイン ***参考事例 [[タイマー参考事例>https://pin.it/1relU9DXW]] [[タイマー参考事例 動画>https://youtu.be/RKPJIObaHJo?si=0gQCqCQ6q1HZ0iQG&t=108]] ~ ~ ~ **2026.04.17 ***メモ -アンケートはしてもいいが大変 -仮眠にこだわりすぎずタイマー視点で見るのもアリかも -時間管理 -とりあえず最初はやりたい機能や作りたいものを全部考えてみる ~ ***ポモドーロタイマーのデメリット -「時間で区切ることが、必ずしも価値を生まない」 -作業の質より“時間内に終わらせること”が目的化する -ポモドーロを回した回数＝成果のように錯覚しやすい ↓ ポモドーロタイマーにこだわらなくてもいいかも。 タイマーにするなら自由度が大事かも -カスタマイズできるタイマー --音楽 --タイマー設定 --天気 --背景 --通知 --時間 --画面ロック -- ~ ~ ~ **2026.04.10 ***テーマ案 -ゆっくり -通知 -"集中" -"仮眠" -タイマー -"ポモドーロタイマー" ***手段 -webサイト -冊子 -動画 ***参考事例 -[[先輩の研究 peep>https://takearest1.github.io/peep/cat/cat.html]] -[[ポモドーロタイマー>https://pomodoro.lit-gallery.com/]] -[[仮眠 記事>https://centralmedicalclub.com/column/nap-time]] -[[ポモドーロタイマー>https://youtu.be/B3UM8TizqYQ?si=txWR75ucucCRiDbe]] ~ ~ ~