【図解たっぷり】Gemini Notebook（NotebookLM）入門：後編～バラバラの資料から、矛盾を洗い出す～

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

THE REAL STORY

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

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

Skillhub代表
吉田 光利

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

裏側を無料で覗く

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

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

今すぐ受け取る（無料）

クライアントから度々送られてくるメール、Instagram過去投稿、そして分厚いガイドライン。
これを全部つき合わせて、要点だったり、言っていることのズレ（矛盾点）を見つける ── 制作作業のなかも、時間と労力がかかる作業です。

Gemini Notebook（NotebookLM）なら、聞くだけで出てきます。
しかも「どの資料のどこに書いてあるか」つきで。

後編では、前編で作った資料棚をまたいで質問します。
返ってきたのは、ダメ出しリストではなく そのまま打ち合わせに持っていける「相談事項リスト」 でした。

• 前編のおさらい
• 使ってみよう── バラバラの資料から、矛盾を洗い出す
• ステップ3：散らばった資料を、横断して見る
• ステップ4：メモに保存して、棚を育てる
• ステップ5：Studioで、成果物の形に変える
• 資料の「入れ方」と、AIに見えるものの差
• ① URLで入れる ── 読めるのは「文字」だけ
• ② PDFで入れる ── 読めるものと読めないものが、混ざる
• ③ 画像で入れる ── 見た目のすべてが伝わる
• まとめ
• Gemini Notebookを使う前に知っておきたいこと
• 使ってみて分かった、向き・不向き
• 「調べる」はNotebook、「考える・作る」は普通のチャット
• 結論 ── 賢いAIではなく、案件の「資料棚」

前編のおさらい

この記事は前編の続きです。前編では、こんな準備をしました。

• 架空のカフェ 「こもれびcafe」 のホームページ制作、という設定です
• ノートブック（＝資料棚）に入れたのは、クライアントからのメール4通・Instagramの投稿ログ・デジタル庁デザインシステムの計42件
• 棚に質問すると、「どの資料のどこに書いてあるか」つきで答えが返ってきます

ここからは、その棚をまたいで質問していきます。前編を読んでいなくても、そのまま読み進められます。

※ 使用している素材は前編で配布しています。手を動かしながら読みたい方は、そちらからどうぞ。

使ってみよう
── バラバラの資料から、矛盾を洗い出す

ステップ3：散らばった資料を、横断して見る

今、ソースには、デジタル庁の基準と、クライアントのメールと、Instagramの投稿が入っています。
そして、そのすべてをまたいで質問が可能。
こここそが、Gemini Notebookが優秀な部分です。

このステップでやることは以下の2つです。

1. バラバラの要望を、整理してもらう
2. 資料どうしの食い違いを、洗い出してもらう

① まず、要望を整理してもらう

個別に見ていきましょう。
まずはクライアントの言っていることだけ整理してもらいます。

クライアントの希望を整理・要約してください。

※ステップ２までの内容に影響されないよう、履歴を削除しています。

📄 AIからの返信全文はこちら▾

クライアントである「こもれびcafe」の田中様からの制作要望を、5つの主要なカテゴリーに整理して要約します。

### 1. お店のコンセプトとウェブサイトの目的
*   **伝えたいイメージ：** 「一人でふらっと来られる場所」であることを最も伝えたいと考えています。木のぬくもりがある内装、窓から見える緑、ジャズのBGMといった「ナチュラルで温かみのある雰囲気」を重視しています。
*   **ターゲット：** 近隣に住む方や働く方で、実際には30〜40代の女性客が中心です。
*   **ウェブサイトの役割：** 初めての方が「一人で入ってもいいのかな」と迷う不安を解消し、基本情報（営業時間や地図）を確実に伝えるための1ページ完結型のサイトを希望されています。

### 2. コンテンツ（掲載内容）
*   **基本情報：** 営業時間（11:00〜18:00）、定休日（水曜）、住所、地図を掲載します。特に地図は「いちばん大事」とされています。
*   **メニュー：** 日替わりランチ（800〜1,200円程度）や手作りスイーツ、飲み物の価格目安を掲載します。
*   **こだわりの紹介：** 地元の農家から届く野菜、手作りスイーツに加え、隣県の焙煎所から仕入れている「こだわりの珈琲豆」についても一言添えることを希望されています。
*   **予約・連絡先：** 電話またはLINE公式アカウントで受け付けます。「予約なしでも大丈夫」という点も強調したい意向です。
*   **Instagram連携：** 日々のメニューを投稿しているインスタグラム（@shdemo_komorebicafe）へのフォローボタンを設置します。

