1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Manusで勉強のモチベを上げるwebサイトを3時間で作って公開した話

1
Posted at

はじめに

こんにちは.
今回は,ChatGPTとManusを使用して,勉強をゲーム感覚で記録できるWebサイトを約3時間で作成し,そのまま公開してみました.
勉強ってなかなか始めるのに腰が重くて始められなかったり,継続するのが難しかったりしますよね.そこで,勉強をゲームのように記録するものを作ってみました.
勉強法を調べると,よくゲーミフィケーションという言葉を耳にすると思います.まるでゲームのように捉えて勉強を楽しくするというものだった記憶があります.
また,ToDoアプリはプログラミング制作の第一歩として知られているので,それに倣って自分なりの形で作ってみようと思い作成しました.
今回は,全部無料版のみ使用しました.

Manusとは

Manus AIは、計画から実行、成果物の作成までを自律的に担う汎用AIエージェントです。従来のチャットボットのように逐次指示を必要とせず、独自のサンドボックス環境でインターネットアクセスやソフトウェア操作を行い、長期的なタスクの文脈を保持しながら実用的な結果を自立して提供できます。

作ろうと思ったもの

イメージとしては「Supermarket Simulator」のように,行動 → 報酬 → 強化 のループを勉強に当てはめたものです.最終的には少し方向性が変わり,もう少し単純なものができあがりました.

全体の流れとしては,
勉強時間とその時の集中度を記録

ポイントを獲得

獲得したポイントを使用してショップで報酬を購入

今回の作業時間はおおよそ以下の通りです.

  • 0:00〜1:00:ChatGPTでアイデア整理と要件定義作成
  • 1:00〜2:30:Manusでアプリ生成・調整
  • 2:30〜3:00:動作確認してそのまま公開

技術的な実装というより,「AIにどう伝えるか」に一番時間を使いました.

開発の流れ

今回は短時間で開発することが目的だったので,簡単な勉強時間記録とその管理にフォーカスしました.
アイデアをChatGPTに投げて簡単な修正後,要件定義を作成.作成した要件定義をManusに投げる(+細かな修正).のおおまかな2ステップで作成しました.
ここら辺の技術や知識は完全に素人レベルなので,自分が使うことができればいいかなと思い,技術選定などはすべてAIに任せました.

ChatGPTのターン

最初の思い付きのプロンプトと,その経過の会話の一部を以下に添付します.
思い付きでアイデアを投げて,そこから少しずつ作りたいものの解像度を上げていく方式が好きなので,本当に大雑把なアイデアだけをChatGPTに投げています.

image.png

image.png
↑ここで提示された懸念点は.時間稼ぎゲームにならないか.という点だった.たしかに.

最後に,要件定義をMarkdown形式で出力させてChatGPTのターンは終了です.

Manusのターン

最初に『アプリを開発』から,テンプレートのプロンプトをそのまま実行させて,アプリのクオリティを確認しました.これ,実際にやってみてほしいんですけど,結構クオリティが高いものが出てきてびっくりしました.ものの数分でできあがるもんなんだな...
image.png

そして,ChatGPTと出した要件定義を入力して内容のすり合わせをしてから,実行!あとは待つだけ.そこから細かな修正をして,下のような簡単なwebサイトが完成しました.
名称諸々は,自分だけが使う目的だったので全部適当です.
https://studyreward-2bm9cjcb.manus.space

公開まで

簡単です.プレビューの右上の公開のボタンをポチっとすれば一瞬で公開が完了しました.あら簡単.
Manus側がすべて自動構成してくれるので,本当にワンクリックで完了です.
image.png
↑プレビュー画面全体

image.png
↑右上の公開ボタン

完成したもの

https://studyreward-2bm9cjcb.manus.space
image.png

↑これができました.

記録:勉強時間とその時の集中度を記録します.記録に応じてポイントがもらえます.日ごとの上限を設定できます(ノルマみたいなもの).
ストア:獲得したポイントを使用して報酬を購入することができます.ここはほとんど,ポイントの消費の記録です.好きなものを追加して買いましょう.
履歴:ポイントの増減の履歴が見れます.また,Day, Week, Monthの切り替えで,獲得ポイントを振り返ることができます.月を跨ぐと消滅する可能性アリ(要確認).
設定:各時間で貰えるポイントの獲得量や,ダークモード切替などができます.その他って何だコレ

使ってみた感想

おおかた求めていたものができあがって満足.これで,ダラダラし続けるのも抑えられるだろう.きっと,おそらく,Maybe,Probably......
できあがって触って改善したいところがまだあるから,まだ続くかも...?

3時間で得た学び

今まで,何かを作り上げることに対してハードルが高くなっていましたが,こんなに雑でも簡単にwebサイトができるとは思いませんでした.想像以上で驚いています.このような開発はまったくの初心者で,技術的な部分はほぼAIに任せました.このような生活の隙間を埋めてくれるものを誰でも簡単に作れるのはかなり楽しかったです.おかげでハードルが下がりました.
今回は早く作り上げることがサブゴールだったのですが,長く使うのであればそれに即したアップデートが必要だろうなと思います.ログインが云々をAIから提案があったけど,まだ私がセキュリティ関連を扱う権利は無いと思ってるので,こうふらっと入ってふらっと出ていける簡単なものを作りたいなと思います.

  • 完成度70%でも公開した方が圧倒的に前に進む
  • AIに任せることで「作る心理的ハードル」が激減した
  • 技術力より「何を作りたいか」の方が重要だった
  • 小さな個人ツールはAI時代と相性がいい

終わりに

今回は技術検証が目的ではなく,「AIに任せたらどこまで形になるのか」を試す意味合いもありました.
くどいくらいですが,AIだけでwebサイトの公開まで行けるのは本当に驚きです.公開までせずとも,一度やってみてはいかがでしょうか.プレビューだけでもだいぶ遊べます.
今日は,初めてということもあり試行錯誤しながらで,結果的に3時間で完成しましたが,次回何かを作るときは時間制限を設けて見ても面白いかもしれないと思いました.

参考文献

Manus紹介ページ
https://manus.im/docs/ja/introduction/welcome?utm_source=google&utm_medium=&utm_campaign=23227263590&utm_content=185100625101&utm_term=hp%20%E3%81%AE%20%E4%BD%9C%E3%82%8A%E6%96%B9&cid=7296735399&adgroupid=185100625101&matchtype=p&placement=&device=c&devicemodel=&network=g&gclid=CjwKCAiAkbbMBhB2EiwANbxtbSgjgOZmGOyk5WY-XiEbyGUIbgl8BCrTF0zS-FQzdrsW_w1kWzbVvhoC5TQQAvD_BwE&gbraid=0AAAABB8nEWNoMMN4jpx2un6fUyELbSPS4&wbraid=CkEKCQiA7rDMBhDvARIwAG5JuIBN6aSC3AbyAcj55WgLkMsXyCQ_rxBEdCsf5tcTN1vafdgBULm-vzpg2E5YGgJoiw&creative=782434769479&adid=&gad_source=1&gad_campaignid=23227263590&gbraid=0AAAABB8nEWNoMMN4jpx2un6fUyELbSPS4&gclid=CjwKCAiAkbbMBhB2EiwANbxtbSgjgOZmGOyk5WY-XiEbyGUIbgl8BCrTF0zS-FQzdrsW_w1kWzbVvhoC5TQQAvD_BwE

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?