【図解たっぷり】Gemini Notebook（NotebookLM）入門：前編～Webデザイナーの資料整理術～

「このまま受託制作を続けて、3年後も生き残れるだろうか？」
AIの進化により、単なる制作業務の価値は暴落しつつあり悩んでいる。そんな人は多いと思います。しかし、悲観する必要はありません。 今こそ「作る側」から「教える側」へ回るチャンスです。

THE REAL STORY

億を稼ぐ
スクールの
『裏側』

※ 期間限定公開
ビジネスの設計図を
全て見せます。

Skillhub代表
吉田 光利

「実はこのSkillhubも、
僕１人で作りました。 0から作り上げて、生徒6万人まで育てたノウハウ公開します。 」

裏側を無料で覗く

AI時代を勝ち抜くための「億を稼ぐスクールビジネス」を、期間限定で公開しています。無料ですのでチェックしましょう。

（無料公開、限定100名、8月16日まで）

今すぐ受け取る（無料）

案件が始まると、資料はすぐ散らかります。ヒアリングのメール、思い出したように届く追記、クライアントのSNS、そして「アクセシビリティに配慮してほしい」と言われて開いた分厚いガイドライン。
資料はあるのに、読めていない。「どこかに書いてあった気がする」のたびに、フォルダを掘ってCtrl+Fで探すことになります。

Gemini Notebook（NotebookLM）は、渡した資料だけを読んで、根拠つきで答えてくれるAIです。「その資料の、ここに書いてあります」と、原本の場所まで示してくれます。

今回は、Gemini Notebookをはじめて使う方向けに、使い方・Webデザインに役立つ資料整理方法を解説します。
前編では、架空のカフェのホームページ制作を題材に、案件専用の「資料棚」をつくって、AIにどこに書いてあるかを聞くところまでをやります。すべて無料の範囲でできますし、デモで使った素材もご用意しています。

• Gemini Notebookについて知ろう
• Gemini Notebookとは？（旧NotebookLM）
• 普通のAIチャットと、Gemini Notebookは何が違う？
• Gemini Notebookの画面構成
• 何ができる？── まずは無料でどこまで
• 使ってみよう── 制作要件のノートブックを作る
• 今回の案件・クライアントからの要望
• 今回使用する素材
• 事前準備：Gemini Notebookに読ませる資料を決める
• ステップ1：資料を入れる
• ステップ2：ガイドラインに質問する
• 前編のまとめ

Gemini Notebookについて知ろう

Gemini Notebookとは？（旧NotebookLM）

Gemini Notebookは、Googleが提供している 渡した資料を読んで、答えてくれるAI です。

もともと NotebookLM という名前で提供されていたもので、2026年7月にGemini Notebookへ名称が変わりました。その機能についてはNotebookLMを継承したものですので、「NotebookLMが便利って聞いたんだけど」という方も、この記事を読み進めていただいて大丈夫です。

画像元：Gemini Notebookhttps://notebooklm.google/?hl=ja

Gemini Notebook一番の特徴は、あなたが入れた資料を中心に考えることです。

Geminiなど一般的なチャットAI質問すると、AIは自分がもともと持っている知識 + 世界中・ネット上の知識を組み合わせて答えを作ります。便利な反面、「それ、どこに書いてあったの？」が分からず、その回答が信頼できるものかは不明瞭なケースもあります。

Gemini Notebookは逆で、基本的に渡した資料の中からしか答えません。
そして、答えの一つひとつに「この資料のここに書いてありました」という印をつけてくれます。

【早わかり】Gemini Notebook はこんなツール

普通のAIチャットと、Gemini Notebookは何が違う？

「資料を貼って質問するだけなら、普通のAIチャットでもできるのでは？」と思いますよね。
実際、できてしまいます。

では、Gemini Notebookは何が違うのか── その差は機能というより 性質 です。 大きくは3つあります。

① 答えに「引用リンク」がつく

最初に回答の横に「この資料のここに書いてありました」という印をつけてくれると紹介しました。
この印の番号をクリックすると 元の資料の、その部分がその場で開きます。

地味に聞こえるかもしれませんが、実際に使うと効きます。
ファイルを探して、開いて、Ctrl+Fで該当箇所を検索して……という手間がまるごと消えます。 「本当にそう書いてある？」を確かめるコストがほぼゼロになるので、確かめる習慣が続く。ここが大きいです。

② 資料が「溜まる」

チャットAIの場合は、チャットで会話を続けると最初に見せた資料の情報は流れて消えていきます。 資料を貼り直したり、参照用のテキストと資料とをまとめてプロジェクトを作ったりする必要があります。

