さくらもえ 
2025年9月に開催された「ノンプログラマーズ・テックキャンプ2025」。200人ほどの参加者を集め、盛況のうちに終了しました。中でも、テックキャンプ独自のキャラクターたちや、ゲーム仕立てのアプリ「ノンプロクエスト」は、新しい取り組みに。実はその裏側には、AI技術があったといいます。制作担当の2名に詳しく話を聞きました。
※本記事は、202510月に開催されたオンラインイベント「【オンライン無料開催】「ノンプロキャンプ」を支えたAI技術とその舞台裏、すべて見せます！～画像生成・音楽生成・ゲームアプリ開発」（主催：ノンプログラマーのためのスキルアップ研究会、以下ノンプロ研）の内容から構成しています。
コンマリさん ペルソナからビジュアルへ AI×デザインで生み出すキャラクター創作の全工程
今回、キービジュアルの制作を担当しましたこんまりです。
最初に、ノンプロ研主宰のタカハシノリアキさんから「ノンプロキャンプのデザインを担当してくれませんか」とご連絡をいただいたのがきっかけでした。私はノンプロ研に入って半年以上経つもののあまり活動できていなかったので、依頼を受けたのがうれしくて快諾しました。
まず取り掛かったのは、世界観の基となるロゴの検討です。「ベースキャンプのイメージ」がベースにあると聞いたので、『モンスターハンターシリーズ』のベースキャンプを参考にしようと思い、ゲームに詳しい息子に聞きながらタタキをつくり始めました。
つくり始めて気づいたのは「AIでここまでできるんだ！」ということです。私はデザイナーとして働く中で、作業にAIを取り入れてきました。でも、デザイン自体をAIにやってもらうのは到底無理だろうと思い、Adobe Illustratorでデザインしていたんです。ロゴをつくるときはまず素材を探し、それをAdobe Illustratorで加工するというやり方を取ってきました。
でも今回、ロゴの素材を探すとき、ChatGPTにおおまかなイメージを伝えると、「プリミティブに」「原始的に」などのキーワードを具体的に教えてくれました。すごくスムーズに、イメージに合う素材を探し当てられました。いつも長くかかっていた素材探しの時間と手間を大幅に削れたのが、かなり画期的でした。
しかもChatGPTが「この方向で、デザインをつくってみましょうか？」と提案までしてくれて。結果的にいい案ができて、AIもこんなにクオリティが高いデザインをつくれるんだと認識をアップデートできました。
5つの異なるペルソナで世界観を統一
ロゴに加えて、参加者のペルソナをキャラクター化することになりました。
ノンプロキャンプの参加者が内容を自分ごと化するために、参加者と似たような悩みを抱えたキャラをデザインして、まるで同じ世界にいるような雰囲気をつくる狙いです。
最初にできたペルソナは「キャリアの迷い人」「独学の挑戦者」「孤高の改革者」「暗闇のリーダー」の4つで、後から「静かなる観察者」が加わりました。まずは、ノンプロキャンプ運営チームの皆さんが「このキャラクターはこういうタイプ」と5人それぞれ異なる個性を設定してくれて、それを1つの世界の中に描きだしていきました。
参加者がどんな動機でノンプロキャンプに参加するのか知りたくて、参加動機をまとめたシートからグルーピングとラベリングをしたり、ChatGPTやMidjourney（画像生成AI）と壁打ちしたりしました。最初は不安混じりで、何度も運営チームに相談しながら進めました。
いちばん難しかったのが、統一感を出すことです。かわいいキャラクターをつくるのはAIの得意分野ですが、5つのペルソナがある中で、どうやって世界観を保つかが大きなポイントになりました。
2025年8月にGeminiのAI 画像生成＆写真編集ツール「Nano Banana」（ナノバナナ、正式名称：Gemini 2.5 Flash Image）がローンチされたので、これを使えば一貫性のある画像をつくれると思います。ただ、ノンプロキャンプの準備期間にはまだローンチ前だったんですよね。
キャラデザの作成は3ステップで進行
ここからいよいよキャラクターデザイン（キャラデザ）です。全体は3ステップで進めました。
まず、タタキとして1人で考えたキャラデザがこちらです。意図的に緑、赤、黄色、黒の4色でテーマカラーを割り当てるよう、AIに指示しました。また男女のバランスは2:2にし、偏りがないようにしました。
複数のイラストに統一感を出すのは本当に大変で、私が活用したのはMidjourneyでした。イラストのスタイルやトーンを指定したり、好きな画風を登録したりできるので便利なんです。言葉だけでAIにイラストの修正を指示するのは難しいので、AIをうまく使うのがおすすめですね。
またMidjourneyには、AIがイラストを上下左右に拡張してくれる「ズーム」機能もあります。イラストの端が切れてしまった場合はこれで調整できます。CanvaやAdobeのソフトにも似た機能があって、とても便利です。
AI×人間の編集力が生んだ「最高のキャラクターデザイン」
キャラデザをタタキから納品レベルにブラッシュアップする過程では、運営メンバーのhachiさんから、具体的に修正の希望をもらいました。
例えば「『キャリアの迷い人』は、表情を困った感じにして、古い地図を不安そうに見ている雰囲気を出してほしい」というふうに。細かく指示してもらえたので、スムーズに修正できました。
普通、一度描いたキャラクターを描き直すのはかなり大変です。でも今回はAIに描いてもらったので、修正希望が具体的であればあるほどやりやすいと気づきました。hachiさんが各ペルソナのコンセプトを深く理解されていて、上手に言語化してくれたからこそできたことだと思います。
＜hachiさんより＞
当初4つのペルソナを設定したとき、運営メンバーが集まってアイデアを持ち寄ったり、参加動機シートを見たりして、4人の裏側にあるストーリーを考えました。4人のキャラクターがそれぞれ抱えている思いや悩み、直面している困難などをじっくり考えた経験は面白かったし、デザインづくりにも生きたと思います。また、私自身が「キャリアの迷い人」を経た「孤高の改革者」の1人であることも、思いを具体化するのに役立ちました。
「独学の挑戦者」は、初稿から大きく変わっていません。ただ、このキャラクター個人がぐっと成長した雰囲気を出しました。
「孤高の改革者」は、いちばん細かい修正を繰り返したペルソナです。初稿から「しゃがみこんでいる」「ひざをついている」「泣きそうな表情」など手を加えました。
改革者という言葉にはチームを引っ張るリーダー、監督というイメージがありましたが、今回はそうではなく、強い芯を持っているけど苦しんでいて、孤高に立ち上がりつつある……というストーリーを込めました。性別も、男性から女性へ変更しました。
「暗闇のリーダー」は、中年男性のペルソナを足したいと考え、性別と年代を変えました。私がこれまであまり中年男性を描いてこなかったこともあり、最初はかっこよくなりすぎてしまいましたが（笑）。調整に調整を重ねて、ちょうどいい表情に仕上げました。
そして最後に追加された5つ目のペルソナが「静かなる観察者」です。
「ほか4つのペルソナのどれにも当てはまらない参加者もいるのでは」という意見から生まれたそうです。まだ迷ってもいないし挫折もしていない人をキャラクターにしました。フードを深くかぶっていて、目が全部隠れているのがポイントです。
「AI×デザイン」実践ガイドライン
画像生成AIは、この数か月でだいぶ進化しました。画像をアップして「SF風のイラストにして」といえばその通りになるし、イラストの修正もできます。例えば「このキャラにこの帽子を被せて」と頼めば、そのキャラの服装や色味、雰囲気にあった帽子を被せてくれます。
今回私が実感したとおり、デザインの起点にAIの画像生成を使うのはとてもいいやり方です。爆発的に効率と精度が上がりました。AIを使えば、誰でもクオリティの高いイラストを描ける時代になったといえます。
でも結局、AIは道具です。AIのアウトプットに対して、自分の思いや判断、センスを加えないと、納品できるレベルに仕上げることはできません。AIの力と人間の能力を融合させて、一貫性のある質の高い作品をつくり上げていく。そんな方法がこれからのスタンダードになりそうです。
デザインにAIを使うとき、大事なのは3つです。1つ目は、クライアントの構想を客観的に、正確に受け止めることです。クライアントがどうしたいのかを丁寧に聞いて、受け入れる力量がいります。
2つ目は、情報の編集力を磨くこと。私は、与えられた情報を編集することこそが、デザイナーの力だと思っています。3つ目は、受け取り手が自分ごと化できるような物語を添えること。ただ単にきれいなものやかっこいいキャラクターでは、あまり人の心に響きません。そこにはストーリーが大事です。
今回、ノンプロキャンプでのデザイン経験を生かして、私自身もいろいろな学びがありました。とてもいい機会をありがとうございました！
Kumaさん 初めてのフルAI開発アプリ「ノンプロクエスト」ができるまで
ノンプロキャンプの連動アプリ「ノンプロクエスト」をつくった、Kuma（クマ）です。これまでシステム系やDX、人材育成、組織開発などの仕事をしてきたノンプログラマーです。
ノンプロクエストの特徴は「学びやイベントを冒険に変える」という独自のコンセプト、参加者それぞれに自分だけのストーリーや称号が自動生成されることです。ノンプロキャンプのサブコンテンツとして、ノンプロキャンプ参加者の皆さんがスマホで、イベントの合間に楽しめるようなものを目指してつくりました。
軽い気持ちでブレストに参加したら、アプリを開発することに！
そもそも私がノンプロクエストをつくることになったきっかけは、軽い気持ちでノンプロ研の定例ミーティングに顔を出してみたことです。
ミーティングではノンプロ研のみんながブレストをしていたので、私も適当に「オンライン焚き火とかどうですか？」とアイデアを出してみました。参加者の投稿を薪に見立て、それらを焚べてキャンプファイヤーをするというものです。
どんなアイデアでも歓迎されるのがノンプロ研です。私からもう1つ「ノンプロクエスト」というアイデアを出しました。
以前の仕事で、大学生が有償インターンとして地域企業の課題に取り組む「キャリアクエスト」というプログラムを担当したことがありまして。その際に、インターン生を募集するにあたって、企業の課題を大学生にわかりやすく伝えるために、生成AIで作成したゲーム画面風のパワーポイント資料を作りました。学生たちには、「会社の課題をどう解決できるか（＝モンスターをどう倒すか）」というテーマで挑戦してもらいました。
そこから今回のノンプロキャンプでもなにか”クエスト”をやろうという流れになり、ノンプロクエストという企画を提案したところ、私のアイデアは無事に採用され、本番でもやることが決まりました。私も「みんな、がんばれ〜」と気楽に楽しみにしていました（笑）。ノンプロ研では、みんながいろんなスキルを持っているので、きっとみんながいいかたちにしてくれるんだろうなと思ったんですよね。
別の日には「ノンプロキャンプで流すBGMをつくろう」という話になりました。私はなぜか、ノンプロ研に入る前にノンプロのイベント「もくもく会」に参加し、ノンプロ研のテーマソングをつくったことがあって（笑）。それも提案したら採用されました。
ちなみに、「Suno」というAIを使うと簡単に音楽をつくれます。歌詞はChatGPTに書いてもらって、Sunoで曲調やジャンルなどを指定するだけ。とても簡単です。
また別の日は、「せっかくならクエストアプリがほしいね」という話が出ました。イメージ共有のために、とりあえず簡単なモックアプリをつくって提案してみたところ、なんと「これいいじゃん、本番でも使おう！」という流れに……！
私はAIでモックアプリをつくっただけで、本番用アプリをつくった経験は一度もなかったのですが、ノンプロ研のみんなから任され、徐々に巻き込まれていきました。
ChatGPTに要件定義を壁打ち→「Replit Agent」で開発
今回私がアプリ開発のために使ったのは、クラウドベースのアプリ開発環境「Replit Agent」（リプリット エージェント、以下Replit）というAIです。自然言語で簡単に開発の詳細やデザインを指示でき、チャット欄とアプリ画面を同時に見ながら作業できます。
またデータベースを使ったりAIを組み込んだりデプロイ（開発環境から本番環境への展開）をしたりと、いろんなことがReplit内でできるのが便利です。最近は新モデルの「Agent 3」が出て、さらに性能が上がりました。
アプリをつくるときに私がまずやることは、ChatGPTに壁打ちしながら要件定義することです。最終的にできた要件定義の内容をReplitにコピペすれば、希望に沿ったアプリが出来上がります。細かい仕様や機能、仕組み、インターフェースはReplitに相談しながら変えることもできるし、「Replitにまるごとお任せ」もOK。
修正の過程ではAIとチャットで会話することになりますが、そのとき大事なのは、AIと自分の認識を一つひとつ合わせていく作業です。例えばノンプロクエストでいうと、スクショを貼って会話することで、画面のうちどの部分をなんと呼ぶか、お互いの認識がズレないように確かめながら進めていきました。
報酬制と「ノンプロ研っぽさ」がこだわり
私のこだわりとして、ノンプロクエストでは「報酬」の要素を強くしました。ユーザーは、1つのクエストをクリアすると宝箱を開けることができて、トレジャーハント的にアイテムがもらえる仕様です。
もう1点、「ノンプロ研っぽさ」を入れたいと思いました。ノンプロ研では、講座やイベントに参加するとき、学びや感想をたくさんXに投稿してアウトプットしまくることが推奨されています。ただ、私自身、ポストのたびに毎回ハッシュタグを入れるのが少し面倒に感じていました。
なので、ノンプロクエストではアプリ内でXのシェアボタンを押すと、Xが立ち上がり、自動で「#ノンプロキャンプ #ノンプロクエスト」のハッシュタグが入る仕様にしました。個人的にとても推しのポイントです。
アイテムや背景画像などの素材の作成にも、AIを活用しました。まずクエストの内容を表すテキストからアイテムの画像を生成するGPTsをつくって、画像のトンマナを統一しました。さらに背景画像などが必要な場合は、ChatGPTでプロンプトを書いて、それを元にMidjourneyでイラストを生成し、さらにCanvaで合成するという流れです。
こうして作成した素材をどうやって画面に反映していくか？ 素材を登録する管理画面をつくるのがおすすめです。いかにもAIが作ったアプリっぽい画面に、素材を組み合わせることで、ゲームっぽさを出せます。
裏側に管理者だけがアクセスできる「クエスト管理」画面があります。そこに入ると、アイコン画像やアイテム画像をアップロードできて、画面に反映されます。あとから変更があってもそこで修正できるし、プログラミングがわからなくても誰でも反映できます。こちらもReprit上でAIに「管理画面をつくって」といえばできます。
APIを使えば、アプリの中にもAIを組み込める
また、せっかくだからノンプロクエストの中にもAIを組み込むことにしました。Replitでは、APIキーを登録するだけでAIを使えるようになります。登録も簡単で、Replitのチャット上で「アプリとAIを連携したい」と伝えるだけ。
例えば「OpenAI API」を使ってなら、ChatGPTのような会話AIをアプリに入れられます。AIの頭脳を、アプリに呼び出して使うことができるんですね。
AIで「自分だけの称号をつける」「ジャンプ打ち切り形式」を実現
AIと連携したことで実現した機能が2つあります。1つ目は、「クエストを制覇したときに、そのユーザーだけの称号をつける」というものです。自分だけの称号がもらえるって、ワクワクしますよね。参加者みんなに称号がついて、それを共有し合う未来が生まれたら面白いんじゃないかと思いました。
仕組みとしては、プロンプトに、そのユーザーがアプリに書き込んだ内容や取り組んだ内容に基づいた称号をつくるように指示しています。真面目にやった人はかっこいい称号が、そうでない人には微妙な称号がつきます（笑）。これであれば画像生成や音声認識などと違ってトークンを使わないので、コストもかからないとかなと。
2つ目は、「ジャンプ打ち切り形式」の表現です。せっかくなら、ノンプロキャンプに参加してくれた方々の挑戦を応援できるアプリにしたかったので、クエストの最後で、エンディングではなくプロローグ（序章）を始めようと思い付きました。ノンプロキャンプに一日参加して終わりではなく、これから冒険が始まるのだよと。
使ったのは、AIでプロローグを生成する機能です。プロンプトにはユーザーがしてきた行動を褒め称えたり、サブタイトル「ここが僕らのベースキャンプ」を必ず入れたりと、細かいところまで指示しました。
それからノンプロキャンプ当日まで、クエスト内容を確定したり、アプリを軽量化したり、セキュリティ対策としてAIにハッキングテストさせてみたりと、調整を繰り返しました。テストプレイにはChatGPTのオペレーターも活用しました。
こうして無事に、ノンプロクエストが完成しました。迎えたノンプロキャンプ当日は、約200人の方が参加してくれて、ものすごい盛り上がりでした。情シスの性で（笑）前日にセキュリティを厳しくしすぎて、同時接続可能数が少なくなっていたのが反省点です。
仕事と並行しながら本番用アプリをつくるのは本当に大変でした。でも予定通りにリリースできて、ユーザーの皆さんから感想を聞くと報われるし、これからの励みにもなります。やってよかったなと思っています！