• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• 堀玲二/卒業研究 へ行く。
  • 1 (2026-04-10 (金) 12:29:41)
  • 2 (2026-04-10 (金) 17:18:52)
  • 3 (2026-04-17 (金) 10:07:06)
  • 4 (2026-04-17 (金) 17:13:37)
  • 5 (2026-04-24 (金) 16:49:15)
  • 6 (2026-04-28 (火) 19:55:19)
  • 7 (2026-05-01 (金) 17:17:34)
  • 8 (2026-05-11 (月) 19:46:46)
  • 9 (2026-05-14 (木) 16:39:53)
  • 10 (2026-05-15 (金) 16:32:23)
  • 11 (2026-05-22 (金) 17:13:50)
  • 12 (2026-06-02 (火) 15:51:52)
  • 13 (2026-06-02 (火) 16:03:00)
  • 14 (2026-06-05 (金) 15:05:55)
  • 15 (2026-06-06 (土) 17:21:35)
  • 16 (2026-06-13 (土) 15:00:39)
  • 17 (2026-06-25 (木) 13:33:57)
  • 18 (2026-06-26 (金) 14:27:25)
  • 19 (2026-06-26 (金) 14:47:02)
  • 20 (2026-06-27 (土) 13:58:53)
  • 21 (2026-06-30 (火) 19:04:32)
  • 22 (2026-07-03 (金) 14:55:52)
  • 23 (2026-07-11 (土) 15:34:07)
  • 24 (2026-07-17 (金) 16:46:05)
  • 25 (2026-08-06 (木) 16:17:52)
  • 26 (2026-09-18 (金) 16:39:57)
  • 27 (2026-09-25 (金) 16:52:11)
  • 28 (2026-10-01 (木) 22:22:37)
  • 29 (2026-10-02 (金) 14:32:57)
  • 30 (2026-10-04 (日) 22:18:21)
  • 31 (2026-10-05 (月) 00:52:29)
  • 32 (2026-10-08 (木) 19:23:11)

---

cultivate a break

休憩という存在に向き合って、1日をより良く過ごすためのタイマーサイト

• REIJI HORI
• break,web
• 前期成果物（サイトデザイン、サイトマップ）
• サイトプロトタイプ10月05日時点

概要

これは何？

休憩という存在に向き合って、1日をより良く過ごすためのタイマーサイト

背景と目的

近年はスマホ・タブレット・PCの所持が当たり前になってきて、それと同時にモニターに向かい長時間作業する人が増えています。しかし休憩時間は軽視されやすく、SNSやスマホを見続けてしまい、十分に休めないまま時間を浪費してしまう課題があります。そこで、休憩の内容に注目し、「何をするか」と「どれくらい休むか」を決めて記録できるサイトを作成します。1日の休憩を可視化し、1日の振り返りや改善につなげることで、休憩の質という観点から1日をより良くするきっかけ作りを目的としています。

コンセプト

• 休憩時間に応じてイラストが成長するスコア要素を導入することでモチベーションの維持に繋げる。
• 休憩をする前に何をするかと時間を決めて（仮眠、食事、散歩......）各休憩によって期待される効果も一緒にわかるようにすることで、その時々に適した休憩を取れるようにする。
  
  

成果物の仕様

前期
サイトデザイン

• 成果物
  
  

制作ツール

Adobe Illustrator
VScode
Procreate
figma

プロジェクトの期間

2026.04.10 - 2026.12.04

まとめ

現在はサイトデザイン、使用イラスト、休憩内容の選定など、中身の部分の作成まで進めることができた。後期は実際にサイトを形にしていこうと考えている。その際、プログラムが複雑化されることが予想されるので、まずは必要機能を細分化して作成に取り掛かろうと考えている。

調査

現状調査

• スマホやPCなど電子機器の使用時間
• 勉強の切り替えに関するアンケート
• 休憩時間にスマホは逆効果　集中力をそぐとの研究結果
• 短時間の昼寝と短時間の休憩
• 散歩による休憩
• 休憩における適切な時間について
• 適切な休憩は心身の不調リスクを下げ、集中力を高める効果
  
  

先行事例

• ポモドーロタイマー
• フォーカストゥードゥー　App Storeリンク
• タイマー参考事例

技法・技術情報

プロジェクト管理

スケジュール

ToDo

• 必要機能の選定
• サイトマップ作成
• ワイヤーフレーム作成
• サイトデザイン案作成
• サイト内で使う素材の作成
• コーディング

---

---

2026.10.02

やることメモ