対して、Gemini Notebookは、入れた資料がそこに残り続けます。
案件ごとに1つ作れば、その案件の「資料棚」になる。
1週間後に「あれ、あの話どこに書いてあったっけ」と思ったとき、棚に聞けば答えが返ってきます。

③ 溜めた資料が、成果物に化ける

「Studio」という機能で、集めた資料を 音声解説・レポート・マインドマップ などに変換できます。
移動中に聞ける音声にする、Googleスプレッドシートにまとめる、などといった使い方ができます。

この記事では、この3つが実際にどう効くのかを、カフェのホームページ制作という架空の案件を通して見ていきます。一緒に試していただける素材もご用意しているので、ぜひ試してみてください。

Gemini Notebookの画面構成

実際に操作をする前に、Gemini Notebookの基本的な画面構成だけ押さえておきましょう。
大きく3つのパネルに分かれています。

直感的なUIで、左に入れて、真ん中で聞いて、右で形にするという分担です。

空っぽのスタート画面だとわかりにくいですが、実際に動かすと下図のようになります。

何ができる？── まずは無料でどこまで

Gemini Notebookは Googleアカウントがあれば無料で使えます。
この記事の内容もすべて無料の範囲で試したものです。

早わかり表に挙げた上限に加えて、1つの資料は50万語 / 200MBまで。よほど分厚いPDFでなければ、まず引っかかりません。

この記事で気にする必要があるのは、「1つのノートブックに、資料は50件まで」だけです。この50件が、あとで効いてきます。

※ 上限数は変わることがあります。最新は公式サイトでご確認ください。

使ってみよう
── 制作要件のノートブックを作る

今回の案件・クライアントからの要望

架空のカフェ 「こもれびcafe」 のホームページ制作を引き受けた、という設定で進めます。
題材としてはClaude CodeのサブエージェントやGoogle Antigravity入門とほぼ同じですが、今回は参照しなければいけない情報が多いというパターンを想定しています。

クライアントは個人でお店をやっている田中さん。
届いている資料はこんな状態です。詳しくは素材の中身をご確認ください。

• 最初のヒアリングメール（お店の基本情報がざっと書いてある）
• そのあと3回に分けて届いた 追記メール（思い出すたびに送られてくる）
• お店のInstagram（4か月分の投稿）
• 紙のメニュー表（PDF）

バラバラです。 追記メールやインスタ投稿の中身はもっとバラバラです。
そして実務では、たいていこんな感じです。

さらに、最初のメールにこんな一節がありました。

先日、商工会の集まりでご一緒した方に、「ホームページを作るなら、アクセシビリティっていうのを気にしたほうがいい」と言われました。
（略）
その方が「国が出しているルールがあって、それが分かりやすいから見てみるといい」と教えてくれたのですが、名前を控えるのを忘れてしまって……。デジタル庁がどうとか、そんなことを言っていた気がします。
うちみたいな小さい店に必要なものなのか、正直よく分かっていません。でも、せっかく作るなら、いろんな方に見てもらえるものにしたいなと思っています。

正直、こういったクライアントの要望を整理するのは、時間もかかるし、デザインや実装作業よりもツライです。今回の素材はまだマシですけど…もっと読みにくいことも多いですよね。何をどうしたら良いか、頭がフリーズします。

あやのさん

吉田先生

そうですね。クライアント自身もよくわかっていないなか、要望が送られてくるのは制作の「あるある」ですね。
今回のような場合にGemini Notebookを使うと、かなり作業が楽になるから一緒に試していきましょう。

そもそも「アクセシビリティ」って？

ひとことで言うと、アクセシビリティ＝どんな人でも使えるようにしておくことです。

目が見えにくい方、色の見え方が違う方、手が震えて小さなボタンを押しにくい方、加齢で細かい字が読みづらくなった方。そういう人がホームページを使えなくならないように、文字の大きさや色のコントラスト、ボタンの大きさなどに気を配る ── ざっくりそういう話です。

「特別な人のための配慮」と思われがちですが、外の明るい場所でスマホを見ているときや、片手がふさがっているときなど、恩恵を受けるのは全員です。

💡今回は「デジタル庁デザインシステム」を使います

まず、クライアントの田中さんが言っている「国が出しているルール」で「デジタル庁」にまつわるものを探します、これは、デジタル庁デザインシステムのことです。このあたりはGoogleなどで検索したり、普段使っているAIにチャットで聞くと候補を上げてくれます。
今回はこれをデザインルールを検討するための資料として使います。

