Vibe Coding で趣味開発のハードルが劇的に下がった

「趣味の開発」というと、本当に好きな人が休日に何ヶ月も没頭しているイメージがあり、実際に自分もそういう開発をしてきた。特に大掛かりなプロジェクト（自作シンセとか）を育児の合間にちまちま進めるのは根気のいる作業だ。

が、最近では AI が賢いので「これ作って」と頼んでおくとサクッと作ってくれる。いわゆる Vibe Coding というやつ。例として、ここ数日で作ったものを２つ紹介する。

例：ショッピングセンターのフロアガイド

これは近所のショッピングセンターのフロアガイドをペライチの HTML で作らせてみたもの。

大型商業施設に買い物に行く時、どんな店舗が入っているのかをざっと調べられると嬉しい。しかし Web サイトの作りが微妙だと一覧性が悪く、フロアやカテゴリごとに何度もクリックしないといけなかったりする。実際に足を運べばフロアガイドが掲載されていたりするのだが、いつも行き当たりばったりだ。

そこで、 AI (Cursor + GPT-5) に「このサイトの情報をこんな感じで整理して」と頼んでみた。最初の依頼でほぼ完成。あとはレイアウト崩れや細かなデザインを修正して完成。開発期間は平日の一日のみ。

例：キャラクターカードの印刷

YouTube 好きの娘（５歳）が「イタリアンブレインロット」という気色悪いキャラクターの出る動画に毒されてしまったのだが、どうせ好きなら逆に利用してしまえということで「神経衰弱カード」を作ることにした。Vibe Coding を通じて AI に親しむ＋モノづくりの工程を考えるという教育効果とテレビから遠ざける効果を合わせて一石二鳥だ。

完成したのがこちら。

情報を取得するところで試行錯誤が必要だった。 Wiki に一覧されているキャラクターがマイナーなものを合わせると 1000 近くあるので、画像リンクと共に有名キャラクターかどうかを表すメタ情報を取得してフィルタリングする。それでも多いので、カードにしたいものを人力で選出する。そのあと、バラバラなサイズの画像を同じサイズに統一して敷き詰めるように指示。最後にそれを印刷し、ハサミでカードに分割したあと工作用紙に貼り付けて完成。

という工程を親が黙々とやっていても仕方がないので、思考プロセスを口に出したり手を動かさせたりというのをちゃんとやる。工作用紙の注文も含めて発案〜完成まで４日程度（ほぼ平日の作業）。