#author("2026-07-16T10:37:13+09:00;2026-07-16T10:36:55+09:00","default:member","member") #author("2026-07-16T12:05:01+09:00;2026-07-16T10:36:55+09:00","default:member","member") *FocusGrow 集中することで成長していく #image(サムネのコピー.jpg) -中山琥鉄 -'''Keywords：web, ゲーム, 継続, 日課''' -https://nako1116.github.io/FOCUSGROWW/ //-__[[相互評価シート>https://www.example.com]]__ ← ここからコメントをお願いします。 ~ //***CONTENTS //#contents2_1 //~ **概要 ***これは何？ なかなか作業のやる気ができない時にパソコンに向かわせるwebサイト ~ ***背景と目的 ~ 私は課題制作などの作業に対して計画性がなく、気持ちのり替えやモチベーションの維持が苦手である。そのため、 やるべきことを後回しにしてしまうことが多い。本研究では、 ゲーム感覚で楽しみながら作業を始められる Web サイトを制作し、自ら進んでパソコンに向かう習慣を身に付けること を目的とした。また、私と同じような悩みを抱える人が、継続して作業に取り組めるきっかけとなることも目的としている。 ***コンセプト 一日一回パソコンに向かうためのゲーム感覚で行えるwebデザイン ~ ***成果物の仕様 webサイト -キャラクターデザイン #image(キャラクター全部.jpg) ~ ***制作ツール -VSCode -生成AI(キャラクター、背景、ロゴ) -生成AI chatGPT(キャラクター、背景、ロゴ) ~ ***プロジェクトの期間 4月9日〜7月16日 ~ ***まとめ 本研究では、ゲーム要素を取り入れたWebサイト「FocusGrow」を制作し、作業を始めるきっかけづくりと継続習慣の形成を目指した。キャラクターの育成やレベルアップ、継続記録の可視化など、ゲーム性を取り入れることで、作業そのものを前向きに取り組める環境を実現した。 制作を通して、Webサイトは情報を伝えるだけではなく、ユーザーの行動を促す役割も果たせることを学んだ。また、デザインだけでなく、アニメーションや効果音、データ保存機能などを組み合わせることで、継続して利用したくなる体験を設計することの重要性を実感した。 ~ **調査 ~ ***現状調査 「最初の5分間」を集中して取り組むことで、その後も集中状態を維持しやすくなるという「5分ルール」がある -[[やる気が起きないとき、どうすればいい？今日からできるシンプルな対処法>https://www.google.com/url?sa=t&source=web&rct=j&opi=89978449&url=https://snabi.jp/facility/22788/blog_articles/607949&ved=2ahUKEwjl5MulrpSUAxWxhq8BHZynABkQFnoECD8QAQ&usg=AOvVaw3OCxJqvFIPABQa_JyVh0FB]] ~ ***先行事例 -ウーパールーパー育成ゲーム 継続的に利用されるサービスについて、一例として「ウーパールーパー育成ゲーム」がある。このゲームでは、ユーザーが定期的に世話を行うことでウーパールーパーが成長し、放置すると弱ってしまう。そのため、自然と毎日ゲームを起動する習慣が生まれている。このように、キャラクターに愛着を持たせ、成長を楽しめる仕組みがある。 ~ ~ ***技法・技術情報 ~ **プロジェクト管理 ~ ***スケジュール -[[スケジュール>https://ksumail-my.sharepoint.com/:x:/g/personal/k24as602_st_kyusan-u_ac_jp/IQAKS4sCJ-8jTYODxgFs_fAqAUCnZkXFRoSGX0-iAtOe8lo?e=8INl4E]] ~ ***ToDo -企画の整理 -内容の決定 -webサイトの作成 -ロゴの作成 -キャラクターの作成 //***NotToDo #hr CENTER:''進捗記録'' #hr ~ ~ **2026.07.09 -レイアウトやUIの調整 -ヘルプ機能の追加 -バグ修正・動作確認 ~ **2026.07.02 -レスポンシブ表示・画面サイズの確認 -発表用資料・作品説明の作成 ~ **2026.06.25 -BGM・効果音の実装 -ロゴ・背景・ボタンなどデザインの調整 ロゴ案 #image(ロゴ案.jpg) #image(ロゴ案2.jpg) ロゴ決定 #image(ロゴ決定.jpg) -シェア機能（画像保存）の実装 ~ **2026.06.18 -キャラクター成長システムの実装 -レベル・進化機能の追加 -成長ゲージ・進化表示の実装 -キャラクターアニメーションの追加 ~ **2026.06.11 ***作業事項 -キャラクターモーション -進化の構築 -レベル調節 ***やること -UIの整理 -各種調整 -ロゴ -背景 ~ **2026.05.21 -プロトタイプ作成 ~ **2026.05.14 -[[キャラクター(4段階)>https://ksumail-my.sharepoint.com/:b:/g/personal/k24as602_st_kyusan-u_ac_jp/IQAYXj12uHNRTqjDpFeW_TtBAbFjEfKEtGWR6u13LADP3_Y?e=qMl889]] ~ **2026.04.30 ***キャラクターラフ -[[キャラクターラフ>https://ksumail-my.sharepoint.com/:i:/g/personal/k24as602_st_kyusan-u_ac_jp/IQDMd43tqKPVQr27Qm4tMA2QAYvdw8ve01fPDB_pBt73hmk?e=bK31q7]] ***webサイトラフ -[[webサイトラフ>https://ksumail-my.sharepoint.com/:b:/g/personal/k24as602_st_kyusan-u_ac_jp/IQD2yKv0zY15QpkfWmYk9m6nAQxlXTHDq8JW2rZvs68nRTY?e=2PSI1Q]] ***デザインプロセスの整理 -背景 自分の課題制作などタスクでの計画性の無さやモチベーションの維持、気持ちの切り替えができいないという現状がある。何でも後回しにする悪い癖がある -課題 作業を開始するまでのハードルの高さ -目的 自らパソコンで作業できるような導入、毎日継続して日課として作業を行うきっかけを作る -コンセプト 一日一回パソコンに向かうためのwebデザイン ~ -ワイヤーフレーム #image(ワイヤーフレームの1.jpg) ***現状調査 -[[脳をやる気にする！心理学でモチベーションを高める９つの方法>https://www.google.com/url?sa=t&source=web&rct=j&opi=89978449&url=https://www.nlpjapan.co.jp/nlp-focus/enhance-motivation.html&ved=2ahUKEwiI1b-kr5SUAxUIh68BHWJfMQwQFnoECBkQAQ&usg=AOvVaw0VT2lkFi3ePPK469LMwxoI]] -[[やる気が起きないとき、どうすればいい？今日からできるシンプルな対処法>https://www.google.com/url?sa=t&source=web&rct=j&opi=89978449&url=https://snabi.jp/facility/22788/blog_articles/607949&ved=2ahUKEwjl5MulrpSUAxWxhq8BHZynABkQFnoECD8QAQ&usg=AOvVaw3OCxJqvFIPABQa_JyVh0FB]] ***先行事例 -Forest Forestは「スマートフォンを触らずに集中する」行動をゲーミフィケーション化している。タイマーを開始すると種が植えられ、時間内に他アプリを開かず集中を維持すれば木が成長する。途中でスマートフォンを使用すると木が枯れる。ユーザーは累積で森林を作り、成果を視覚化できる。 -Habitica Habitica（ハビチカ）は、習慣形成とタスク管理をゲーミフィケーションの手法で支援するモバイルアプリおよびウェブサービス。ユーザーは自分の目標をRPGのようなキャラクター育成として進め、日常のタスクを達成することで報酬を得る仕組みを採用している。 -365puroject 「365 Project（スリーシックスティファイブ・プロジェクト）」は、1年間（365日）にわたって毎日創作・記録を行うアートおよび自己表現の挑戦プロジェクト。写真、絵画、詩、デザインなど形式を問わず、継続的な創作習慣を育む試みとして世界中で行われている。 -BeReal BeReal（ビーリアル）は、フランス発のソーシャルメディアアプリで、ユーザーに日々1回だけ写真投稿を促すシンプルな仕組みが特徴。加工や演出を避け、「ありのまま」の瞬間を共有することを目的としている。 -ウーパールーパー育成ゲーム ウーパールーパー育成ゲーム（Axolotl simulation app）は、ウーパールーパー（アホロートル）を育てる体験を楽しめる日本発のモバイルシミュレーションゲーム。プレイヤーは仮想の水槽でウーパールーパーを世話し、成長を観察しながら癒しの時間を過ごせる点が特徴である。 ~ ***キーワード -触って楽しい -日課 -ハードルを下げる -継続 -愛着 -可視化 -モチベーション ~ ***アイデア案 webサイト×ゲーム -ページを開き指定の時間のタスクをこなすとキャラクターが成長する仕様。ログインを忘れると退化する。 -機能 タイマー5分(仮) 継続記録(キャラクターの成長度合い) 作業中はUIがシンプル化 成長の共有 タイマー終了の効果音 **2026.04.23 ***制作イメージ #image(ラフ.png) -[[https://ksumail-my.sharepoint.com/:b:/g/personal/k24as602_st_kyusan-u_ac_jp/IQBTa9V6PvzxR5PrOyWIMZ2fASDJsC-Wi0PKY23WCBCAgGA?e=LcfGX1]] **2026.04.16 ***調査 -現在出ているカレンダーは簡素でカレンダー以外の役割を持っていない -カレンダーとしてユニークなカレンダーはたくさんある 唯一性を持っている -卓上カレンダーとwebカレンダーの違い 利点:演出のバリエーションがある、入力作業がらく、場所を取らない 欠点:造形にこだわることができない、動作が多い -実際にスマホのアプリでカレンダーが運用されている ***成作にあたっての参考資料 [[カレンダーの作り方>https://www.google.com/url?sa=t&source=web&rct=j&opi=89978449&url=https://note.com/shiba_design/n/n451c32f9ac85&ved=2ahUKEwjHgbyRt_GTAxXCla8BHXCYF5oQFnoECBsQAQ&usg=AOvVaw23oa8rAauih_kEBhf6LDww]] ~ [[ランダム要素>https://qiita.com/atumi/items/efde4181cb6a4164de86]] ~ 参照 [[面白いカレンダー21選！ユニークなデザイン・機能で集客アップ>https://www.google.com/url?sa=t&source=web&rct=j&opi=89978449&url=https://www.original-calendar.com/guidance/interesting-calendar.html%3Fsrsltid%3DAfmBOoraXmOUmkxGZ2uKhWbXZkQ-kTiFShzTWcxbb5B6gwAhbeEVEm6b&ved=2ahUKEwjy7vbbr_GTAxW2R_EDHa0LLBoQFnoECCYQAQ&usg=AOvVaw2dHJOlcKBikb47NvhmkC4e]] [[スマホと連動した紙のようなカレンダー「Magic Calendar」 | UX>https://www.google.com/url?sa=t&source=web&rct=j&opi=89978449&url=https://bulan.co/swings/magic_calendar&ved=2ahUKEwi2yKi9tfGTAxW1nq8BHUHrFksQFnoECEIQAQ&usg=AOvVaw3lHqSGF1POEMlyvHLUpGbo]] ~ ***テーマのプロセス ①自分の計画性の無さ、モチベーションの維持ができない、気持ちの切り替えができいないという現状がある ~ ②自分の置かれてる現状が見えていないや見通しが甘いなどの問題点がある、今まである事例ではカレンダーとしての機能に限られておりそれ以外の機能がない ~ ③上記の問題点の改善や学生生活の充実が目標である ~ ④自主的にパソコンを開きたくなるような設計、カレンダーとしての情報把握の機能 ~ ⑤一週間に一回開きスケジュール、ToDoリストの入力、毎日すること、一週間かけてすること、毎週500円貯金、週ごとのテーマカラー、本日の雑学 ~ ~ **2026.04.09 ***テーマ案 -子供がご飯を食べるために 小さい子供がご飯を残さず食べるためのWebサイト -視力 視力が悪い人の見え方といい人の見え方の違い -掃除のまとめ 掃除の際に気をつけることや断捨離できるものを判別してくれるリスト -音楽を見る ミュージックビデオを音楽だけでなく曲の一部として、作品の一部として見るためのwebサイト -初心者向け麻雀の役紹介 初心者でも分かりやすく取っ掛りやすいイラストを交えた役紹一覧 -那珂川市の魅力紹介 現在紹介されていない那珂川市の魅力を発信する -CD CD離れしてる昨今現物に変わるコレクションサイト -グラフィックが与える配信の影響 配信者における画面設定でのグラフィックや情報の扱いの影響を比較し研究するサイト ~ --週めくりカレンダー 一週間に一回パソコンを開くことで一週間のモチベーションを保つというコンセプトのカレンダー todoリスト、ミッション、ランダム性、etc. ~ --耳から体感できるモーショングラフィックス 聴覚からの反応で体に刺激が起こることを活用した作品 エコー、ドップラー効果、共振、etc. サウンドデザインの要素を取り入れて臨場感を出す ~ --グラフィックが与える配信の影響 配信者における画面設定でのグラフィックや情報の扱い視聴者が受ける影響を比較し研究するサイト