ただ、こうした デザインのルール集は1つではありません。
大きな企業が自社サイト用に作っているもの、制作会社が社内標準として持っているもの、そもそもルール集までは無くて W3C（Webの国際的な標準化団体）が出しているアクセシビリティの基準を直接参考にしている、というところもあります。

大事なのは、自分たちが根拠にしたいものを選んで、それをAIに読ませることです。
やることはどれでも同じです。今回はデジタル庁のものを使う、というだけです。

今回使用する素材

上記でご紹介したクライアントからのメールや、このあとの「事前準備」で「AIに読ませる」と決めたファイルをピックアップしたものを素材としてまとめてご用意しています。

ダウンロード

なお、素材の中には、デジタル庁デザインシステムのドキュメント（Markdown）から、この案件で使う37件を選び、日本語のファイル名に付け替えたものが含まれています（本文には手を加えていません）。

デジタル庁デザインシステムのコンテンツは 「公共データ利用規約（第1.0版）」 にもとづき、教材として使わせていただきました。

デジタル庁デザインシステムウェブサイト https://design.digital.go.jp/dads/ のコンテンツを加工して作成（2026年8月10日取得）

この素材と記事は、デジタル庁が作成・監修したものではありません。また、この記事に出てくるAIの回答は、あくまでAIが資料を読んで答えたものであり、デジタル庁の公式見解ではありません。デザインシステムの内容は更新されていくものなので、実務で使うときは必ず引用リンクから原本を確認してください。

事前準備：Gemini Notebookに読ませる資料を決める

Gemini Notebookは、入れた資料がすべてです。
ここで何を並べるかで、このあとの答えの質が決まります。

やることは２つです。

1. 何を入れるか選ぶ
2. ファイル名を整える

① 何を入れるか選ぶ ── 「全部入れる」はしません

今回、棚に並べるのはこの2種類です。

• クライアントからの資料（メール4通・Instagram投稿ログ）
• デジタル庁デザインシステムのドキュメント

クライアントからの資料は、届いたものをそのまま入れるだけです。
※ 紙のメニュー表（PDF）だけは、あとで入れます。 PDFには少し注意が必要なので、後編の補足でまとめて扱います。
考えどころは、もう一方の デジタル庁デザインシステム のほうにあります。

デザインシステムは、ドキュメント一式が Markdown（テキストファイル）のZIP で配布されています。
ありがたいことに、AIに読ませるのにちょうどいい形です。

出典：デジタル庁デザインシステム リソースページ

こちらをダウンロードして解凍すると、120ファイル以上のファイルが含まれています。
無料プランで1つのノートブックに入れられるのは 50件ですので全部は入りません。

ただ、今回作るのは、カフェの1ページのホームページ。
日付を選ぶカレンダーも、言語切り替えも、この案件には出てきません。大事なのは棚に何を並べるかを選ぶこと、そして選ぶ基準はこの案件で使うかです。
実際に選ぶと、こうなりました。

外したものも挙げておきます。
こちらのほうが、選び方のイメージはつかみやすいかもしれません。

• フォーム部品（入力欄・セレクトなど） …… このお店の予約は電話とLINEだけ。フォームは作りません
• 日付ピッカー、言語切り替え、パンくずリスト …… 1ページのサイトには出てきません
• 各フォルダの更新履歴ファイル …… 制作には関係ありません
• デジタル庁自身のページ一覧、2024年版の検証結果 …… 古いほうは要りません

ポイントは最後の1つです。
同じフォルダの中でも、要るものと要らないものがあります。 デザインシステムがあれば全部わかる、というわけではありません。

👉 上限数に合わせて節約するコツ

中身を詳しく見ていくと「ガイドラインは準備中」で、リンクしか載っていないファイルも結構ありました。
こうしたファイルは入れても答えが返ってこないので、全部外しています。

逆に、入れておいてよかったものもあります。
部品を眺めていたら、「非推奨（使わないでください）」 と書かれているものが2つありました。

• スクロールトップボタン（ページの一番下にある「▲トップに戻る」）
• ボトムナビゲーション（スマホ画面の下に固定されるメニュー）

どちらも「長い1ページのサイトなら、つい付けたくなるもの」です。
だからこそ、あえて棚に入れました。
今回は無料プランの範囲内ですが、有料プランで使う時も中身を簡単に確認してから、使うかを判断するのがおすすめです。1つずつ確認するのは大変ですが、Gemini Notebookを使わなくても目を通さなくてはいけないことに変わりません。「これは使うか？」と考えるだけで済む、と考えましょう。

② ファイル名を整える ── ファイル名が、そのまま「ソース名」になります