### 3. デザイン指針
*   **視覚的スタイル：** 真っ白よりも落ち着く「ベージュ」の背景に、写真は大きく、文字は少なめ、余白をたっぷりとった上品な空気感を目指します。
*   **配色と文字：** 緑・ベージュ・白を基調とし、文字色は「真っ黒」を避けたやわらかいグレーを希望されています。
*   **タイポグラフィ：** 文字は大きすぎず、ゆったりとした配置にします。また、電話番号にはお気に入りのロゴの書体を使用し、画像として配置したいという具体的な要望があります。
*   **避けるべき表現：** 「元気すぎる感じ（ビックリマークの多用）」「食欲をそそる赤やオレンジ」「キラキラ動くアニメーション」「『今すぐ予約！』のような押し売りの感じ」は避けてください。
*   **細部のこだわり：** リンクの下線は「書類っぽく見える」ため、無くしたいと考えています。

### 4. 表記ルール（トンマナ）
表記の揺れを非常に気にされており、以下のルールを徹底することが求められています。
*   **店名：** 「こもれびcafe」で統一（cafeは小文字、カタカナや大文字混じりはNG）。
*   **飲み物：** 「コーヒー」ではなく「珈琲」と漢字で表記（カフェラテなどのカタカナメニューはそのまま）。
*   **案内：** 「お問合せ」ではなく「お問い合わせ」と送り仮名を入れる。
*   **人称：** 「一人で」よりも、やわらかい印象の「おひとりで」を優先的に使用する。

### 5. 運用および制作条件
*   **アクセシビリティ：** 目が見えにくい方や年配の方など、あらゆる人が閲覧できる「アクセシビリティ」への配慮をできる範囲で取り入れたいと考えています。
*   **閲覧環境：** 顧客のほとんどがスマホで閲覧することを想定しています。
*   **納期と予算：** 8月中旬の夏季休業を挟むため、当初の7月末から少し遅れても良いが、その前後での公開を検討しています。予算は5〜8万円程度（写真撮影費別）です。
*   **写真素材：** オーナー自身がスマホで撮影した素材を提供しますが、「青っぽく写っているもの」を避け、あたたかみのある写真を選定してほしいとのことです。

4通のメールと投稿に散らばっていた話が、カテゴリー毎に分類されて返ってきます。

これだけでも、けっこう助かります。
「店名は小文字のcafeで」「珈琲は漢字で」「お問い合わせはいを入れて」── 思い出したように送られてきた細かいルールが、1か所にまとまるからです。

② そして、食い違いを洗い出してもらう

ここが本番です。
人がやるといちばん時間のかかるところでもあります。

資料の中で食い違っているところがあれば指摘してください。
クライアントの要望どうしの食い違い、過去のInstagram投稿との食い違い、
デザインシステムの基準との食い違い、それぞれについて、
どの資料のどこに書いてあるかも含めて教えてください。

📄 AIからの返信全文はこちら▾

ご提示いただいた資料を確認したところ、クライアントの要望間、過去のInstagram投稿、およびデジタル庁デザインシステムの基準との間で、いくつか**食い違いや矛盾**が見受けられます。
以下にカテゴリー別に整理して指摘します。


### 1. クライアントの要望どうしの食い違い

クライアントが抱く「理想の雰囲気」と、同じく要望されている「アクセシビリティへの配慮」の間で、技術的な矛盾が生じています。

*   **リンクの下線表示について**
    *   **要望（デザイン）：** 「書類っぽく見える」ため、リンクの下線を無くしたいとしています。
    *   **要望（アクセシビリティ）：** 「できる範囲で」アクセシビリティ（目が見えにくい方などへの配慮）を求めています。
    *   **矛盾点：** リンクの下線を消すことは、後述するデザインシステムのアクセシビリティ基準に反し、視覚障害者などの利用を妨げることになります。
*   **文字の視認性について**
    *   **要望（デザイン）：** 文字は「小さめ」で、色は「やわらかい薄めのグレー」を希望されています。
    *   **要望（アクセシビリティ）：** 年配の方でも読めるようにしたいという意向があります。
    *   **矛盾点：** 小さく薄い色の文字は、高齢者やロービジョンのユーザーにとって非常に読みにくく、アクセシビリティの確保と対立します。

### 2. クライアントの要望と過去のInstagram投稿との食い違い

追記メールで指定された「表記ルール」が、過去のInstagram投稿では守られていないケースが多くあります。サイト制作時にどちらを正とするか確認が必要です。

*   **店名の表記**
    *   **要望：** 「こモれびcafe（cafeは小文字）」で統一し、カタカナの「カフェ」は避けたいとしています。
    *   **Instagram投稿：** 「こもれび**カフェ**」 や「こもれび**Cafe**（Cが大文字）」 という表記が混在しています。
*   **「珈琲」の表記**
    *   **要望：** 漢字の「珈琲」にこだわりたいとしています。
    *   **Instagram投稿：** 「**コーヒー**、あたたかいの淹れて待っています」、「あたたかい**コーヒー**もどうぞ」 など、カタカナ表記が多用されています。
