プログラミングがわからなくてもゲームは作れる：ミスター・イノベーションがバイブコーディングを使って「左脳と右脳を動かす」アプリを作成した方法
なぜこのイベントを開催する必要があるのでしょうか?
昨日（3月7日）午後9時から伊野尾先生とオンラインライブ講義を開催しました。 イノベーション (Chen Jianming)。当初の参加登録枠は100名だったのですが、皆さんの熱意が私の予想をはるかに超えて、順番待ちの方がたくさんいました。昨夜は実際に90名を超える方々にご参加いただき、大変盛り上がりました。 チャット ルームでは常に人々が交流し、応答していて、とてもうれしかったです。
この記事はこのイベントに対する私の追記であり、このトピックがよく記録されるべき理由でもあります。
このイベントを主催したいと思った理由の一つ
正直に言うと、最近 Vibe コーディング について議論する人が増えていますが、ある現象を発見しました。議論のほとんどは「ツールの使い方」、「どの AI プラットフォームを使用するのが最適か」、「Lovable と Cursor のどちらが優れているか」に関するものです。これらは非常に実践的な質問ですが、もっと根本的な問題があると思います。誰もうまく答えられなかった質問:
情報工学のバックグラウンドがない人が自分の作品を制作できますか?
理論上は可能というわけではありませんが、実際にそれを実行し、そのプロセスを明確に説明してくれる人はいるでしょうか?
!【プログラミングを知らなくても作品は作れる？ ](/images/blog/vibe-coding-left-right-brain-game/no-coding-background.webp) *▲ プログラミングの仕方を知らなくても、本当にデジタル作品を作ることができるのでしょうか? *
まあ、イノベーションさんはそういう人です。
彼はイノベーション コンサルタントおよび講師を本業としており、イノベーションの分野で 27 年間働いています。 彼は革新的な発明を行い、テレビ番組に出演し、動く目覚まし時計や格納式で折りたたみ可能な電気蚊たたきなどの実際の物理的な製品を開発しました。 電子工学を専攻していましたが、ゲームプログラムの設計はおろか、情報工学の仕事もしたことがありません。
今年の旧正月直前に、私が開いた【Vibecoding実践ワークショップ】(https://www.vista.tw/workshop/vibe-coding)に参加しに来てくれて、実際に実践してクリエイティブなゲームアプリを作ってくれました。
このアプリは、「モバイル左脳と右脳」 と呼ばれます。オンラインで直接プレイできます。彼はまた、このライブブロードキャストで誰もが見ることができるようにライブデモを行いました。
これが単なるツールの教育ではなく、本当の創造的なプロセスの共有であると私が言ったのはそのためです。 まだ「できるかな？」と迷っている皆さんもいらっしゃると思います。 彼の話を聞くべきです。
ミスター・イノベーションとは誰ですか?
本題に入る前に、このスピーカーについて詳しくお知らせしたいと思います。
▲今夜のスピーカー - ミスター・イノベーション陳建明
陳建明氏のオンラインニックネームは「Mr.イノベーション」は、職場の革新的な考え方、販売の革新、製品の革新、問題分析、イノベーションのツールと方法論の指導を専門とする経営コンサルタントです。 彼はこの分野で 30 年近くの実践経験を蓄積しており、他の人に革新を教えるだけでなく、彼自身も革新的な発明家です。動く目覚まし時計や伸縮式および折りたたみ式の電動蚊たたきなどは、すべて彼が実際に開発し、メディア プログラムに登場した作品です。
▲イノベーションとは何ですか？ 斬新さと進歩が不可欠
つまり、彼は長年にわたって革新的な思考を使って問題を解決してきた人物であり、今回もその思考を使って「AIを使ってアイデアをアプリ化する方法」という問題を解決したのです。
結果は確かに達成されました。
「左右の脳を動かす」アプリとは何ですか?
講義の初めに、Jianming 先生が全員にこのアプリを体験してもらい、とても感動しました。
!【VIBE CODING結果表示】(/images/blog/vibe-coding-left-right-brain-game/vibe-coding-showcase.webp) ▲Mr.イノベーションのVibeコーディング結果表示
このゲームのゲームプレイは実際には非常にシンプルです。4 つの漢字が画面上に表示されます。それぞれの文字について、その文字の本来の意味を発音しなければならない人もいますし、文字の色を発音しなければならない人もいます。プレイヤーは素早い判断を下し、画面下部の選択肢から正しい答えをクリックする必要があります。
簡単そうに聞こえますが、実際にプレイしてみると、脳が行き詰まっていることがわかります。このゲームは、左脳 (言葉や論理の処理) と右脳 (色や画像の認識) を同時に使う必要があるからです。 2 つの脳領域は同時に切り替わり、互いに干渉します。この「行き詰まり感」が楽しさを生み出し、集中力や脳の柔軟性も鍛えられます。
▲ 左脳はワードロジックを処理し、右脳はカラー画像を認識します。両方が同時に動作するのが課題です
ゲームは初級 (60 秒)、中級 (30 秒)、上級 (13 秒)、キングレベル (8 秒) の 4 つの難易度に分かれています。合格するレベルごとにポイントを獲得し、革新的な知識を学ぶことができます。 さらに、一定のポイントを貯めると、建明著「イノベーションの秘密」を入手できるチャンスが得られます。
楽しさ、学び、挑戦を考慮した、全体のデザインが非常に完成度が高いです。 これは本当に情報知識のない人が Vibecoding に頼って作ったものなのでしょうか？ はい、確かに。
インスピレーションはどこから来るのですか? ——先生。 イノベーションの「ひらめき製造機の法則」
次に、Jian Ming 先生が、このゲームのインスピレーションがどのようにして生まれたのかをみんなに共有しました。 この部分は非常に貴重だと感じます。Vibe コーディングに役立つだけでなく、コンテンツ、製品、サービスを作りたい人にとっても非常に刺激的です。
彼は、インスピレーションは何もないところから現れるものではなく、それを生み出すには段階があると述べました。 彼はこの方法を「インスピレーション生成マシンの法則」と呼んでおり、その中心となるロジックは次のとおりです。
革新的なアイデアは、斬新であると同時に進歩的でなければなりません。 真のイノベーションを実現するには、どちらも不可欠です。
新規性とは、市場では見られないものであることを意味します。進歩とは、当初の基準に基づいて改善され、画期的な進歩を遂げたことを意味します。
▲インスピレーションメーカールールの8つのステップ
この基準を持った後、彼はさらに、インスピレーションのプロセス全体のステップ、観察、探索、判断、推論、分析、想像力、イメージ、実行の合計8つの段階について説明しました。
この構造は私にとって非常に共感できます。 なぜなら、私が生徒たちに Vibecoding を指導するとき、よく問題に遭遇するからです。アイデアを持っている人もいますが、そのアイデアは非常に曖昧です。 Jianming 先生のプロセスは、実際に非常に優れた事前作業フレームワークです。
イノベーションに必要な4つの役割：戦士、探偵、画家、審判
インスピレーションのステップを説明する前に、Jianming 教師はまず全員に「イノベーションのプロセスであなたはどのような役割を果たしていますか?」という質問について考えてもらいました。
▲ 革新プロセスにおける 4 つの役割: 戦士、探偵、画家、審判
同氏は、イノベーターがさまざまな段階で果たすべき役割を次の4つに分類した。
- 戦士: 実行と物事の遂行に責任を負います
- 探偵: 観察し、問題やニーズを発見する責任があります。
- 画家: 想像力と新しい可能性を思いつく責任があります。
- 審判: 計画が実現可能かどうかを判断し、評価する責任を負います。
彼は生放送で全員に「イノベーションの過程で、誰が最初に現れますか?」と尋ねました。チャットルームでは様々な答えがあったが、彼が出した答えは――刑事だった。
▲ イノベーションの最も重要な第一歩: まず探偵になってニーズを観察する
イノベーションにおける最も重要な第一歩は、それをすぐに実行する（選手）でも、すぐに良いか悪いかを判断する（審判）でもなく、まず観察することである。 まずニーズを発見し、問題を認識し、現状を理解することによってのみ、真に意味のある変化を起こすことができます。
この視点は、私が教育現場で目にする多くの状況を思い出させます。 多くの学生は、Vibecoding を始めるときに「アプリを作りたい」と焦りますが、解決したい問題は何かと問われると答えられません。ユーザーが誰なのか尋ねても、彼らも知りません。 実際、問題は彼が十分に努力しなかったことではなく、刑事の段階をすっ飛ばして直接軍人になることを急いだことだ。
ゲームの原点回帰：赤い封筒のバッグからスタート
教師の Jian Ming は、この「左脳と右脳を動かす」アプリのインスピレーションの源を共有しました。その起源は誰もが予想を超えていました。彼は以前にデザインした物理的な革新的な作品、Left and Right Brain Creative Red からインスピレーションを受けました。封筒型バッグ。 この赤い封筒のバッグのゲームプレイは、赤い封筒のバッグに書かれた縁起の良い言葉を、左脳と右脳の両方で判断する必要があるパズルのセットにデザインすることです。 たとえば、「Happy New Year」という 4 つの単語の場合、「新」と「年」の意味を発音し、「クアイ」と「乐」の色を発音する必要があります。プレイヤーはルールに従って正しい答えを言わなければなりません。 これにより、赤い封筒の楽しさが増すだけでなく、頭の柔軟性も鍛えられます。
このプロトタイプを作成した後、彼はさらに調査を開始しました。 既存の左脳ゲームと右脳ゲームの欠点は何でしょうか?
彼は、市場にあるほとんどの左脳ゲームと右脳ゲームでは、プレーヤーが単語の本来の意味ではなく、単語の色を発音することだけを要求していることを発見しました。これは少し難しいですが、実際には右脳のみを刺激し、左脳と右脳を同時に訓練するわけではありません。
したがって、この発見により、彼は差別化の入口点を見つけることができました。それは、真に左脳と右脳の両方を同時に使用できるゲームをデザインすることです。
▲ 優れたイノベーションの核心：ユーザーのニーズと感情の深い理解
次に、要求感情テーブルを使用して、プレーヤーが最も求めている体験 (楽しさ、達成感、挑戦感、学習感) を分析しました。彼は、オブジェクト要素と変更要素を使用して、一行に何単語あるか、設定時間は何秒か、ユーザーがプレイを継続できるようにするにはどのようなフィードバック メカニズムが最適かなど、ゲームの詳細を設計しました。
▲ 行動する前にアイデアを「描く」 - ビジュアライゼーションは最高のコミュニケーションツール
最後に、ゲーム全体の画面フローを段階的に描いて明確な視覚的な青写真を形成し、この青写真を AI ツールと連携して作成しました。
Vibe コーディング用ツール:反重力から Netlify まで
Jianming 先生が主に使用しているツールは、Google の Antigravity です。これは、必要な機能を中国語で記述し、AI がプログラム コードを自動生成できる開発環境です。 操作方法は非常に直感的で、右側のウィンドウに必要な関数の説明を入力すると、左側で対応するコードが実行され、現在の画面がどのように見えるかをプレビューすることもできます。
完了後、彼は結果を Netlify に展開し、インターネット上の誰もがゲームを実際に閲覧して使用できるようにしました。
▲ Vibe コーディング ツール選択ガイド: 自分に合った開発ツールを見つけてください
ライブ ブロードキャスト イベント中に、ChatGPT の Codex、Lovable、 など、実際には Vibe コーディング用のツールが多数あることも付け加えました。 href=“https://docs.anthropic.com/en/docs/claude-code/overview” target=“_blank” rel=“noopener noreferrer”>クロード コードなど。各ツールには独自の特徴があります。Antigravity はプログラム開発者のワークフローに偏っています。 Lovable のインターフェイスは比較的直感的で、ChatGPT を使用するのと同じくらい簡単で、プログラミングの経験がない人が始めるのに適しています。 Claude Code は私が最も頻繁に使用するツールであり、複雑なタスクを処理する場合に非常に優れたパフォーマンスを発揮します。
それぞれのツールには独自の特徴と強みがあります。絶対的な有利不利はありません。 重要なのは、使いやすく、予算に合った、やりたい開発をサポートできるものを見つけることです。
エンジニアリング以外のバックグラウンドを持つ人のための 3 つの重要なステップ
ライブ放送全体を通じて、Jianming 教師はアプリを作成するまでの重要なステップをゼロからまとめました。 記録する価値はあると思います。
▲非エンジニア向けの 3 つの重要なステップ
ステップ 1: ツールの基本操作を学ぶ
すべての機能を学ぶ必要はありません。このツールで何ができるのか、どのように操作するのかを理解するだけで十分です。 この段階にはそれほど時間はかかりません。ツールに対する不慣れさを解消することに重点が置かれています。
ステップ 2: アイデアをアイデアで実装する
ツールの使用を開始する前に、やりたいことをコードではなく、視覚的なフローチャートまたは下書きとして描きます。 各画面には何を表示する必要がありますか?プロセスは何ですか? AI とのコラボレーションを開始する前に、まずこれらのことをよく考えてください。
ステップ 3: 段階的に確認してから下に進みます
各ステップが完了したら、結果が正しいかどうかを確認してから、次のステップに進みます。 一度にすべての機能を実行しようとせず、小さな部分に分割し、ブロックを積むように1つずつ積み重ねてください。
▲反復の力: 200 回を超える連続修正
同氏は特に、この「左脳と右脳を動かす」アプリの開発プロセスが200回以上の反復を経たことを強調した。 これは一度にできるものではなく、継続的な修正と徐々に収束するプロセスです。
多くの人は、Vibecoding を使って一言でアプリを作成できると考えていますが、実際には、非常に明確なアイデア、非常に忍耐強い反復、そしてバグに遭遇するたびに諦めない意志力が必要です。
私の 5 時間の挑戦: イベント登録システムをゼロから作成する
質疑応答セッションでは、パートナーが UI 後にオンラインに移行するプロセスについて質問し、私自身の事例も共有しました。
数日前、イノベーション氏と私はこのライブ ブロードキャストを主催することに決めました。そして、言いたかったのは次のとおりです。私は Vibe コーディングを教えているのですから、イベント登録システムを作成し、誰もがこのシステムを使用して登録できるようにしてはいかがでしょうか。
ということで、昨日の朝7時半から開発を開始しました。 正午12時30分までにイベント登録システムが完了し、約5時間かかりました。
イベント内容の編集、チケットの種類や価格の設定、確認メールの送信、キャンセル待ちリストの管理、リマインダー通知の送信など、実際には多くの詳細なシステムが組み込まれています。すべてのステップは、ただ考えてできるものではなく、すべてのプロセスを慎重に検討してから行動する必要があります。
通常、誰もが多くのアクティビティに参加するためにサインアップしますが、誰もがアクティビティにサインアップする完全なプロセスを明確に説明できるわけではありません。 プロセスを明確に説明することさえできなければ、AI がどれほど強力であっても、システムをより良いものにすることはできません。
だからこそ、Vibecodingを始める前に「要件をしっかり考えてプロセスを描く」ことがとても重要なのです。
▲ アイデアに価値はなく、実行に価値があります - ただし、実行する前に、まずアイデアをよく考えてください
💡 **Vibe コーディングの力を自分の手で体験してみませんか? **
私が開設した【Vibeコーディング実践ワークショップ】(https://www.vista.tw/workshop/vibe-coding)では、クリエイティブなアイデアから制作までをオンラインで行い、自然言語とAIのコラボレーションを利用して独自のデジタル作品を作成します。 プログラミングの知識は必要ありません。 アイデアを持ってください。
人間がやるべきこととAIがやるべきことはどれでしょうか?
この生放送中に、私が考えてみる価値があると思った質問がありました。それは、AI と人間のコラボレーションが今後のトレンドであるということです。 では、どの業務をAIに任せ、どの業務を人間自身が行うべきなのでしょうか？
!【人間vsAI 誰が何をするのか？ ](/images/blog/vibe-coding-left-right-brain-game/human-vs-ai.webp) *▲ 人間とAIの分業：誰が何をするのか？ *
建明先生の答えはこうです。
- 観察は誰かが行う必要があります。 現在、AI には五感 (繊細な視覚、触覚、嗅覚、味覚) がないため、現実世界を観察し、生活の細部を認識できるのは人間だけです。
- 検索、これが AI の強みです。 特定の分野の既存の情報、競合製品の分析、市場の概要をすばやく見つけたい場合、AI は人間よりも速くそれを実行できます。
- 判断はまだ誰かが行う必要があります。 AIが提案することはできますが、最終的には「この方向性が正しいか、この決断が良いかどうか」は、本当の文脈や価値観を持った人が判断する必要があります。
- 想像してみてください、人間と AI にはそれぞれの強みがあります。 AI の想像力はデータベースからつなぎ合わせられますが、人間の想像力は人生経験から成長します。
- 実行、AI に大きく依存できます。 AI に明確なアイデアを与えて、コード、草案、コンテンツを迅速に作成できるようにすることが、Vibe コーディングの中核となる価値です。
多くの人は、AI が思考を置き換えることができると考えていますが、実際、AI が最も役立つのは認識や判断ではなく、実行です。 最もユニークなアイデアは、多くの場合、現実世界に対する人々の繊細な観察や感情から生まれます。
Vibe コーディングは単にゲームを作るだけではありません
このライブ ブロードキャストはゲーム開発に関するものですが、強調したいことが 1 つあります。Vibe コーディングではそれ以上のことができるということです。
それを使って何ができるか:
- 個人の Web サイトまたは 個人ブランド ページ
- イベント登録システム（一昨日やったのと同じ（/blog/vibe-coding-build-event-registration））
- コース販売ページまたはランディングページ
- 心理テストまたは対話型アンケート
- 追跡および記録ツール (習慣追跡、読書記録、体重記録など)
- 小さなゲームまたはインタラクティブなエンターテイメント アプリケーション
- 仕事で面倒だと感じ、自動化したいプロセス
重要なのは、何をするかではなく、ニーズを明確に考え、プロセスを整理したかどうかです。
このイベントについてのあとがき
この出来事の後、私は次のような強い思いを抱きました。
実際の事例は、どのようなツールを使って教えるよりも強力です。
Jianming先生はエンジニアでもデザイナーでも、いわゆるテクノロジー関係者でもありませんが、プレイできる完全なアプリを作成しました。 彼が使うのは魔法ではなく、イノベーションの分野で長年磨いてきた観察、分析、想像力、そしてそれを実現するためのVibeコーディングツールです。
これにより、私は次のことをさらに確信するようになりました。**Vibe コーディングの本当の基準は、プログラムを理解できるかどうかではなく、明確なアイデアとそれを試す勇気があるかどうかです。 ** この生放送には 90 名以上のパートナーが参加しており、誰もが独自のアイデアを持っています。 皆さんもこの曲を聴いて、面白くて感動するだけでなく、実際に自分のものを作ってみてほしいと思います。
たとえそれが単なる Web ページであっても、たとえそれが最も若々しいガジェットであっても、それがあなたのアイデアを現実にするための第一歩です。
*▲ 次にあなたのアイデアを作品化できる人はあなたではないでしょうか？ *
Vibe コーディングの学習を続けたいですか?
Vibe コーディングについてさらに詳しく知りたい場合は、登録へようこそ で、Vibe コーディングに関する実践的なコースを提供します。次の 2 つのクラスは、それぞれ 3 月 21 日と 4 月 12 日の午前中に始まります。
*▲Vibeコーディング実践コミュニティに一緒に参加しましょう！ *
さらに、Facebook コミュニティ「Vibecoding Practical Community」も用意しており、現在 1,600 名以上のパートナーが参加しており、皆で作品を共有したり、遭遇した問題について交換したり、励まし合ったりしています。 ぜひご参加ください。 実践しながら学び、学びながら成長していきましょう。
さらに読む
- [Vibe コーディング: プログラムの仕方がわからなくても問題ありません。自然言語を使用してデジタル作品を作成してください](/blog/vibe-coding-natural- language-creation)
- Vibecodingを使ったイベント登録システムの構築：非エンジニアによる実際の開発レビュー
- 【AI時代のパーソナルブランディング完全ガイド：ポジショニングからコンテンツ、マネタイズまで一気にわかる】(/blog/ai-personal-brand-guide)
