【宮本佳林AIサイト制作プロジェクト】第1回：どんなサイトなら、ファンに楽しんでもらえる？

宮本佳林さんは、AIを活用した独自のYouTube配信システムの構築や、アプリ開発にも取り組む新時代のアイドル。そんな宮本さんがWeb制作会社のちょっと株式会社とタッグを組み、AIを活用した特設サイトづくりに挑戦します。全3回でお届けする企画の第1回は、デモを囲んでの作戦会議。写真にボイス、クイズまで、ファンを楽しませるアイデアが次々に飛び出しました。

歌って、踊って、アプリもつくる！ 宮本佳林さんってどんな人？

まずは、宮本佳林さんと今回のプロジェクトについて、簡単にご紹介しましょう。

宮本佳林さんは、ハロー！プロジェクトのアイドルグループ「Juice=Juice」の結成メンバー。2020年のグループ卒業以降はソロで音楽活動を続けています。そんな宮本さんの公式プロフィールの趣味欄には、アニメや漫画、ボカロに並んで「バイブコーディング」の文字も。AIに言葉で指示を出し、コードを書いてもらう開発手法です。

開発の入り口になったのは、「こんな音楽アプリがあれば、みんなを笑顔にできるのでは」という発想。ChatGPTにコードを書いてもらうところから始め、クラウドにも興味を持って勉強するように。その後、本職のエンジニアさんたちにもWebアプリ開発を教わり、診断サイトやイベントのアンケートなど、活動に役立つものを自ら形にしてきました。

2026年7月には、10時間のYouTube生配信を支えるシステムも、主にClaude Codeを使って制作。ファンに楽しんでもらうための工夫が、アプリやシステムづくりへと広がっています。

今回のプロジェクトのきっかけは、宮本さんが雑誌『Mac Fan』で長年連載を持っていたこと。その縁から、同誌を発行するマイナビ出版のメディア『Web Designing』で、AIを活用した特設サイトづくりに挑戦することになりました。

目指すのは、宮本さん本人のようなAIと、訪れた人が会話を楽しめる場所。ちょっと株式会社と一緒に、宮本さんらしい受け答えや、ファンが思わず遊びたくなる仕掛けを考えていきます。

「私がめっちゃ書きそう！」まずはAI宮本佳林のデモを体験

小島芳樹（以下、小島）　　今回は、僕らが開発した仕組みを活用して、特設サイトをつくれたらと思っています。どんなことをするかをイメージするのに、まず、僕らのコーポレートサイトをお見せします。トップページがChatGPTのように、文章で会話できるようになっているんですよ。

例えば「Next.jsって何？」と入力すると、Webサイトに載っている記事などから情報を引っ張ってきて、AIが回答してくれます。今回は、この仕組みを使いたいと考えています。

ヒョン・ユンドン（以下、ヒョン）　　さらに、今日はデモも持ってきました。画面をご覧ください。

宮本佳林（以下、宮本）　　わー！！ かわいいキャラクター！

ヒョン　　宮本さんの写真を使えるかどうかがわからなかったので、いったんアニメーションのキャラクターにしました。この画面で、訪問者の方が「次のライブは？」と入力して尋ねたら、返事が返ってくるという動きを考えています。

小島　　それともう1つ。宮本さんのブログをもとに、口調を真似られないかなという実験もしてきました。

宮本　　普段のブログは自分の言葉で書いているので、私の文体が出ていると思います。

平岡洋祐（以下、平岡）　　ブログから口調の特徴を抽出して、それを真似て回答するように指示しています。あとはRAGという仕組みで、過去のブログの内容を参照して回答できるように、実験的につくっています。

試しに、宮本さんから何か聞いてみてもらえますか？

宮本　　えーっと、「自分のこと、どう思っているんですか？」…と。

小島　　意外と長文で返してきた！

宮本　　私、けっこう長文で書くんですよ。…え、すごい。私がめっちゃ書きそうな内容！　それに「思うのです」とか、私もよく文末に書いてます。

平岡　　今のブログだけでなく、Juice=Juice時代のブログの内容も入っています。

小島　　過去のライブや、これからの日程なども入れておけば、「来週は何をするの？」と聞いたときに答えることもできます。ファンにとって、便利なツールとして使えるものにもできそうですよね。

宮本　　これはすごい！

写真も、ボイスも、クイズも？ アイデアが止まらない

小島　　ここからは、どんな感じにしていこうか、という話をざっくばらんにできれば。考えてきたことがあれば、ぜひ。

宮本　　AIのキャラクターイラストが動いているのはすごくかわいいなと思いつつ、実際の宮本が動いてもいいのかなと思いました。

私がAIを使うときは、本来誰かにお願いする仕事を削るというより、自分1人でなんとかやりくりするために使う、という方向にしているんです。絵を使う部分でのAI利用は、気をつけたいなと思っています。

小島　　写真が使えるかが事前にはわからなかったので、そこは確認したいと思っていました。

宮本　　確認しますが、きっと大丈夫だと思います。あとは、楽曲のデータをお渡しして、音楽をオンにすると流れるようにするのもありかなと。やっぱり音楽的な要素は入れたいです。

ヒョン　　音声での会話も、考えられそうですね。

宮本　　音声合成するよりは、「ありがとう」とか、私自身の言葉をそのまま録音して返せるほうがいいと思います。

小島　　特定のパターンのときだけ声が出るとか。

宮本　　「レアなボイスが出たぞ！」みたいな（笑）。あと、テスト問題とかはできないですかね？ 「佳林ちゃんについてどれくらい知ってる？」みたいな。昔のブログで何を書いていたかとか、絶対に解けないだろうという問題も出したり。

