メインコンテンツへスキップ
見出し画像

3歳の娘に仕事を聞かれ…知識ゼロママの「Geminiとやってみた!」めくれる絵本アプリ開発記

    Lステップ連携ラボ

    すべての始まりは、3歳の娘からの、まっすぐな質問


    「ねぇ、ママ。おしごと、なにしてるの~?」

    もし、あなたがお子さんにそう聞かれたら、なんて答えますか?

    ある晴れた日の午後。積み木で遊んでいたはずの3歳の娘が、ふと手を止めて私に問いかけました。その瞳は、公園で見つけたキレイな石ころみたいに、混じり気のない好奇心でキラキラと輝いています。

    画像

    「ママはね、えーっと…AIっていう…あのね、すっごく賢いパソコン…ううん、ロボットかな?…が、みんなのお仕事を助ける、その…お手伝いをしてるんだよ」

    うんうん、よくわかんないよね。
    ママも何を言っているのかよく分からない。

    はい、ママの説明終了!チーン。

    しどろもどろな私の言葉で、案の定、娘の頭の上を「?」がふわふわと通り過ぎていったようです。

    大人相手なら「AI技術を活用して、業務を効率化するシステムを開発しています。」と、それらしく数秒で説明できるのに。
    (まぁ、旦那の頭上にも「?」は飛びましたが…)

    ああ、うまく伝えられない。
    この、未来をちょっとだけ早く連れてくるような仕事を、この子にも分かりやすく伝えたい。

    どうにも言語化しにくいママが毎日一生懸命している「何か」の正体を、少しでも共有できたら。そんな想いだけが空回りする、もどかしい気持ち。
    きっと、世の中の多くのパパやママが、一度は味わったことのある感情ではないでしょうか。

    頭を抱える私の目の前で、娘はお気に入りの中から一冊の絵本を手に取り、私の膝にちょこんと座りました。「これ、よんで」と差し出された絵本をぼーっと眺めていた、その時でした。

    ――ハッ!

    そうだ、私の仕事って、そもそも何だっけ?
    それは、まさに
    「難しい物事を、AIの力を借りて、解決に導く」
    ことじゃなかったか! いつも仕事でやっていること。
    なぜ、自分の娘のことになると、すっかり忘れていたんだろう。

    目の前の「伝えるプロ(AI)」の存在を無視して、一人でうんうん唸っていたなんて。灯台下暗しとは、まさにこのこと。

    「AIに、私の仕事の説明を手伝ってもらえばいいんだ!」

    このひらめきが、知識ゼロの私を、無謀とも思える挑戦へと突き動かす、すべての始まりでした。

    Gemini、物語を紡いで!


    どうせなら、娘が大好きな「絵本」にしよう。
    しかも、ただの絵本じゃない。
    指でページをめくれる「Webアプリの絵本」にしよう!

    そうだ、この絵本自体を「バーチャル職場体験」にしてしまおう!

    会社で目を輝かせながら働くインターン生の姿をよく見ていたからだろうか。ふと、娘を「新人インターン生」として、絵本の中で私と一緒にプロジェクトを進めてもらうというアイデアが浮かんだ。そうすれば、ただ物語を読むだけでなく、ママの仕事を「体験」してくれるかもしれない。

    アイデアが固まれば、もう止まりません。

    「よし、決めた!」

    絵本を作った経験、ゼロ。
    プログラミングの知識、ゼロ。
    Webアプリ開発の経験、もちろんゼロ。

    手元にあるのは、娘に私の仕事を伝えたいという溢れんばかりの情熱と、自分でも呆れるほどのちょっぴりの無謀さだけ。

    こうして、AIの「Gemini」を頼れる(?)相棒にした、知識ゼロママの七転八倒の開発記が、静かに幕を開けたのでした。


    まずは情報整理。NotebookLMは魔法の箱


    絵本を作るには、まず物語の「素材」が必要です。
    私の仕事に関する、ありとあらゆる情報です。

    私の頭の中には、これまで手掛けたプロジェクトの記憶、チームのチャット履歴、山のような資料データが、ごちゃ混ぜになったおもちゃ箱のように散らばっていました。これを一つずつ整理するのは、考えただけでも気が遠くなる作業です。

    そこで思い至ったのが、AIの活用でした。

    私が白羽の矢を立てたのは、Googleの「NotebookLM」。

    画像

    これは、アップロードした資料の内容にのみ基づいて、AIが事実を整理し、要約や質問への回答をしてくれる、まさに「第二の脳」と呼ぶべきツールです。

    私は早速、新人インターンを受け入れた際の研修資料や、過去に担当したプロジェクトの企画書など、関連しそうな情報を手当たり次第にNotebookLMに読み込ませてみました。まるで、散らかった部屋のものを、一旦すべて魔法の箱に入れてしまうような感覚です。

    画像
    まずは連絡用チャットの会話履歴を入れてみました。

    「私の仕事の面白いところをリストアップして」
    「チームの雰囲気を言語化して」

    特に後者は、人間でも難しいかなり無茶なリクエスト。投げてる私もそう思いました。
    しかし、数秒後、画面に表示された結果を見て、その分析力に圧倒されました。

    画像

    それは、単なる情報の要約ではありませんでした。

    NotebookLMは、おびただしい量のチャットログ(10万字越え!)から「手厚い新人サポート」や「お互いを思いやる温かい雰囲気」、さらには「絵文字を多用した感情豊かなコミュニケーション」まで読み取り、「協力的で助け合う文化」があると分析。

    それだけではありません。具体的な成果を過去の資料から的確に抽出し、私たちのチームが「革新的で問題解決志向」であると分析してくれたのです。

    自分でも言語化できなかった仕事の面白さ、チームの魅力が、そこにはありました。ごちゃごちゃだった頭の中が、すーっと整理されていく快感。
    これなら、娘にも伝えられるかもしれない。

    そして、AIはそれらの分析を、下記のような一文で締めくくってくれました。

    「これらの点から、技術革新の最前線に立ちながらも、人間味あふれる協力的な関係性を大切にし、常に前向きに課題解決に取り組む、非常に魅力的でダイナミックなチームであると言えます。」

    …チームのみなさーん!「魅力的」ってAIが言ってますよー!
    と、思わず心の中で叫んでしまいました。

    (これは山のような資料の読み込みや、会議の議事録作成など、ビジネスシーンでも絶大な効果を発揮するはず…)

    こうして、私たちの絵本作りは、物語の核となる確かな「素材」を手に入れたのです。


    物語を創ろう! Geminiとの共同作業

    素材が揃えば、次はいよいよ物語の創作です。
    ここからは、Geminiの創造力が試されます。

    私は、新しく開いたチャットウィンドウに、最初の指示を打ち込みました。

    あなたは見習いのインターン生。私の仕事をテーマに、物語を考えて!

    ワクワクしながら待っていると、Geminiはすぐに物語を提案してくれました。

    画像

    「おぉ…なんかお固い部署の物語が出てきた…」


    返ってきた物語は、どこか優等生的で、心が躍るようなものではありませんでした。悪くはないけれど、ドキドキもワクワクも足りなかったのです。

    もっとファンタジーな感じがいいのだけど…。一人でぶつぶつ呟きながら、何度も指示を修正しては、新しい提案をもらう。
    この往復作業に、少しだけ非効率さを感じ始めた、その時でした。

    ふと、Geminiのチャット画面の隣にある「Canvas」という機能が目に留まったのです。

    画像

    見つけたCanvasの便利さ!


    これは、AIとのやり取りをチャット形式だけでなく、まるでノートやホワイトボードのように、一つの場所に書き溜めて、直接編集したり、追記したりできる機能です。

    画像

    まさに「これだ!」と直感し、すぐにやり取りをCanvasに切り替えました。

    すると、そこには新しい世界が広がっていました。私が書き込んだアイデアに、Geminiが新しい提案を教えてくれる。それを見て、私がさらにアイデアを膨らませていく…。

    画像

    まるで、Geminiと二人で一つのノートを覗き込みながら、一緒に物語を創り上げている感覚。

    「もっとこうしたら?」「そのアイデアいいね!」といった、活発な意見交換が目に浮かぶようです。AIとの壁打ちが、格段に楽しく、スムーズになりました。

    そして、私は気づいたのです。 AIの力を最大限に引き出すには、コツがいるのだと。


    【プロンプトのコツ】ちょっとした指示の工夫で、答えは変わる

    【失敗例】ざっくりした指示

    私の仕事をテーマに、面白い絵本を考えて。

    これだと、AIは何を「面白い」と感じるのか、読者層はどこなのか、どんなトーンで語ればいいのか、全く分かりません。
    その結果、どうしても当たり障りのない、一般的な答えしか返ってこないのです。

    【成功例】具体的で、役割を与える指示

    # 指示書: 最高の絵本物語を創る
    
    ## あなたの役割
    あなたは、子どもたちの心を鷲掴みにする物語を紡ぐ、世界一の絵本作家です。
    
    ## 背景と目的
    私は、3歳の娘に「ママの仕事」を伝えるため、AIの力を借りて絵本アプリを作っています。これからあなたと、その物語の核となる部分を一緒に創り上げていきたいです。
    
    ## 参考資料
    以下に、NotebookLMが私の仕事やチームについて分析した、客観的な情報を添付します。この資料が、私たちの物語の土台となります。
    [ここにNotebookLMの要約を貼り付け]
    
    ## 依頼事項
    上記の参考資料を踏まえ、以下の条件で物語を創作してください。
    
    ## 条件
    - ターゲット読者: 3歳の女の子
    - ページ数: 全10ページ
    - テーマ: ママの仕事(AIで人を助けること)
    - 雰囲気: ワクワクするような、心温まるファンタジー
    
    ## 登場人物:
    - 主人公: りなちゃん(3歳の新人インターン)
    - ママ: AIマスター
    - チームのみんな: ママの頼れる先輩や仲間たち
    
    ## 出力: りなちゃんが、初めての「おしごと」に挑戦する物語

    この、想いを込めた指示書を送ると、数秒後、Geminiから返ってきた物語は、まさに圧巻でした。

    画像
    Geminiが作ってくれた1ページ目の文章はこちら↓

    りなちゃんの はじめての おしごと
    1. はじめての おしごと!

    あるあさ、りなちゃんは ぴかぴかの おめめを まるくしました。
    「きょうは、ママと いっしょに おしごと!」
    りなちゃんは、あたらしい おしごとみならいさんなのです。

    ママの おしごとはね、まほうみたいに
    みんなの「こまったな」を「できた!」に かえることなんだって。

    『これだ!私が欲しかったのは、まさにこんな物語!』

    思わず、画面の向こうの相棒、『Gemini』に心からの拍手を送っていました。

    AIは、単純な指示を出しただけでは、その能力を最大限に発揮しないのだと、この時、はっきりと理解しました。
    こちらが意図や背景を具体的に伝えることで、AIは初めてその能力を最大限に発揮し、期待を超える創造性を見せてくれるのです。

    さあ、物語はできた。 次はいよいよ、この物語に命を吹き込む「絵」と「動き」――つまり、プログラミングという未知の世界へのダイブです。

    ここからが、本当の戦いの始まりでした。


    暗闇の中のコードと、二人三脚のゴール


    「ページがめくれる、絵本のWebアプリを作りたい」

    Geminiにそう伝えると、こともなげにこう答えました。

    「それなら、HTMLで骨組みを作り、CSSで飾り付けをして、JavaScriptで動きをつけるのが一般的ですよ」

    聞いたことはある。うん、知ってる。
    でも、自分でコードは書けないし、何より時間がない。
    …という言い訳をしてみる。

    GAS活用のひらめきの瞬間

    (やっぱり、無謀だったかな…)
    諦めにも似たため息が漏れた、その時。

    ふと、社内のチャットで同僚がGAS(Google Apps Script)を使って業務効率化のWebアプリを作っていた、という事例を思い出したのです。

    ――待てよ?

    GASなら、特別な開発環境を整える必要はない。いつものGoogleドライブの画面から始められる。もしかして、Webアプリのコード自体を、Geminiに書いてもらえば、理想の絵本が出来上がるんじゃない…?

    このひらめきが、私の戦い方を大きく変えました。

    AIによる画像生成の挑戦

    まず、物語はGeminiと一緒に作り上げた最高のシナリオがある。
    問題は「絵」だ。 絵心、皆無。はい、絶望的。

    「そうだ、これもGeminiに描いてもらえばいいじゃん!」

    しかし、これが想像以上に難しい。
    同じキャラクターを、同じ画風で、違うポーズや表情で描き続けてもらう、という作業にGeminiがまだ完全には対応しきれていない現実にぶつかり、泣く泣く断念。

    画像

    作戦変更! ここはAIの役割分担だ!

    これまでの背景情報をすべて理解してくれている最高の相棒、Geminiと一緒に作り上げた物語の全文と、絵の雰囲気、ターゲット読者など、私の想いの全てを具体的な指示書としてプロンプトにまとめ、画像生成機能を備えたAIの「Genspark」に10枚のイラスト作成を依頼することにしました。

    画像
    画像

    すると、どうでしょう!

    Gensparkは見事に、私が思い描いていた通りの、温かく優しい雰囲気で統一されたイラストを10枚、描き出してくれたのです。

    もしかしたら、画像生成の機能だけは、Gemini単独ではこのクオリティは実現できなかったかもしれません。
    でも、この成功は間違いなく、私の想いを完璧なプロンプトに翻訳してくれたGeminiがいたからこそ!

    一つのツールに固執せず、それぞれのAIの得意なことを見極めて、うまく役割分担させる。

    この「AIの使い分け」こそが、プロジェクト成功の鍵なのだと、この時、強く実感しました。

    二人三脚のデバッグ地獄

    方針が決まれば、あとは実装あるのみ。 私はGeminiに「GASを使って、私が指定した画像と文章を表示するWebアプリのコードを書いて!」とお願いしました。

    しかし、戦いはここからでした。

    Geminiが生成したコードをコピペして、いざ表示! …真っ白な画面。

    画像

    最初は、そもそも文字すら表示されませんでした。
    Geminiがいなかったら絶対に書けなかったであろう、このとんでもなく長いコードとの格闘。

    原因不明のエラーに心が折れかけながら、そのエラー画像やメッセージをGeminiに貼り付けては、修正案をもらう。その繰り返し。

    画像

    そして、Geminiとの長い奮闘の末、ついにその瞬間が訪れます。
    何度も質問を投げかけ、辛抱強く修正を重ねた先に、プレビュー画面に物語の文章が表示されたのです…!

    画像

    さらにGemini提案のCSSを当てると、理想通りの温かい世界観に。
    ただ、何かが違う。

    タップでパッと場面が切り替わるだけの画面は、まるでデジタル紙芝居のよう。私が本当に作りたかった、ページを一枚一枚めくる、あのワクワク感が足りなかったのです。

    めくれない紙芝居からの脱出劇

    この解決の糸口が見えない戦いは、まだまだ長引きそうだ…。
    諦めにも似たため息が漏れた、まさにその時でした。
    ふと、上司から優しい声がかかります。

    「なんだか面白いことしてるね。コードに悩んでいるなら、ちょうどいいツールがあるよ。Gemini CLIを使ってみたら?」
    『Gemini…しーえるあい…?』

    上司が教えてくれたのは、なんと昨日Google Cloudの公式ブログで発表されたばかりという、まさに最新のツール。
    彼が言うには、チャット形式のGeminiと違い、CLIはより複雑で正確なコード生成や、ファイル全体の構成を理解した上での修正が得意な、コードが得意なツールなのだとか。

    上司が教えてくれた記事を参考に、早速Gemini CLIをインストール。ちょこっと触ったことのある程度のVSCodeの黒い画面(ターミナル)を開き、期待を胸に、まずは試してみることに。

    これまで作ってきた紙芝居のようなアプリのコードを添付し、
    まずはツールの実力を知りたくて…
    という建前のもと、あえてシンプルな言葉でお願いしてみました。

    画像
    絵本のページをめくる挙動をつけてください。

    先ほど熱弁した「具体的で、役割を与える指示」とはなんだったのか
    プロンプト。(笑)

    「まぁ、最初は試しだから」――。
    そんな気持ちで、生成されたコードをWebアプリに反映した、その瞬間でした。

    画像

    数秒後、画面に現れたコードは、まさに私が求めていたページめくりアニメーションそのものだったのです。

    まさかの一発OK…!?

    そこからはあっという間でした。
    生成されたコードを元に、アニメーションの速さやデザインなどを微調整し、ついに理想の動きが完成したのです!

    Webアプリの完成!

    最後に祈るような気持ちでデプロイをしてWebアプリのリンクURLを発行、クリックすると、

    画像
    画像

    ページがめくられ、2ページ目のイラストと文章が表示されたのです。

    「…う、動いた…!」
    思わず、声が漏れました。

    自分の手で、いや、

    AIという相棒と共に、ゼロからWebアプリを創り上げてしまった。

    私は、誰に見せるでもなく、天に向かって、力一杯のガッツポーズをしました。

    それは、限られた時間の中で、知識ゼロの私が、AIという最高の相棒と知恵を出し合い、自分だけの「やり方」で壁を乗り越えた、勝利の証。

    この絵本が完成したら、娘はどんな顔をするだろう。
    大きな達成感を胸に、小さな「新人インターン」の喜ぶ顔を想像しながら、私はワクワクした気持ちで、次なるステップへと進む準備を始めた。


    最高のアンコール

    そして、ついにお披露目の日。
    娘を膝に乗せ、「ママのお仕事を絵本で紹介するね」とタブレットを渡すと、娘は目を輝かせました。私の声に耳を傾け、食い入るように画面を見つめ、小さな指で一生懸命ページをめくっていく娘。

    画像

    最後のページを読み終えた娘は、満面の笑みで一言。

    「ママ、もういっかい!」

    その最高のアンコールに、これまでの奮闘がすべて報われた瞬間でした。
    Geminiという相棒と一緒に創り上げたこの物語は、ちゃんと娘の心に届いたのです。


    \完成した絵本はこちら/

    このプロジェクトを通して、AIという最高の相棒と一緒に作ったWeb絵本が、ついに完成しました。

    画像
    ※PCやタブレット:ページをめくって、絵本の世界観をより楽しめます!
    ※スマートフォン:スワイプでサクサク読み進められます!
    ※もし絵本アプリが開けない場合は、シークレットモードでお試しください。

    知識ゼロの私が、娘を想う気持ちとちょっぴりの無謀さだけで作り上げた物語です。ぜひ、あなたも「バーチャル職場体験」を覗いてみてください。

    ▼絵本『りなちゃんの はじめての おしごと』


    AIという相棒が、私に教えてくれたこと

    今回の挑戦で私が学んだ「知識ゼロからAIとアプリを作るための3つのコツ」を共有します。

    AIを「指示を具体的に与えることで性能を最大限に引き出せるツール」として活用する。

    AIは単なるツールではありません。あなたのアイデアを形にする、頼れるブレインパートナーです。
    漠然とした指示ではなく、まるで信頼できる同僚に依頼するように、役割や目的、具体的な制約を明確に伝えることで、AIは期待を超える成果を生み出します。

    エラーを恐れずに!AIとの効果的なコミュニケーション術

    予期せぬエラーに直面した時、もう一人で悩む必要はありません!
    エラーメッセージのテキスト情報はもちろん、画面のスクリーンショットや動作を捉えた動画など、あらゆる手段でAIに状況を伝えましょう。
    これらの情報は、AIがより迅速かつ的確な解決策を導き出すための貴重な手がかりとなります。

    未知を切り拓く!AIと共に「ひらめき」を生み出す探求心

    プロジェクトを進める中で、想定外の壁にぶつかることは当然です。
    しかし、そこで立ち止まるのではなく、利用可能なAIツールや機能を積極的に「遊び尽くす」感覚で試してみてください。
    異なるAIモデルのプロンプトを試したり、データ処理機能を柔軟に活用したりすることで、想像もしなかったブレイクスルーが目の前に現れるはずです。
    この柔軟な探求心こそが、あなたの創造性を最大限に引き出し、新たな価値を創造する鍵となるでしょう。


    AIが起こす、「やってみる」が問題解決へと繋がる革命


    娘に仕事を伝えるための絵本アプリ開発というこの挑戦を始める前の私にとって、プログラミングは専門家だけの「魔法の呪文」のような、縁遠い世界の話でした。

    でも、今は違います。
    AIという最高の「翻訳機」であり「相棒」がいてくれれば、その「魔法の呪文」は誰にでも唱えることができる、そう確信しています。
    今では私も立派な魔法使い(見習いの見習いくらい)です!

    プログラミングの知識がなくても、AIがその壁を乗り越える手助けをしてくれたのです。

    「やってみたい」

    その気持ちさえあれば、知識や経験は後から必ずついてきます。
    今回の挑戦で、AIは私にそんな大切なことを教えてくれました。

    この記事を読んでくださっている、あなたへ。

    もし、心の中に「やってみたい」という小さな炎があるなら、その炎を大切にしてください。
    知識ゼロの私がここまでできたのですから、あなたにも必ずできるはずです。その気持ちこそが、最高の才能です!

    さあ、次はあなたの番です。
    あなたの「やってみたい」は、何ですか?


    【おまけ】こちらの私はいかがでしょう?

    今回は娘のための絵本作りでしたが、
    いつもは職場の業務改善に関する記事を書いています!

    ▼今回登場したNotebookLMの記事など…

    まじめかどうかはおいておいて!

    こちらのほうが仕事モードの私に近いかもしれません(笑)
    ご興味があれば、ぜひ覗いてみてくださいね。

    この記事が受賞したコンテスト

     
     
     
    AI活用や業務改革、Lステップ・Liny・LinyHRを使ったLINE運用/社内DXの仕組み化を発信中。 非エンジニアでもできるシステム連携・自動化の構築ノウハウをお届けします!

    あなたへのおすすめ