• マイページ書き換え(サイトデザインとサイトマップの画像を成果物のところに記入する。)
• プロトタイプ修正
  • メニューは最初から見えるように。
  • 自由記入はテンプレートの下に移動
  • 再生と一時停止ボタンを別々にしてリセットボタンとの見分けを分かりやすくする
  • 成長するイラストはもう少し小さくする
  • テンプレートの推奨要素の主張が強い(あくまで細く要素)
  • 現在の休憩はタイマーの中に
  • 現在の休憩のインターフェースがボタンに見える
  • 休憩内容を洗濯してくださいの要素はメニューのところに
    
    

今週の作業

• メニューは最初から見えるように。
• 自由記入はテンプレートの下に移動
• 再生と一時停止ボタンを別々にしてリセットボタンとの見分けを分かりやすくする
• 成長するイラストはもう少し小さくする

2026.09.25

今週の作業メモ

• 必要機能はいちいちスクロールせずに画面内に収まるようにする。
• 必要のない機能はプルダウンメニューで隠すのもあり。
• トップ画面は時間が経てば自動でスクロールされる機能をつけても良いかも。
• 基本的にノートパソコンのサイズで画面構成を考える必要がある。
  
  

今週の作業

• サイトのプロトタイプを作成した。
  • 休憩選択機能を作成
  • タイマー機能の作成
  • その機能を合わせた
  • 大きい画面サイズで作成していたので、ノートPCの画面に治らなかった。
• 機能の作成はうまくいっているので、今後は使用感を良くする方向で進める。
  サイトプロトタイプ9月25日時点
  
  
  
  

2026.09.18

進め方について

• デザイン思考
  • プロトタイプを作ってテストして改修しての繰り返し。
  • 早めにサイトを作る
  • 完成後に他の人に使ってもらいアンケートや結果を確かめる。
  • 家計簿に似ている
  • 時計簿

2026.07.17

取り組み

• 事前調査の再調査
• サイトのコーディング開始
  • ダミー画像、ダミーテキストの配置
• タイマーシステムの技法調査

2026.07.10

メモ

• 事前調査の再調査

2026.07.03

発表フィードバック

• 適した休憩かどうかの判断はどうするのか
• サイトを使うことでどういう影響があるかをサイト完成前に確かめると良い。
• 1日ごとに完結するのであれば、日を跨いで使うときのモチベーションの維持はどうするのか。
• どういう先行事例があってこういう課題があるのでこういうふうにしましたという提案にすると良い。

2026.06.26

発表準備

• タイトル
  • cultivate a break
  • 休憩という存在に向き合って、1日をより良く過ごすためのタイマーサイト

• 背景と目的
  • 近年はスマホ・タブレット・PCの所持が当たり前になってきて、それと同時にモニターに向かい長時間作業する人が増えています。しかし休憩時間は軽視されやすく、SNSやスマホを見続けてしまい、十分に休めないまま時間を浪費してしまう課題があります。そこで、休憩の内容に注目し、「何をするか」と「どれくらい休むか」を決めて記録できるサイトを作成します。1日の休憩を可視化し、1日の振り返りや改善につなげることで、休憩の質という観点から1日をより良くするきっかけ作りを目的としています。

• 現場調査
  • スマホやPCなど電子機器の使用時間
    15～29歳の男女の約6割がスマートフォンを用いたインターネット利用を1日2時間以上行っており、若年層ほど利用時間が長い傾向がある。
  • 勉強の切り替えに関するアンケート
    多くの学生が休憩時間に課題を抱えている

• コンセプト
  • 休憩時間の長さに比例してイラストが成長するスコア要素を導入することで、モチベーションの維持に繋げる。
  • 休憩をする前に何をするかと時間を決めて（仮眠、食事、散歩......）各休憩によって期待される効果も一緒にわかるようにすることで、その時々に適した休憩を取れるようにする。

• 成果物
  • サイトデザイン
    
  • イラスト
    

• まとめ
  • 現在はサイトデザイン、使用イラスト、休憩内容の選定など、中身の部分の作成まで進めることができた。後期は実際にサイトを形にしていこうと考えている。その際、プログラムが複雑化されることが予想されるので、まずは必要機能を細分化して作成に取り掛かろうと考えている。
    
    
    
    

メモ

• サイトデザインの導線の確認
• 休憩内容を概要集に記載するか
• 概要集の作成

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

テーマ案

• ゆっくり
• 通知
• "集中"
• "仮眠"
• タイマー
• "ポモドーロタイマー"

手段

• webサイト
• 冊子
• 動画

参考事例

• 先輩の研究　peep
• ポモドーロタイマー
• 仮眠　記事
• ポモドーロタイマー