*   **「お問い合わせ」の送り仮名**
    *   **要望：** 「い」を入れて「お問い合わせ」と書きたい（「お問合せ」は役所っぽくて硬い）としています。
    *   **Instagram投稿：** 「DMでお**問合せ**ください」、「お電話かLINEでお**問合せ**ください」 と、送り仮名のない表記になっています。
*   **「おひとりで」の表現**
    *   **要望：** 「一人で」より「おひとりで」の方がやわらかくて好きだとされています。
    *   **Instagram投稿：** 「**ひとり**時間」、「**ひとり**カフェ」、「**ひとり**でゆっくりしたい方」 など、ひらがな表記や「お」のない表現が一般的です。

### 3. クライアントの要望とデザインシステム（アクセシビリティ基準）の食い違い

クライアントが「上品さ」や「控えめさ」を求めて提案している内容の多くが、デザインシステムの基準に抵触しています。

*   **リンクの下線削除**
    *   **要望：** 事務的に見えるためリンクの下線を無くしたい。
    *   **システム基準：** リンクを色のみで表現することは避けるべきであり、下線はリンクであることを示す重要な視覚的手段とされています。デフォルトの下線を消すことは推奨されません。
*   **文字の色とコントラスト**
    *   **要望：** 真っ黒を避け「薄めのグレー」にしたい。
    *   **システム基準：** テキストは背景色に対して**4.5:1以上**のコントラスト比が必要です。背景をベージュにする場合、薄いグレーではこの基準を満たせなくなる可能性が高いです。
*   **文字サイズ**
    *   **要望：** スーパーのチラシのように見えないよう「小さめの文字」を希望。
    *   **システム基準：** 本文やUIの文字サイズは**16 CSS px以上**を基準とし、14 CSS px未満の使用は原則として許容されません。
*   **電話番号の画像化**
    *   **要望：** ロゴの書体（画像）で電話番号を表示したい。
    *   **システム基準：** 特定のフォントを表示させるために**文字画像を使ってはなりません**（ロゴタイプなど不可欠な場合を除く）。また、アクセシビリティの観点からもテキストデータであることが望まれます。
*   **地図ボタンのサイズ**
    *   **要望：** 押し売りっぽくならないよう「小さめ」にしたい。
    *   **システム基準：** ターゲットサイズ（押しやすさ）として、少なくとも**24×24 CSS px以上**、ボタン等の重要な要素は**44×44 CSS px以上**を確保することが求められています。

これらの食い違いについて、クライアントに「デザインの美観」と「アクセシビリティ（使いやすさ）」のバランスをどのように取るか、改めて相談する必要があると考えられます。

返ってきた指摘は、3つに分かれていました。

1つめ ── クライアント自身の要望どうしが、ぶつかっている

クライアントの要望と、デザインシステムの矛盾。
これはよくありますし、私たちも想像がつく範囲です。
ただ、よく見るとクライアント自体の要望も矛盾していることが結構あります。

クライアント自身は、ただ「こうしたい」を投げてきているだけです。
ご本人も自分の要望がぶつかっているとは気付いていませんし、私たちもクライアント要望⇔デザインシステムの比較がメインになり、ここは確認が半端になりやすい部分です。

チャットでお願いするだけで確認・検討事項を挙げてくれるのは助かりますね。

2つめ ── 決めたルールが、過去のInstagramで守られていない

4か月分の投稿を、表記ゆれなど細かい部分まで意識しながら読むのは大変です。
Gemini Notebookの場合は聞いただけで怪しい部分をピックアップしてくれます。
　 ただし、上図で黄色くハイライトしたところでは、「こモれびcafe」（カタカナのモ）と、指摘の表記自体が間違えています。このままクライアントにコピペして送ってしまったら…ちょっと嫌ですね。
AIが調べてくれた、だけを根拠にしていけない理由が垣間見えるのではないでしょうか。

3つめ ── デジタル庁の基準とぶつかっている

比較・検討が一番大変な個所も、具体的な数字と、そうすべき理由が一挙に出てきます。

引用リンクから原本確認もできる。
エディタで複数タブを開いて見比べて…とファイルを行ったり来たりしなくても良いので、かなり時短になります。

💡この回答で役立つところ

お願いした「食い違い」を洗い出してくれた際、AIの締めくくりが、こうでした。

これらの食い違いについて、クライアントに「デザインの美観」と「アクセシビリティ（使いやすさ）」のバランスをどのように取るか、改めて相談する必要があると考えられます。

返ってきたのは ダメ出しリストではなく、相談事項リストだとAIがアドバイスをしてくれているような形です。
これは、そのまま次の打ち合わせの持ち物になります。

要望と規格を対比させて「食い違い」を表示してくれていますので、あとは伝え方の問題です。

• ✖️ そのデザインは規格に反するので、できません。
• ⭕ 最初におっしゃっていたいろんな方に見てもらえるようにを重視すると、この文字の大きさは難しいです。