Gemini Notebookでは、入れたファイルの名前が、そのまま資料の名前として一覧に並びます。
今回のZIPを開くと、こうなっていました。

foundations/typography/index.md
foundations/color/index.md
components/button/index.md
components/heading/index.md

全部 index.mdですので、このまま入れると、ソース一覧が「index.md」「index.md」……と並びます。

どれがどれだか分からない状態で一個ずつ直していくのは大変です。
あらかじめ、わかりやすい名前に変更しておくのがおすすめです。

10基礎_タイポグラフィ.md
10基礎_カラー.md
50部品_ボタン.md
50部品_見出し.md

頭に番号をつけておくと、一覧で種類ごとにまとまってくれます。

ファイルが多いときは、AIに頼むのが早いです。
VS Codeでフォルダごと開いて、Claude CodeやCodexに「各ファイルの先頭にあるtitleの名前にリネームして、1つのフォルダにまとめて」とお願いすれば済みます。手作業で120回以上やるのは現実的ではありません。

ステップ1：資料を入れる

ここからが、実際にGemini Notebookを触るパートです。
素材のZIPを解凍して、中のファイルが見える状態にしておいてください。

1-1. 新しいノートブックを開く

「Gemini Notebookを試す」ボタンから、Googleアカウントでログインします。

画像元：Gemini Notebookhttps://notebooklm.google/?hl=ja

はじめて使う方は、以下のように３つのパネルが並んだノートブック作成画面が開きます。
ノートブック一覧が開いた場合は、「ノートブックを新規作成」を選択してください。

1-2. ドラッグ＆ドロップでファイルを追加

用意したソース（資料ファイル）を追加します。
一括選択して、ドラッグ＆ドロップするだけでアップロードできます。
ただし、1つだけ注意があります。フォルダごとのドラッグ＆ドロップはできません。

素材を使用する場合はclientとdesign_digitalフォルダを開いて、中のファイルを全部選んで入れてください。

入れ終わると、中央パネルには全体の要約、各ファイルはソースガイドという要約が自動でつきます。
「このファイルには何が書いてあるか」が一目で分かるので、選び間違いにも気づけます。

ちなみに、Gemini Notebookにはファイル以外に WebサイトのURLやPDF も入れられます。
ただ、入れ方によって、AIに「見えるもの」が変わります。ここは事故が起きやすいところなので、後編の「補足：資料の『入れ方』で、AIに見えるものが変わります」<!-- ▲後編URL＋#hosoku を入れる -->にまとめました。

💡 ステップ1の要点
・ファイルはドラッグ＆ドロップで入れる。フォルダごとは入れられない
・入れ終わると「ソースガイド」が自動でつくので、中身をひと目で確認できる
・ソース名はあとからでも変えられるが、入れる前に整えておくほうが結局は楽

ステップ2：ガイドラインに質問する

資料棚ができたら、質問していきます。
ここがGemini Notebookの本領。資料の中から自分で掘り出さず、必要なところを引き出してくれます。

ただし、「答えそのもの」だけを見ないで確認することが重要です。
もっとも見るべきは答えの横についている「引用リンク」です。

2-1. まずは基本的なことを聞いてみる

中央のパネルで、AIに追加したソースについて聞いてみましょう。

本文の文字サイズと行間は、どれくらいが推奨されていますか？

答えの中に「基準値：16 CSS px 以上」「14 CSS px未満の大きさの使用は原則として許容されません」といった具体的な数字が出てきます。

さらに、クライアントの要望と見比べて、両立させるための落としどころも提案してくれます。

2-2. 番号をクリックしてみる ── ここが本題です

AIの回答の横には、それぞれ小さな番号がついています。
クリックすると、元の資料の、その部分がその場で開きます。

地味と言えば地味ですが、この機能がとても便利です。
いつもなら、フォルダを開いて、それらしいファイルを探して、Ctrl+Fで検索して……とやるところ。それが一切ありません。 「本当にそう書いてある？」を確かめるのが、すぐ終わります。

自分の指定したソース（ファイル）の内容に基づいて回答し、確かめるのも「秒で」できる。
ここはGemini Notebookならではの価値です。

そして、これは仕事のうえで大きな意味を持ちます。
根拠となるものが「AIがそう言ったから」ではなく、「公式にこう書いてあるから」「ご依頼時にこう指定されたことを考慮して」に変わります。
この差は、クライアントと話すときに効いてきます。

⚠️ 引用は「合っている」保証ではありません

引用リンクが保証しているのは、「その資料の、その場所に、そう書いてある」ことです。
AIの読み取り方が合っているかどうかまでは、保証していません。

