cultivate a break
休憩という存在に向き合って、1日をより良く過ごすためのサイト
概要
これは何？
休憩という存在に向き合って、1日をより良く過ごすためのサイト
背景と目的
近年はスマホ・タブレット・PCの所持が当たり前になってきて、それと同時にモニターに向かい長時間作業する人が増えています。しかし休憩時間は軽視されやすく、SNSやスマホを見続けてしまい、十分に休めないまま時間を浪費してしまう課題があります。そこで、休憩の内容に注目し、「何をするか」と「どれくらい休むか」を決めて記録できるサイトを作成します。1日の休憩を可視化し、1日の振り返りや改善につなげることで、休憩の質という観点から1日をより良くするきっかけ作りを目的としています。
コンセプト
- 各休憩によって期待される効果も一緒にわかるようにすることで、その時々に適した休憩を取れるようにする。
- 休憩をする前に何をするかと時間を決めて（仮眠、食事、散歩......）1日終了時点でその日のタイムスケジュールが作成できるようにすることで、1日を振り返るきっかけを作る。
成果物の仕様
GitHubにて公開するWebサイト
制作ツール
Adobe Illustrator
VScode
Procreate
figma
プロジェクトの期間
2026.04.10 - 2026.12.04
まとめ
現在はサイトデザイン、使用イラスト、休憩内容の選定など、中身の部分の作成まで進めることができた。後期は実際にサイトを形にしていこうと考えている。その際、プログラムが複雑化されることが予想されるので、まずは必要機能を細分化して作成に取り掛かろうと考えている。
調査
現状調査
先行事例
技法・技術情報
プロジェクト管理
スケジュール
ToDo
- 必要機能の選定
- サイトマップ作成
- ワイヤーフレーム作成
- サイトデザイン案作成
- サイト内で使う素材の作成
- コーディング
進捗記録
2026.06.26
メモ
- サイトデザインの導線の確認
- 休憩内容を概要集に記載するか
- 概要集の作成
2026.06.19
サイトデザイン作成
メモ
- 休憩内容
- 軽い散歩（5〜10分）
- 仮眠（10〜30分）
- 窓の外を眺める（2〜5分）
- お茶を淹れる（3〜5分）
- 雑談（5〜10分）
- ストレッチ（3〜5分）
- 軽食（5〜10分）
- 部屋の片付け（５〜１０分）
- 外の空気を吸う（2〜3分）
- 顔を洗う（2〜3分）
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
サイトマップ
ワイヤーフレーム
2026.05.15
メモ
- 日常の記録をとるコンピュータと離れたところでどういった時に休憩をしているのかなど、日常のログを記録して休憩について考えると良いかも。
- 携帯やパソコンを触っていない時間を記録しようがない
- 休憩においては肉体労働もあると思うのでそれも含めて休憩について考えられると良いかも
- 実際に自分の1日を記録したいと考えている
- サイトの実装したい機能をまとめる
小休憩で推奨される休憩
軽い散歩（5〜10分）
階段昇降
ストレッチ
目を閉じる・遠くを見る
仮眠（10〜30分）
深呼吸
瞑想・マインドフルネス
水分補給
コーヒーブレイク
コーヒーナップ
自然を見る・外気に触れる
軽い筋トレ
ヨガ
雑談・コミュニケーション
軽食・健康的な間食
日光を浴びる
姿勢変更・立ち上がる
3分程度の運動休憩
作業切替（軽いタスクへ）
呼吸＋ストレッチの組み合わせ
軽い家事・整理整頓
ペットと触れ合う
ガムを噛む
軽いマッサージ
アロマ・香りを使う
2026.05.08
現状調査
2026.05.01
メモ
- デスクワークに限らずという考えもある
- 背景はあくまで世の中の現状メイン
- 現時点で必要な機能を説明できるようにすると聞く側もわかりやすい。
- 作業・休憩という言葉は他の言い方、他の事柄にもっと広く言い換えることができそう
2026.04.24
テーマ
- ”休憩で何をするのか何をしたのかどれだけしたのか”
- 時間管理を助けるサイト
- 集中力アップを助けるサイト
- 仮眠の重要性を助けるサイト
メモ
- 作業時間ではなく休憩時間の記録とタイマー
- 休憩をする前に何をするかと時間を決める（仮眠、食事、散歩......）
- 1日終了時点でその日のタイムスケジュールが作成される
- 休憩時間が少なければもっと休憩を取る
- 休憩時間が多ければ少なくして1日の使い方を改善
休憩という存在に向き合って、1日をより良く過ごすためのサイト
＿＿＿＿＿＿＿＿＿＿＿＿＿＿
- タイマーx締切
- タイマーx
- 仮眠x
- 音x
- 前期までの成果物
参考事例
タイマー参考事例
タイマー参考事例 動画
2026.04.17
メモ
- アンケートはしてもいいが大変
- 仮眠にこだわりすぎずタイマー視点で見るのもアリかも
- 時間管理
- とりあえず最初はやりたい機能や作りたいものを全部考えてみる
ポモドーロタイマーのデメリット
- 「時間で区切ることが、必ずしも価値を生まない」
- 作業の質より“時間内に終わらせること”が目的化する
- ポモドーロを回した回数＝成果のように錯覚しやすい
↓
ポモドーロタイマーにこだわらなくてもいいかも。
タイマーにするなら自由度が大事かも
- カスタマイズできるタイマー
- 音楽
- タイマー設定
- 天気
- 背景
- 通知
- 時間
- 画面ロック
2026.04.10
テーマ案
- ゆっくり
- 通知
- "集中"
- "仮眠"
- タイマー
- "ポモドーロタイマー"
手段
参考事例