クライアントとのやり取りで苦しいのが「クライアントの希望を断ること」ですよね。
基準を盾にするのではなく、本人が言ったことを根拠にできるなら、話はずっと通りやすくなります。

聞き方を変えると、拾ってくるものが変わります

もう一つ、知っておいてほしいことがあります。
同じ資料でも、聞き方を変えると、返ってくるものが変わります。

たとえば、対象をデザインシステムだけに絞って聞いてみます。

クライアントの要望の中で、デザインシステムの基準に反するものを、
どの基準のどこに書いてあるかも含めて指摘してください。

📄 AIからの返信全文はこちら▾

クライアントである「こもれびcafe」の田中様からの要望には、デザインシステムの基準（アクセシビリティやユーザビリティのガイドライン）に反する項目がいくつか含まれています。
主な食い違いについて、具体的な基準の内容と箇条書きで指摘します。

### 1. 文字の色とコントラスト
*   **クライアントの要望：** 文字の色を「真っ黒」ではなく、**「やわらかい薄めのグレー」**にしたい。背景はベージュを希望されている。
*   **デザインシステムの基準：** 「10基礎_カラー.md」および「10基礎_タイポグラフィ.md」において、**テキストとその背景色とのコントラスト比は常に 4.5:1 以上**を保つことが求められています。
*   **指摘：** ベージュの背景に薄いグレーの文字を配置すると、このコントラスト比を下回る可能性が非常に高く、視覚障害者や高齢者、屋外の明るい場所で閲覧するユーザーにとって著しく読みづらくなります。

### 2. 文字のサイズ
*   **クライアントの要望：** スーパーのチラシのように見えないよう、**「小さめの文字」**でゆったり配置したい。
*   **デザインシステムの基準：** 「10基礎_タイポグラフィ.md」において、**本文やUIにおける文字サイズは 16 CSS px 以上**が基準値とされています。また、14 CSS px 未満の使用は原則として許容されません。
*   **指摘：** 小さすぎる文字は可読性を損なうため、デザインシステムでは「読みやすさや分かりやすさを確保するうえで最も重要なデザインエレメント」としてサイズを規定しています。

### 3. リンクの下線（アンダーライン）
*   **クライアントの要望：** 「書類っぽく見える」ため、**リンクの下線を無くしたい**。
*   **デザインシステムの基準：** 「10基礎_タイポグラフィ.md」および「10基礎_リンクテキスト.md」において、下線はリンクを色のみで表現することを避けるための**重要な視覚的手段**とされています。デフォルトの下線を取り消すことはアクセシビリティの観点から推奨されません。
*   **指摘：** 下線がないと、色覚多様性の特性を持つユーザーにとって、どこがクリックできる場所（リンク）なのか判別できなくなるリスクがあります。

### 4. 電話番号の画像化
*   **クライアントの要望：** お気に入りのロゴの書体を使いたいため、**電話番号を画像として配置**したい。
*   **デザインシステムの基準：** 「10基礎_タイポグラフィ.md」において、フォントを変更させないことを企図して**文字画像を使ってはならない**と明記されています（ロゴタイプ自体などの例外を除く）。
*   **指摘：** 画像化されたテキストは、スクリーンリーダーで読み上げられないリスクがあるほか、ユーザーがブラウザ設定でフォントを変更したり、テキストをコピーしたりすることを妨げます。

### 5. ボタンのサイズ（ターゲットサイズ）
*   **クライアントの要望：** 「地図を見る」ボタンが押し売りっぽくならないよう、**「控えめに、小さめ」**にしたい。
*   **デザインシステムの基準：** 「10基礎_リンクテキスト.md」および「50部品_ボタン.md」において、クリックやタップ可能な領域（ターゲットサイズ）は、少なくとも **44×44 CSS px 以上**を確保することが求められています。
*   **指摘：** ボタンを小さくしすぎると、スマートフォンのタップ操作において誤操作を招いたり、運動障害のあるユーザーが操作できなくなったりする原因となります。

これらの要望を実現しつつデザインシステムの理念（「誰一人取り残されない」）を守るためには、美観と使いやすさのバランスをとった代替案を提示し、田中様にアクセシビリティ確保の重要性を改めて説明する必要があります。

挙がってきた項目は、広く聞いたときと同じ5つでした。数は増えていません。
変わったのは、一件ずつの細かさです。

指摘： 下線がないと、色覚多様性の特性を持つユーザーにとって、どこがクリックできる場所（リンク）なのか判別できなくなるリスクがあります。

基準を引き写すだけでなく、誰が、どう困るのかまで書かれています。これは、そのまま田中さんへの説明に使えます。「基準に反しています」より、「こういう方が困ってしまうんです」のほうが、話は通りやすいはずです。

一度聞いて終わりにせず、気になるところは範囲を絞ってもう一度聞く。
AIは、聞かれ方によって見るところと、掘る深さが変わります。

