FocusGrow
集中して一緒に成長しよう
概要
これは何？
なかなか作業のやる気ができない時にパソコンに向かわせるwebサイト
背景と目的
私は課題制作などの作業に対して計画性がなく、気持ちの切り替えやモチベーションの維持が苦手である。そのため、やるべきことを後回しにしてしまうことが多い。本研究では、ゲーム感覚で楽しみながら作業を始められるWebサイトを制作し、自ら進んでパソコンに向かう習慣を身に付けることを目的とした。また、私と同じような悩みを抱える人が、継続して作業に取り組めるきっかけとなることも目的としている。
コンセプト
一日一回パソコンに向かうためのゲーム感覚で行えるwebデザイン
成果物の仕様
webサイト
制作ツール
プロジェクトの期間
4月9日〜7月16日
まとめ
本研究では、ゲーム要素を取り入れたWebサイト「FocusGrow」を制作し、作業を始めるきっかけづくりと継続習慣の形成を目指した。キャラクターの育成やレベルアップ、継続記録の可視化など、ゲーム性を取り入れることで、作業そのものを前向きに取り組める環境を実現した。
制作を通して、Webサイトは情報を伝えるだけではなく、ユーザーの行動を促す役割も果たせることを学んだ。また、デザインだけでなく、アニメーションや効果音、データ保存機能などを組み合わせることで、継続して利用したくなる体験を設計することの重要性を実感した。
調査
現状調査
「最初の5分間」を集中して取り組むことで、その後も集中状態を維持しやすくなるという「5分ルール」がある
先行事例
- ウーパールーパー育成ゲーム
継続的に利用されるサービスについて、一例として「ウーパールーパー育成ゲーム」がある。このゲームでは、ユーザーが定期的に世話を行うことでウーパールーパーが成長し、放置すると弱ってしまう。そのため、自然と毎日ゲームを起動する習慣が生まれている。このように、キャラクターに愛着を持たせ、成長を楽しめる仕組みがある。
技法・技術情報
プロジェクト管理
スケジュール
ToDo
- 企画の整理
- 内容の決定
- webサイトの作成
- ロゴの作成
- キャラクターの作成
進捗記録
2026.06.11
作業事項
やること
2026.05.21
2026.05.14
2026.04.30
キャラクターラフ
webサイトラフ
デザインプロセスの整理
- 背景
自分の課題制作などタスクでの計画性の無さやモチベーションの維持、気持ちの切り替えができいないという現状がある。何でも後回しにする悪い癖がある
- 課題
作業を開始するまでのハードルの高さ
- 目的
自らパソコンで作業できるような導入、毎日継続して日課として作業を行うきっかけを作る
- コンセプト
一日一回パソコンに向かうためのwebデザイン
現状調査
先行事例
- Forest
Forestは「スマートフォンを触らずに集中する」行動をゲーミフィケーション化している。タイマーを開始すると種が植えられ、時間内に他アプリを開かず集中を維持すれば木が成長する。途中でスマートフォンを使用すると木が枯れる。ユーザーは累積で森林を作り、成果を視覚化できる。
- Habitica
Habitica（ハビチカ）は、習慣形成とタスク管理をゲーミフィケーションの手法で支援するモバイルアプリおよびウェブサービス。ユーザーは自分の目標をRPGのようなキャラクター育成として進め、日常のタスクを達成することで報酬を得る仕組みを採用している。
- 365puroject
「365 Project（スリーシックスティファイブ・プロジェクト）」は、1年間（365日）にわたって毎日創作・記録を行うアートおよび自己表現の挑戦プロジェクト。写真、絵画、詩、デザインなど形式を問わず、継続的な創作習慣を育む試みとして世界中で行われている。
- BeReal
BeReal（ビーリアル）は、フランス発のソーシャルメディアアプリで、ユーザーに日々1回だけ写真投稿を促すシンプルな仕組みが特徴。加工や演出を避け、「ありのまま」の瞬間を共有することを目的としている。
- ウーパールーパー育成ゲーム
ウーパールーパー育成ゲーム（Axolotl simulation app）は、ウーパールーパー（アホロートル）を育てる体験を楽しめる日本発のモバイルシミュレーションゲーム。プレイヤーは仮想の水槽でウーパールーパーを世話し、成長を観察しながら癒しの時間を過ごせる点が特徴である。
キーワード
- 触って楽しい
- 日課
- ハードルを下げる
- 継続
- 愛着
- 可視化
- モチベーション
アイデア案
webサイト×ゲーム
- ページを開き指定の時間のタスクをこなすとキャラクターが成長する仕様。ログインを忘れると退化する。
- 機能
タイマー5分(仮)
継続記録(キャラクターの成長度合い)
作業中はUIがシンプル化
成長の共有
タイマー終了の効果音
2026.04.23
制作イメージ
#image(): File not found: "ラフ.png" at page "中山琥鉄/情報デザイン研究I"
2026.04.16
調査
- 現在出ているカレンダーは簡素でカレンダー以外の役割を持っていない
- カレンダーとしてユニークなカレンダーはたくさんある
唯一性を持っている
- 卓上カレンダーとwebカレンダーの違い
利点:演出のバリエーションがある、入力作業がらく、場所を取らない
欠点:造形にこだわることができない、動作が多い
- 実際にスマホのアプリでカレンダーが運用されている
成作にあたっての参考資料
カレンダーの作り方
ランダム要素
参照
面白いカレンダー21選！ユニークなデザイン・機能で集客アップ
スマホと連動した紙のようなカレンダー「Magic Calendar」 | UX
テーマのプロセス
①自分の計画性の無さ、モチベーションの維持ができない、気持ちの切り替えができいないという現状がある
②自分の置かれてる現状が見えていないや見通しが甘いなどの問題点がある、今まである事例ではカレンダーとしての機能に限られておりそれ以外の機能がない
③上記の問題点の改善や学生生活の充実が目標である
④自主的にパソコンを開きたくなるような設計、カレンダーとしての情報把握の機能
⑤一週間に一回開きスケジュール、ToDoリストの入力、毎日すること、一週間かけてすること、毎週500円貯金、週ごとのテーマカラー、本日の雑学
2026.04.09
テーマ案
- 子供がご飯を食べるために
小さい子供がご飯を残さず食べるためのWebサイト
- 視力
視力が悪い人の見え方といい人の見え方の違い
- 掃除のまとめ
掃除の際に気をつけることや断捨離できるものを判別してくれるリスト
- 音楽を見る
ミュージックビデオを音楽だけでなく曲の一部として、作品の一部として見るためのwebサイト
- 初心者向け麻雀の役紹介
初心者でも分かりやすく取っ掛りやすいイラストを交えた役紹一覧
- 那珂川市の魅力紹介
現在紹介されていない那珂川市の魅力を発信する
- CD
CD離れしてる昨今現物に変わるコレクションサイト
- グラフィックが与える配信の影響
配信者における画面設定でのグラフィックや情報の扱いの影響を比較し研究するサイト
- 週めくりカレンダー
一週間に一回パソコンを開くことで一週間のモチベーションを保つというコンセプトのカレンダー
todoリスト、ミッション、ランダム性、etc.
- 耳から体感できるモーショングラフィックス
聴覚からの反応で体に刺激が起こることを活用した作品
エコー、ドップラー効果、共振、etc.
サウンドデザインの要素を取り入れて臨場感を出す
- グラフィックが与える配信の影響
配信者における画面設定でのグラフィックや情報の扱い視聴者が受ける影響を比較し研究するサイト