資料の外から話を持ってこない仕組みなので、事実無根のことを言い出す心配は少ないです。
ですが、文章を読み違えることはあります。

AIとチャットをした際に「聞いたことと回答がなんかズレてる…」という体験をしたことがある方も多いのではないでしょうか。Gemini Notebookでも同じような現象は起こりえます。

• 「ただし〜」「〜の場合を除く」といった例外が、要約のときに落ちる
• 長い資料の一部だけを見て答えている（毎回、全文を読み直しているわけではありません）
• 探し出せなかっただけなのに、「書かれていません」と答える

引用リンクが付いていると便利な反面、回答が誤りでも正しく思えてしまうデメリットもあります。
ですので、クリックして自分で確認するところまでが1セットだと思ってください。

大事なところは、こう頼むとさらに確かめやすくなります。

該当箇所を、原文のまま引用してください。要約はしないでください。

要約されると、そこで解釈が一段挟まります。
原文のまま出してもらえば、判断するのは自分になります。

2-3.「これ、どうすればいいんだっけ」を聞く・相談する

同様に疑問点を聞いていくと、ソースを元に答えを返してくれます。

例）

• ボタンのタップ領域は、最低どれくらい必要ですか？
• 注意喚起に赤を使いたいのですが、ルール上どう扱われていますか？

このあたりは、検索して調べると、人によって言うことが違って迷うところ。
「この資料ではこう決まっている」 という答えが、根拠つきで返ってきます。

事前準備で「使うか迷うもの」として、わざと棚に入れておいたものがありました。
あれを聞いてみます。

ページの一番下に「トップに戻る」ボタンを付けたいのですが、問題ありませんか？

「非推奨（deprecated）」 と返ってきます。
そして、その根拠としてデザインシステムの規定、クライアントの要望との比較をまとめてくれます。

確認全てが自分の目視だけだと「他のサイトにもあるし、あった方が良い」と思いつくまま付けてしまう。
調べようと思っても、パソコンのフォルダを掘ったり、Webページを探したりと大変。
ノートブックを資料棚化する価値は、ここにあります。思いついたことを「どう思う？」と聞くだけで良くなるのです。

⚠️ 答えの中身は、棚の中身しだいです

では、棚に入れていないことを聞くとどうなるか。

フォームのエラー表示は、どう出すのが正解ですか？

事前準備でフォーム部品の資料は外しましたが、答えは返ってきます。
デザインシステムの基準と、クライアントの要望を突き合わせ、筋を通してくれました。
ここで一般論や、異なるデザインシステムの概念を混ぜ込んだ回答を返さないのもGemini Notebookの特徴です。

なお、この回答は「いまある資料から言えること」であって、フォーム部品そのものの規定ではありません。 部品の資料を足せば、答えはもっと具体的になります。

棚は、育てられます。 この話は、後編でまた出てきます。

💡 ステップ2の要点
・答えを読むだけでなく、引用リンクを開くところまでが1セット
・引用リンクは「そこに書いてある」証明であって、読み取りが正しい保証ではない
・大事なところは「原文のまま引用して」と頼む
・答えの中身は、棚の中身しだい。足りなければ、あとから足せばいい

前編のまとめ

ここまでで、こうなりました。

• 案件に必要な資料だけを選んで、ノートブックという棚に並べた
• 棚に質問すると、「どの資料のどこに書いてあるか」つきで答えが返ってくる
• 引用リンクを開けば、原本のその場所がその場で確認できる

いちばん変わるのは、ここです。

根拠が「AIがそう言ったから」ではなく、「公式にこう書いてあるから」「ご依頼時にこう指定されたから」になります。

分厚いガイドラインも、フォルダの奥のメールも、開かずに聞けるようになりました。
「これで合っているんだっけ？」を、そのつど確かめられる状態です。

ただし、ここまではまだ「1つずつ」です

前編でやったのは、棚に聞くところまででした。
田中さんから届いた4通のメール、4か月分のInstagram、デジタル庁の基準 ── これらは性格のまったく違う資料です。そして実は、中身が食い違っています。田中さん自身も、それに気づいていません。

後編では、棚に入った資料をまたいで質問します。
バラバラの要望を整理し、資料どうしの矛盾を洗い出す ── 人がやるといちばん時間のかかるところです。ここが、Gemini Notebookのいちばんおいしい使い方だと思っています。

吉田 光利

Skillhub代表 & Edbase代表

教育者&起業家です。今は教育テック系のSkillhubとEdbase（エドベース）という会社をやっています。強みはビジネス構築からデザイン、プログラミング、サーバー構築までひと通できることです。著書に「起業のWeb技術」日本実業出版社があります。