💡 ステップ3の要点
・性格の違う資料をまたいで、「食い違いを指摘して」と頼める
・そのとき「どの資料のどこに書いてあるか」まで求める
・絞って聞くと、根拠も理由も細かくなる。気になるところは、もう一度聞く

なお、ここまで横断させたのは、メールとInstagramとデザインシステム ── すべてテキストの資料です。

実は、まだ棚に入れていない資料が1つあります。紙のメニュー表のPDFです。
ここまで入れずにおいたのは、PDFは「読めているように見えて、一部が読めていない」ことがあるからでした。

この話は「資料の『入れ方』と、AIに見えるものの差」で、実例つきでお見せします。

ステップ4：メモに保存して、棚を育てる

最後はステップ3で出てきた「食い違いの一覧」を、持ち帰れる形にします。
Gemini Notebookには、答えを残しておく メモ という場所があります。
ここですることは3つです。

1. 回答をメモに保存する
2. 書き出して、打ち合わせの持ち物にする
3. メモを資料棚に戻して、棚を育てる

4-1. 回答をメモに保存する

回答の下にある 「メモに保存」 を押すと、その回答が保存されます。

保存したメモは、右側のStudioに溜まっていきます。
チャットの履歴と違って消えませんので、残しておきたい答えはここに入れておきます。

4-2. 「メモ」の機能を確認

メモのメニューアイコン（ ⋮ ）を押すと、こんなメニューが出てきます。

「AIに聞いて、へえと思って終わり」ではなく、成果物にすることができます。
Googleドキュメントにエクスポートすれば、AIの回答をテキストファイルとして編集できます。次の打ち合わせの下書きなどにも使えるでしょう。

なお、スプレッドシートへのエクスポートは、図のように文章形式のチャットをメモに追加していると使えません。スプレッドシートにエクスポートできる形にしたい場合は、チャットで「表の形にして」と頼んで変換してください。

4-3. 「ソースに変換」で、棚を育てる

保存したメモは、ソースに変換することもできます。
ソースに変換したメモは右側のソース一覧に並び、次からは資料の一つとして扱われます。
もちろん、それ以外の資料も必要に応じてソースにアップロードできます。
必要な情報を加えて資料棚を育てていけば、答えもそのぶん具体的・的確になっていきます。

ただし、メモを1件ソースに変換すると、表示が 43 / 50 になりました。
メモも1件として数えられます。

つまり、資料棚を育てるには枠が要るわけです。
前編の事前準備で「棚に何を並べるかを選ぶのが、最初の仕事」とお伝えしました。
その際には、育てるための余白を残しておくことも考えると良いでしょう。

ただし、一つだけ注意点があります。
メモをソースにする際は、AIの答えを、確かめないまま棚に戻さないこと。

ソースにした瞬間から、それは「資料」として扱われます。
次の質問では、AIが自分の答えを根拠として答えることになります。

※ メモの中身はGemini Notebook上では編集できません。
直したい場合に、Googleドキュメント等に書き出すと、引用リンクは失われます。チャットで聞き直して、保存し直すほうが「ソース」としては扱いやすい形で残ります。

💡 ステップ4の要点
・残したい答えは「メモに保存」。書き出せば、そのまま打ち合わせの持ち物になる
・メモは「ソースに変換」で棚に戻せる。棚は育てられる
・メモも1件として数えられる。育てるための余白を残しておく
・メモもソースも、あとから編集できない。棚に戻していいのは、人が確認して確定させたものだけ

ステップ5：Studioで、成果物の形に変える

最後に、右側の Studio メニューについてご紹介します。
ソースから音声解説やマインドマップ、スライドなどが簡単に作れる機能で、Gemini Notebookで話題になることが多い機能です。

Studioに並んでいるのは、この以下のメニューです。

どれも、ソースに入っている資料だけを材料にして作られます。
ステップ4でソースに戻したメモも、そのまま材料になります。

そして、今回のような情報整理でいちばん効くのは レポート です。

5-1. 作る前に、材料を選ぶ

Studioが使うのは、ソース一覧でチェックが入っているものだけです。

今回は、ステップ4でソースに戻した「食い違いの一覧」のメモ 1件だけにチェックを入れました。
42件の資料を全部使わせると、話が広がりすぎるからです。整理し終わったものを1枚の文書にする、という作業なので、材料はそれで足ります。

5-2. レポートの形式を確認する

レポートを押すと、こんな画面が出ます。

上段の 形式 は、オーソドックスなテンプレートです。

※ 鉛筆マークのついた形式は、選ぶ前に指示を書き足せます。

面白いのは下段、おすすめの形式のほうです。

• 代替案提案書
  クライアントの美学とアクセシビリティ基準を両立させるための具体的な妥協案をまとめた…
• 専門技術解説書
  デザイン上の制約がユーザーに与える影響を技術的・倫理的視点から解説した内部資料