小島　　何度も来てもらうために、ゲームっぽい要素をつけるのはありだと思います。チャットにテキストを返すだけでなく、選択肢のボタンを出して回答してもらうこともできます。

宮本　　あと、どんなタイプのファンなのかを診断するのも面白そうですね。

小島　　本人が回答しているというより、バーチャルな宮本さんが回答しているということも、注意書きなどで伝えたいですね。

宮本　　あとは、ブログの内容から答えるだけじゃなく、今の私が回答したほうがいい質問も出てくると思うんです。質問を管理画面にためてもらって、私が時間のあるときにまとめて答えて、回答が増えていくのもいいのかなと思います。

楽しんだ先で、新しいファンに出会えるサイトに

小島　　順番が逆になってしまいましたが、今回の特設サイトの目的とターゲットを、ちゃんと……。

宮本　　決めよう！

小島　　1つは、新たなファンとの出会いが生まれればいいなと思っています。既存のファンだけに突き詰めていくと、見る人が狭まってしまうので、どちらかというとライト層を狙うイメージで考えていました。そこは大丈夫そうですか？

宮本　　もちろん、それがいいと思います。昔からのファンの人にも楽しんでほしいですけど、若い人たちにも面白いと思ってもらって、遊んで、シェアしたくなるようなものをつくりたいです。

あとは、エンジニアさんやAIの分野で働いている方にも、「この企画、面白いね」と思ってもらえるWebサイトになったらうれしいですよね。私がつくっているものも、自分が欲しいものを必死でつくっていただけなのに、面白いと言っていただけたので。

小島　　特設サイトでの体験としては、チャットでやりとりをして、最後にシェア用の画像ができ、それを広めてもらうことが、1つのゴールになりそうですね。

それ以外にも、例えば企業のサイトなら資料請求や問い合わせ、アーティストならCDの購入など、つなげたい先があると思うんです。この時期のイベントを告知したい、などはありますか？

宮本　　ライブハウスツアーのチケットの案内は出したいです。あとは、音楽配信サービスへのリンクも入れてもらえるといいのかな。ファンの人に楽しんでもらうことも大切ですけれど、そこからさらに価値につながったらと思っています。新しい方にも「あ、こういう子なんだ」と知ってもらえたら。

次はいよいよデザイン制作！ 一緒につくる準備も始めよう

小島　　宮本さんの普段のアプリ開発では、どういうふうに見た目を決めているんですか？ AIに「こういう色にしたい」「こういうデザインにしたい」と伝えているんでしょうか。

宮本　　まずChatGPTと、つくりたい内容や機能を決めていきます。内容が決まってきたら、「今あなたがつくろうとしているものを、画像で見せて」と言うんです。

出てきた画像を見て、「ここはこの色じゃなくて、こういう色がいい」と指定して、もう1回画像を出してもらいます。会話しながら詰めて、まとまったものをClaudeにドカンと投げて、つくってもらう形です。

小島　　なるほど。では今回も、こちらでワイヤーフレームという、装飾のない下絵のようなものを用意して、それをもとに「こういう見た目にしたい」というデザインをつくってもらう進め方がよさそうですね。そのデザイン画像を送っていただければ、僕らが実装していきます。

逆に、チャレンジしてみたいところはありますか？

宮本　　コードが読めないので、触るのはちょっと怖いんです。でも、GitHubでどういうふうにやりとりをしているのかは見てみたいです。そこを理解できたら、すごく勉強になるなと思います。

小島　　わかりました！ せっかくなので、今日チャレンジしましょう。

GitHubはソースコードの管理だけでなく、プロジェクトをどう進めるかの管理にも使います。「ここを直してほしい」「こういうふうにしたい」と書き込んで、担当者をつけたり、優先順位を整理したりできるんです。

宮本　　めっちゃ便利なんですね。実は、GitHubを触れたらかっこいいなって、中学生くらいのときから思っていました。もともとコードには興味があったんですけど、ハードルが高すぎて。今はAIのおかげで、そのハードルがすごく下がっている感じですね。

ヒョン　　準備できました。これでプロジェクトに入れると思います。

小島　　「Issue」というタブがあると思います。ここは、バグの報告とか、直してほしいことを書いておく場所です。試しに何か書いてみてください。

宮本　　えーっと…「よろしくお願いします」。投稿されてますか？

小島　　来てます。めちゃくちゃレアなIssueじゃないですか、これは。

平岡　　あとは、ClaudeからGitHubを操作できるツールも入れておきましょう。GitHubを直接操作せずに、Claudeからプルリクエスト（共同作業でのレビュー依頼）をつくってもらうこともできます。

宮本　　ありがとうございます。ほかの開発もはかどりますね。うれしい！

小島　　今日の話を踏まえて、僕らは裏側の仕組みや、どんな機能を持たせるかを考えてきます。進捗も共有するので、次回は実際にChatGPTを使ってデザインをつくってみましょうか。それまでに「こういうふうにしたい」というアイデアを集めておいてもらえれば。

宮本　　わかりました！ 次も楽しみです！

デモから始まった作戦会議は、写真やボイス、クイズ、診断と、さまざまなアイデアが飛び出す時間になりました。次回は、いよいよ宮本さんがデザイン制作に挑戦。今回のアイデアがどんな画面になっていくのでしょうか。第2回にご期待ください。

※記事の内容は打ち合わせ時点のものです。最終的な特設サイトの内容とは異なる場合があります。あらかじめご了承ください。

※ちょっと株式会社のOrizm事業およびWeb制作事業は、2026年12月1日付で新会社のAX ONE株式会社に承継される予定です。

Text：小平淳一　Photo：山田秀隆