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サイトを作ったら失敗した話

Posted at

Manusとは

「Manusは、思考と行動を繋ぐ汎用AIエージェントです。単に考えるだけでなく、結果を提供します。Manusは、仕事や生活のさまざまなタスクに秀でており、あなたが休んでいる間にすべてを完了させます。」(公式サイトより)
最近新しく出たAIエージェントですね。早速使ってみたい!とのことで簡単なwebサイトを作ることにしました。結果はまあ惨敗ですが、プロンプトで工夫が足りないとこうなるんだな〜という目で見守ってください。

早速使ってみた

東京都が出しているオープンソースを使って、各自治体における子育て支援政策の内容を
横串で確認できるサイトがあったら便利なのでは??
しかもデータもかなり揃っているし、JSON形式で提供されており必要な加工が少なそう。
これは実験台として良いだろう!ということで今回のテーマに決定。

指示した内容

東京都のオープンソースを使って、各自治体ごとの子育て支援を横串で比較できるサイトを作りたい。
デプロイまでしてほしい。トップページはダッシュボードのようなイメージで、データの可視化をメインにしたい

・見やすいデザイン案
1.地図ベースのインターフェース
東京都の地図上に各自治体を表示
色分けで支援の充実度を視覚化(例:子育て支援総合スコアが高い自治体は濃い色)
タップ/クリックで詳細表示
2.比較ダッシュボード
複数自治体を横並びで比較できる画面
カテゴリー別(経済支援/保育/医療/教育など)のレーダーチャート
棒グラフや数値で具体的な支援額や施設数を比較
3.フィルター機能
子どもの年齢(0-2歳/3-5歳/小学生/中学生など)
世帯年収による支援の違い
共働き/シングルなど家族構成による絞り込み

・横串比較のための工夫
支援制度の名称が異なる問題を解決するため、共通カテゴリーを設定
「出産一時金」「出産祝い金」「子育てスタート応援金」などを「出産関連支援金」としてグループ化
金額・条件・申請方法などの詳細情報は個別表示

・スマホ対応と自動更新
レスポンシブデザインで PC/タブレット/スマホに対応
API 連携による定期的なデータ更新の自動化
更新日を明示して情報の信頼性を担保

上記に加え、技術スタックも指定した。(このあたりはclaudeに生成してもらった)

Manusの検討状況やいかに

東京都のオープンソースを使って、という指示を元に、使って欲しかったデータセットを見つけてきてくれました。
スクリーンショット 2025-03-18 0.43.24.png
データベーススキーマの設計まで行ってくれるらしい。(あれ、今回データベースを使う指示出していないんだけどな・・・)
スクリーンショット 2025-03-18 0.51.53.png
最終的にデプロイする直前には、同意ボタンのクリックが必要になります。
クリックした後なので、「✅受け入れられました」と表示されています。
スクリーンショット 2025-03-18 1.27.27.png

Manusの成果やいかに!?












・・・ええ、暗すぎる。確かにカラーチャートとか指定してなかったけども。
スクリーンショット 2025-03-18 1.27.41.png
地図から探す、を開くと緑に染まった東京都がドーン!百合子さんカラー。右下の凡例ぽいものも特に説明はなし。引きで見ても東京全体が緑になっているだけでした。
スクリーンショット 2025-03-18 1.27.46.png
自治体を比較する、を開くと、そもそも千代田区と中央区しかデータを取れていない(のか、データベースに格納できなかったのか)元々のデータセットには全ての市区町村のデータが含まれていますが、生き残ったのはこの2区のみ。
さすが東京の中心、千代田区・中央区(個人の感想です)
スクリーンショット 2025-03-18 1.27.52.png
条件から探す、は他の画面よりはややマシではあるが、右側の情報がイマイチ何を示したいのか分からない。まあここはこちらのプロンプトで細かく指定していなかったため仕方ないか。
スクリーンショット 2025-03-18 1.28.05.png

総評

指示を出してからデプロイ許可ボタンを押すまで、1時間もかからないくらいでした。
指示はカラーチャートを含めたり、画面ごとの機能要件を整理してあげることが必要そうです。
使うデータセットの管理や活用方法も定義してあげないといけなかったなあ、と思っています。
またプロンプトを変えてチャレンジしたい。なんせ、放置で出来るしね。

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?