• 基礎解説資料
  「見た目の好み」と「使いやすさ」の間に生じるギャップを学ぶための比較学習教材
• 概念解説シート
  ユニバーサルデザインの視点から、Webサイトのアクセシビリティの重要性を説く導入教材

これらは決まったメニューではありません。
ソースをAIが読んで、その場で提案してきた4つです（そのため表示までに少し時間がかかります）。材料が「こもれびcafeの食い違い一覧」だと分かったうえで、「こんなの欲しいんじゃないですか？」と言ってきているわけです。

5-3. 「独自に作成」で、欲しい形を指示する

おすすめをそのまま使ってもいいのですが、今回ほしいのは提案書ではなく打ち合わせの持ち物です。
独自に作成を選んで、こう頼みました。

食い違いの一覧をもとに、田中様への確認事項をまとめてください。
一件ごとに「ご要望」「気になる点」「こちらからのご提案」の3つに分け、
そのまま打ち合わせで読み上げられるくらい、やわらかい言葉づかいでお願いします。

完成するまで、少し時間がかかります。

できあがると、メモの上部にレポートのアイコンが付いた生成物が現れます。
中身を見てみましょう。

チャットの答えをコピーして整えるのと、やっていることは同じです。
ただ、文書の体裁まで作ってくれるぶん、そのまま人に見せられる形になります。

できたレポートはStudioに残り、メモと同じようにGoogleドキュメントへ書き出せます。

ステップ４でご紹介した、メモの時点でGoogleドキュメントにエクスポートしたものと比べてみましょう。メモをそのままエクスポートした場合は、ちょっと見にくいですね。

対して、Studioからレポートの作成を挟むと、綺麗に整形されます。
メールの下書き、中身を確認すればそのまま使えそうなレベルです。

ほかの機能については、どうでしょう。
この案件でやったこと ── 食い違いを見つけて、確認事項にまとめる ── には、あまり出番がありませんでした。 ただ、Studioにはたくさん面白い機能が用意されています。

• 例えば、音声解説でアクセシビリティ基準を音声にして移動中に学習する。
• 数字の比較などがメインであれば、スライドでわかりやすい表にする。

整理したい、比較したい内容に合わせて使ってみてください。
その際、Studioは情報がまとまってから使ったほうが効く機能だと思っておくと、順番を間違えずに済みます。
そして、Studioが作るものも「AIの答え」です。 レポートなどを人に渡す場合は、ステップ4と同じく「中身を確かめる」ところまでが1セットです。

むしろ、体裁が整っているぶん、確かめにくくなります。
章立ての整った分析レポートを渡されると、つい「ちゃんと調べたもの」に見えてしまうからです。この落とし穴の実例は、次の「資料の『入れ方』と、AIに見えるものの差」でお見せします。

💡 ステップ5の要点
・Studioは棚の中身から成果物を作る場所。実務で先に効くのはレポート
・材料はチェックを入れたソースだけ。整理し終わったメモ1件で十分なこともある
・「おすすめの形式」はソースを読んでAIが提案したもの。棚を育てると提案まで変わる
・音声解説やマインドマップは、棚が整ってから効いてくる
・Studioが作るものもAIの答え。渡す前に確かめる

資料の「入れ方」と、AIに見えるものの差

ここまで、資料はファイルをドラッグ＆ドロップで入れてきました。
実はGemini Notebookには、WebサイトのURLも、PDFも、画像も入れられます。

そして、ここが落とし穴です。
入れ方によって、AIに「見えるもの」が変わります。
しかも、見えていないことを教えてくれない場合があるので注意が必要です。

① URL ／ ② PDF ／ ③ 画像の3つを、順に見ていきます。

① URLで入れる ── 読めるのは「文字」だけ

ソースの追加、上部からはURLでの指定もできます。

URLで取り込まれるのは、文字だけです。
画像も、埋め込み動画も、JavaScriptで表示される部分も入りません。

あるカフェのサイトのURLを入れて、配色を聞いてみます。

ソースに追加した（サイトのURL）の配色はわかりますか？

ちなみに、全く同じ文章を送っても、返ってくる答えは異なります。
親切な場合はこんな風に言ってくれることもありました。

ご提示いただいたソース（テキスト情報）には、ウェブサイトの具体的な配色（何色を使っているかなど）についての直接的な記述は含まれていません。（略）サイトのスクリーンショットなどの画像ファイルをソースに追加していただければ、より正確にお答えできます。

どちらにせよ、URLでソースを指定した場合、サイトの「見た目」まで含めた全体像を把握しているわけではないのです。
実際にソースを展開して見てみると、下図のようにテキストだけが抜き出されています。

テキストでの情報構成以外のところを知りたい、という場合は画像（スクリーンショット）を入れることで解決できます。これは「③ 画像で入れる」で紹介します。

URLを指定は向き不向きがある

「競合サイトのデザイン調査」には不向き

Web制作をしていると、こう考えます。
「競合サイトのURLを何本か入れて、デザインの傾向を出してもらえないか」

結論から言うと、お察しの通りできません。
ソースに入るのは文字だけだからです。

やっかいなのは、「ありません」で終わってくれないことがある点です。
下図は、上と同じサイトでの別バージョン。

「直接的な言及はありません」と言った後に、テキスト部分からの推測が続き、具体的な配色を調べられるような提案も出てきます。 何度かラリーを続けると、以下のようにデザイン（ビジュアル要素）にも対応できそうな提案をしてくれました。

もし、実際のウェブサイトのビジュアル（写真や具体的なレイアウトなど）をより詳しく反映した要約や分析が必要な場合は、「レポート」形式でまとめることも可能です。

なお、レポートで、実際に出てきたのは立派なブランド・店舗分析レポートでした。
デザインについての項も、AIご本人が言っていた「ウェブサイトのビジュアル」ではなく、テキスト情報を元にした店舗の空間作りの話に替わっています。

サイトの配色もレイアウトも出てきません。
そして「スクリーンショットを入れてください」という正しい方法を教えてくれるかは、タイミングや聞き方次第。** 事前知識として知らなかったら、頑張ったのにできない…とガッカリしてしまいます。

② PDFで入れる ── 読めるものと読めないものが、混ざる

PDFは「読めているように見えて、一部が読めていない」ことがあります。
しかも、読めていないことを教えてくれません。

今まで使っていなかったメニュー表のPDFをソースに追加して、実験してみましょう。
素材の中の menu.pdf 、２ページあります。

メニュー表（menu.pdf）の中で、いちばん目立つ扱いになっているのはどれですか。
そう判断した理由も教えてください。

いちばん目立つ扱いになっているのは、「本日のランチプレート」です。

正解です。
判断した理由も挙げてくれているので、詳しく見ていきましょう。

・最高値の設定：価格が¥1,200となっており、スープとパンのセット（¥800）やケーキセット（¥800）など、掲載されている他のメニューの中で最高値に設定されています
・視覚的なインパクト： 鶏肉や色とりどりの野菜が盛り付けられた、非常に彩り豊かで大きな料理写真が添えられており、視覚的にも最も強く惹きつけられる構成になっています。

文字を拾っているだけではありません。
最高値＝目立つかはさておき、価格を他のメニューと比べて「最高値」と判断し、写真に何が写っているか（鶏肉、彩り豊かな野菜）まで説明しています。
文字も、価格の並びも、写真の中身も ── PDFの中を、ちゃんと見ているように思えます。

ところが、です。
このランチプレートには、「POPULAR」と書かれた青いリボンが付いています。
私たちが目で見る場合は、一番の根拠と言える要素。
ですが、上記の根拠としては触れられていません。そこについて聞いてみましょう。

メニュー表（menu.pdf）を確認したところ、「POPULAR」や「No.1」といったアイコンやラベル形式の表記はありません。

読めていません。
おかしいなぁ…とソースで展開してみると、上図のように画像とテキストがそれぞれ入っています。
この中に「POPULARと書かれた青いリボン」の画像は入っていない ── Gemini Notebookが読み取ったソースにないから「ありません」と答えています。

では、画像だから読めないのかというと、そうとも限りません。
現に、写真については何が写っているか（鶏肉、彩り豊かな野菜）まで説明できていますし、今回のPDFにはないですが画像の中に描かれた文字も読み取れます。

問題は、PDFを構成するパーツのうち、一部だけがAIに渡らないことがあるということ。 この原因をGemini本人にも聞いてみました。挙がってきたのは、文字のアウトライン化・マスク処理・グルーピング・レイヤーの構成などによっては読み取れないことがあるという回答でした（※一般論からの推測であり、断定はされていません）。

ここから、押さえておきたいのは2つです。

• 抜けるかどうかは、PDFの作りしだい。デザインの凝った資料ほど、落ちる可能性は上がります
• 確認するのは、けっこうな手間です。入れる前に作りを調べるのも、入れたあとにソースを展開して部品が揃っているか見比べるのも、資料が増えれば現実的ではありません

ですので、この対処はシンプルでいいと思います。
デザインが凝ったPDFは、画像にして渡す。
そのほうが、読み取ってもらえる率は上がります。

URLのときと、起きていることは同じです。ソースにないことは「無い」で済ませるか、手持ちの情報で推測してしまう。
PDFが厄介なのは、ルールにできないところです。「PDFは読める」でも「PDFは読めない」でもなく、ひとつのファイルの中で、要素ごとに変わります。

③ 画像で入れる ── 見た目のすべてが伝わる

URLでもPDFでも、こぼれ落ちるのは「見た目」でした。
画像で入れると、そこが解決します。

こもれびcafeのデモページ（以前Antigravityの記事で作ったもの）のスクリーンショットであるWEBPファイルをソースに追加し、URLのときと同じことを聞いてみます。

このページの配色と余白について教えて

1. 配色（カラーパレット）
全体として、木のぬくもりや植物の緑を感じさせる、目に優しいアースカラーで構成されています。（略）フッター（ページ最下部）や、重要なアクションを促す「地図を見る」「LINEで予約する」といったボタンには、深い緑色が使われています。これは、お店の名前や窓から見える緑を象徴する色です

2. 余白（レイアウト）
「余白をたっぷりとりたい」という要望を忠実に再現し、非常にゆったりとした配置がなされています。（略）田中様が懸念されていた「スーパーのチラシのような賑やかさ」とは対極の、上品で洗練された印象を与えます

画像の場合はちゃんと見えています。 ポイントは、画像は「1枚まるごと」として見てくれることです。
文字は文字として読み、同時に色や配置や余白も見て、両方あわせて答えてくれます。

だから、こういうときは画像で入れるのが早いです。

• 参考サイト・競合サイトのデザイン調査 ── 配色やレイアウトの傾向を知りたいとき
• 紙の資料の「見せ方」を聞きたいとき ── 読み落とされそうな、装飾的なPDF
• とにかく確実に見てほしいものがあるとき

※ ただし、細かい文字は潰れることがあります。長い文書を読ませたいなら、テキストのほうが確実です。

入れ方の早見表

※ マウスを乗せると出るメニュー、スクロール演出などの「動き」は、どの入れ方でも伝わりません。

💡 「入れ方」の要点
・① URLで入るのは文字だけ。サイトの「デザイン」は分析できず、推測で埋めてくる
・② PDFは、読めていない部分に気づけない。ひとつのファイルの中で、要素ごとに変わる
・③ 画像は、見た目のすべてが伝わる。デザインを見てほしいなら、これ
・テキスト量が多い・細かい字で注釈がたくさんある時はテキストファイル

まとめ

Gemini Notebookを使う前に知っておきたいこと

• 入れる前の下ごしらえが要ります。 フォルダごとは入れられません。ファイル名がそのままソース名になるので、index.md のようなファイルは名前を変えてから。
• URLで入るのは文字だけです。見た目を見てほしいならスクリーンショットを推奨します。
• PDFは「読めているように見えて、読めていない」ことがあります。確実に見てほしいものはスクリーンショットで。
• 引用リンクは「合っている」保証ではありません。「そこに書いてある」ことは示しますが、AIの読み取り方が正しいかまでは示しません。大事なところは開いて確かめてください
• 「〜も可能です」と言われても、できるとは限りません。棚に無い情報は、提案に乗っても出てきません。返ってくるのは、体裁の整った推測です
• 画面や機能は変わります。 2026年7月に名前が変わったばかりのツールです。この記事と画面が違っていたら、新しくなったのだと思ってください

使ってみて分かった、向き・不向き

「調べる」はNotebook、「考える・作る」は普通のチャット

この記事でいちばんお伝えしたい使い分けです。

Gemini Notebookは、アイデア出しには向きません。棚に無いことは答えないからです。そこは普通のチャットの仕事です。

そしてもう一つ。Notebookは「決めて」はくれません。

今回やったことを振り返ると、Notebookが出してくれたのは「答え」ではなく 「決めるべきことの一覧」でした。そして、それは3種類に分かれます。

3つめが、意外と効きます。「答えてくれない」という弱点が、そのまま「聞き忘れていたことが分かる」という長所に裏返るからです。

結論 ── 賢いAIではなく、案件の「資料棚」

使ってみて、いちばんしっくりきた言い方がこれでした。
賢いAIを1つ手に入れるのではなく、案件ごとの資料棚を1つ作る。

性質は、この3つに集約されます。

• 棚に入れたものしか答えません。 答えの質は、そのまま棚の中身で決まります
• 棚は育ちます。 確かめた答えを戻せば、次からはそれも資料として使われます
• 棚に無いことは、「ありません」と答えるか、それらしく埋めます。 だから、確かめるところまでが1セットです

裏を返すと、このツールの働きは何を棚に並べるかで、ほとんど決まります。
そしてそれは、案件を分かっている人にしか選べません。

今回いちばん嬉しかったのは、こういう言い方ができるようになったことでした。

「田中さんが最初におっしゃっていたいろんな方に見てもらえるようにと、この文字の大きさは両立しないんです」

基準を盾にするのでも、AIのせいにするのでもなく、相手が言ったことを根拠に、一緒に考える。
資料を読み比べる時間が減ったぶん、こういうところに手が回せるようになります。

まずは今抱えている案件の資料を、ひとつのノートブックに集めてみてください。
バラバラだったものが1か所に並ぶだけで、見えてくるものがあります。

吉田 光利

Skillhub代表 & Edbase代表

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