ハクソク

世界を動かす技術を、日本語で。

NotebookLMの設計

247日前原文(jasonspielman.com)

概要

  • NotebookLM のデザインリードとして、コアUX・ブランド・ビジュアルシステムを一から設計
  • 3パネル構造 による直感的なユーザー体験の実現
  • AI活用 で創造的プロセスを一元化
  • ユーザー中心開発 と迅速なイテレーション
  • TIME誌2024年ベスト発明 への選出

NotebookLM：UXとブランドアイデンティティ設計

  • NotebookLM のプロダクトデザインリード担当
    • コアユーザー体験、ブランドアイデンティティ、ビジュアルシステムの設計
    • 実験段階から正式リリースまでの全体監修
  • 新規プロダクト創出 への挑戦
    • 既存にない体験・パターンをゼロから設計
    • クロスファンクショナルなチームとの密な連携
  • TIME誌2024年ベスト発明賞 受賞実績
  • Podcast での開発ストーリー共有（Sequoia Raizaと対談）

アーキテクチャとUI進化

  • 初期プロトタイプ のUI
    • ノート主導のUI
    • ノートキャンバス上にチャットUIをオーバーレイ表示
  • 3パネル構造 への進化
    • 学びを統合し、スケーラブルかつ適応的なレイアウトを実現
  • 課題：タブの分散による作業断絶
    • 複数ツール間の移動によるアイデア統合の困難さ
    • 創造プロセスの全てを一箇所で完結させる空間を目指す
  • 入力・出力・チャットの一体化
    • 入力（ソースリスト・オープンソース）
    • 出力（ノートリスト・オープンノート）
    • チャット・引用・多様な作成エントリーポイント
  • 1000回以上の反復試作
    • 明確なメンタルモデルと分かりやすいUIへの到達
    • 機内で紙が尽き、ナプキン上で最終案を発見

メンタルモデルとユーザーフロー

  • NotebookLMのメンタルモデル
    • 入力→会話→出力のリニアかつ柔軟な流れ
    • ユーザーが文書・ノート・リファレンスを取り込み、チャットで質問・整理・洞察化
    • 最終的にノート・学習ガイド・Audio Overviewなどの構造化出力へ
  • 直感的な位置感覚と分かりやすいAI体験

3パネル構造の特徴

  • 読書・執筆・創造の統合空間
    • AIによる摩擦低減で全プロセスの共存を実現
  • ユーザーのニーズに応じて動的に拡縮するパネル設計
    • 主要要素（ソース・ノート）への素早いアクセス
    • 最小サイズでも本質的なアイコン表示を保持
  • 標準レイアウト
    • ソース・チャット・ノートのバランス表示
  • 読書＋チャットモード
    • 引用付き応答生成に最適化
  • チャット＋執筆モード
    • 下書き・反復作業に特化
  • 読書＋執筆モード
    • ソース参照しながらの執筆向け
  • パネルのスケーラビリティ
    • 新機能やワークフロー追加にも耐える柔軟な構造
  • 各パネルの役割
    • Source Panel：ユーザー提供の全入力の集約起点
    • Studio Panel：入力からアウトプットへの変換・作成空間
    • Chat Panel：体験の中核、他ツールとの連携で動的サイズ調整

ブランドアイデンティティとビジュアル資産

  • Google Labs・ブランドチームと緊密連携
    • Feel Hwang、Nick Mcginnis、Jennifer Leartanasanらと協働
  • プレスキットからローンチビジュアルまで全資産制作
    • 公式Webサイト用アニメーションなど多数作成

開発プロセスの学びとチーム文化

  • ユーザーと共に創るプロダクト
    • 早期リリース・反復改善を重視
    • ユーザーのフィードバック・ニーズを即座に反映（例：インライン引用機能）
  • AIネイティブな新規プロダクト開発
    • 研究成果と実際の課題解決の橋渡し
    • Audio Overviewはソースに根差し、ワンクリックで学習・要約が可能
  • 会議は“話す”より“作る”が中心
    • 少人数・高速開発体制
    • UXデザイナーは1名、密な戦略・反復作業
  • コミュニティエンゲージメント重視
    • ユーザーの声と共に成長するプロダクト
    • Discordなどで直接交流・意見収集

AI時代のUX設計で得た知見

  • UIの動的進化
    • AIによる複雑な体験の統合・適応的インターフェース
    • 読書→チャット→創造の一連体験をシームレスにサポート
  • コンテキスト認識型UIの重要性
    • タスクや目的に応じた適切なアクション・ツールの提示
    • 認知負荷の低減、ワークフローの効率化
  • 過渡期としてのチャットUI
    • チャットはAI体験の“アンカー”として直感的な導入点
    • 新機能（例：Audio Overview Interactive Mode）との併用で柔軟な体験を提供

NotebookLM開発を支えたチーム

  • 主な貢献者
    • Sequoia Raiza, Stephen Hughes, Oliver King, Biao (Frank) Wang, Corbin Cunningham, PhD, Yi Yao, Usama Bin Shafqat, Simon Tokumine ほか
  • 関連投稿
    • Andrej KarpathyによるNotebookLM評価：https://lnkd.in/ghTdbyXN

まとめ

  • NotebookLM はAI時代の新しい創造体験を提案
  • 3パネル構造 と ブランド設計 で直感的かつ柔軟なUXを実現
  • ユーザー中心・高速開発・チーム連携 によるイノベーション推進
  • 今後もさらなる進化と新機能追加を予定

Hackerたちの意見

定期的に使ってる人に聞きたいんだけど、何に使ってるの？音声の概要以外で、バニラのチャットインターフェースやドキュメント統合と比べて、何が良いの？

└

アーカイブの論文やハッカーニュースのコメントセクション、面白い長文のOPとか、他のソースを使って、通勤中に聞けるポッドキャストにしてるよ。

└

友達は大学の勉強のためにクイズやフラッシュカードを作るのに使ってる。

└

私はポストセールスコンサルタントをやってるんだ。つまり、契約が締結された後にクライアントが最初に話す深い技術的な人間ってこと。プリセールスは、私に回ってくる前にすでに何回かミーティングをしてるんだ。彼らの通話のトランスクリプトや契約書（作業内容の説明）をNotebook LLMに入れて、目的や課題、優先事項、リスクなどの高レベルの質問をするんだ。それを私の最初のミーティングのスライドデッキに反映させて、クライアントが詳しく説明したり、異議を唱えたりできるようにして、みんなが同じページにいることを確認するんだ。私の発見セッションが終わったら、そのトランスクリプトもノートブックに入れるよ。それからNotebook LLMを使って、マネジメントスタイルの評価レポートの初稿を作成するんだ。LLMが書いたものをクライアントに見せることはないよ。私は特定の文体を持っていて、AIの雑な文章が大嫌いなんだ。これが企業の承認を得ているのは確かで、私たちはすべてにGSuiteを使ってる。NotebookLMが出力するものには、元の素材からのキュレーションがあるのが好きなんだ。

└

マインドマップツールが好きだな。

└

動画の説明は、私にとって音声の概要よりも良いね。

└

特定のボードゲームについて質問するのに使ってるよ。非常に複雑なゲームを学ぶのに欠かせない存在だね。 obscureなルールを探すためにルールブックをひたすら探す代わりに、ただ聞けば答えてくれるし、どこで見つけたかも教えてくれる。

NotebookLMのUXはあんまり好きじゃないな。レイアウトが分かりづらいし、UIで伝えられる概念も直感的じゃない。中身のパワーがフロントエンドにうまく反映されてない気がする。でも、この記事はすごく良い概要だった。ページもきれいで、彼の視点を見るのが面白かった。彼はプロジェクトについてしっかり考えてるのが伝わったけど、結論や結果には同意できないな。それは一ユーザーの意見だけど、もっと考えられたアプローチが増えるといいな。急速に進化してるこの分野は、デザインに対する職人のような配慮を育むのは難しいね。

└

代替品使ってる？あんまりこの分野を探求してないんだ。

この投稿もNotebookLMと同じ問題があると思う。過剰にデザインされてて、基本的にはシンプルで価値のあるUXなのに、過剰にエンジニアリングされてる。NotebookLMは明らかに役立つけど、ファイルを選んでチャットしたり、要約してもらいたいだけなんだ。情報密度が低すぎて、カードやボタン、セクション、アイコンが多すぎて、コアUXがすごくナビゲートしづらい。この記事では、彼がデザイン中にどんな面白い考えを持ってたのか知りたかったのに、代わりに変なスクロールジャッキングや画像カルーセル、不要な視覚的階層、カードがたくさん出てきた。あまりネガティブになりたくないけど、見た目はかっこいいけど、逆に邪魔になっちゃってる。

└

これを言いに来た。UIはきれいだけど、NotebookLMを使うのは決して素晴らしいユーザー体験ではない。すごく良い製品だから戻ってくるけど、ユーザーインターフェースは好きな部分じゃないな。

└

このコメントを最初に読んで、「え、どれだけひどいの？」って思ったんだ。で、実際にこんなにひどい（過剰にデザインされてる）のを見て、ちょっと面白かったよ。

└

80年代からある三パネルレイアウトを説明するために、延々とスクロールしなきゃいけないのはどういうこと？

└

兄弟コメントに完全に同意するよ。もしかしたら自分に対して間違った期待を持ってたのかも：読者をプロットポイントを通して導くナラティブのあるブログ記事になると思ってた。でも実際は、つながりや進行がないスキーマ的なアイデアの集まりで、面白い講義からスケッチされた概念的な要約みたいな感じで、行間を読む必要があるんだ。

└

読むためじゃなくて、見るために書かれてるんだろうね。

└

これにはドイツ語の言葉があるはずだよね。弱点を成功の要因のようにフレーミングすること。大手テック企業で働いてる人たちの話でよく見かける。何かが成功するのは、その一部のおかげではなくて、責任がある人たちが自分たちの旅について講演して、私たちが彼らから学べることを話すんだ。

└

つまり、これは「反抗心」や「勇気」を基準にデザインを評価する会社からのものだよね。[1] 文章全体がプロモーションパッケージのために事後的に合理化してる。[1] 見逃した人のために https://design.google/library/expressive-material-design-goo... --- 引用開始 --- サブカルチャーの認知度が32%増加したことが分かりました。これは、表現豊かなデザインがブランドをより関連性のあるものに感じさせ、「知っている」感を与えることを示しています。また、現代性が34%向上し、ブランドが新鮮で先進的に感じられるようになりました。その上、反抗心が30%も増加し、表現豊かなデザインがブランドを大胆で革新的、そして慣習から脱却する意欲を持つものとして位置づけることを示唆しています。 --- 引用終了 ---

└

著者のトーンが本当に嫌だった：「私、私、私、私、私、私。あと、誰か私をプロモートして。」彼がどれだけ素晴らしい仕事をしたかを語る段落が続いて、この詐欺師の製品（大きな可能性があるのに）…チャットすら保存しないんだよね。だから、ノートで何かについて話し始めて、戻ってきたら…メッセージが消えてる。でも、君の3カラムレイアウトでどれだけ天才か教えてくれるんだろうね。詐欺師たちで、こういうプロジェクトで何百万長者になる人たちがいるんだよね、こんなクソみたいな仕事で。

└

あまりネガティブにならずに、あなたの視点には感謝してるし、言ってることのいくつかには同意するよ。個人的には、ファイルに話しかけたいだけなら、GeminiやChatGPT、Claudeがいいと思う。この実験的な製品の目標は、真の情報源に基づいたツールが何かをクリエイティブに考えることだったんだ。（もちろん、ユーザーのニーズを最優先にしながらね）。私たちのチームは、シンプルさを保ちながらも、迅速に動くためにものすごく努力したよ。この製品は、こうしたフィードバックをもとに進化し続けると確信してる！私のウェブサイトについてだけど、私は視覚的に物事を理解する方が得意なんだ。追加のビジュアル要素が、私の意思決定プロセスを他の人にも説明できることを期待してたんだ。

└

正直に言うと、彼のウェブサイトデザインをパクった。これが俺の生きがいなんだ。

コンテキストサイズやポッドキャストは好きだけど、UXが全然理解できない。なんでノートが必要なの？自分のノートとAIのノートに違いはあるの？論文を扱う時の自分の考え方とは合ってない気がする（心理学の博士号持ってるから）か、単にエリシットに甘やかされてるのかも。

└

私は自閉症の研究者なんだけど、「ノート」って何なのかよくわからない。これをノート取りアプリとして使うべきなの？（例えばOneNoteみたいに）。時々、論文についてLLMとインタラクティブに話すことで学習が早く進むこともあるんだ。ラボへのドライブ中に音声オーバービューを使ったことはあるけど、科学の内容に深く入るオーバービューを得ることができなかったんだ。

└

ノートを他の人と共有する時にノートが役立つよ。他の人とスニペットを共有することで、すぐにその素材について深く掘り下げるための会話のきっかけができるんだ。

NotebookLMに一連の本をアップロードして、その本についてNotebookLMと面白い会話をした時、なぜその会話が保存されないの？後で振り返ることもできないし、そこから続けることもできない。なんで他のAIソリューション（GeminiやGPT）からUX/UIが変わったのか理解できない。NotebookLMが物を書くのを拒否する理由もわからない。PDFや他のファイルから得た情報を元にエッセイを書かせることができないんだ。

└

ちょっと関係あるけど、アプリから情報を取り出すのがほぼ不可能なのが変だと思う。Google Docsにエクスポートしたり開いたりするのは常識的なことなのに、コピー＆ペーストしか選択肢がないのが残念だよね。

ポッドキャストのことをちょっと触っただけの非ユーザーなんだけど、NotebookLMって、Claude Projectsみたいなものでファイルを全部放り込んで、そのプロジェクト内でチャットするのと比べて実際に良いの？もちろんポッドキャストの機能はユニークだけど。両方使ったことがある人の意見を聞いてみたいな。

└

私も全く同じことを言いに来た。今はClaude CodeとCodex CLIがあるから、必要なドキュメントを全部入れたフォルダを作って、そこから作業してるよ。

└

ポッドキャスト機能があるからこそ、NLMが大好きなんだ！朝は学びから始めるようにしてるんだけど、最近は朝のスタートにポッドキャストを聴くのが最高だよ。

毎日NotebookLMを使ってるよ。デザインのシンプルさがすごくありがたい。ただ、チームが新機能を追加するたびに、デザインをスケールさせたりユーザーフレンドリーに保つのが本当に難しくなってる。最近の例だと、2つの新機能（フラッシュカードとクイズ）が追加されて、「Artifacts Button Container」が今や6つの大きなボタンを持ってて、高さが328pxもある！インドの小さい画面のデバイスからアクセスしてるユーザーがいて、彼らはもうノートが見えなくなったってDiscordフォーラムで助けを求めてる。だから、ユーザーがそれを折りたたむためのTampermonkeyスクリプトを作らなきゃならなかった。[0] チームがすぐにそれを修正するって聞いたけど、リリースする前にもっとテストすべきだったと思う。こういう問題は他にもあって、スクリプトで修正してる。最も奇妙なのは「ノート」。なんでユーザーに360pxのサイドバーで2000語のエッセイを読ませるの？だから、フルスクリーンモードにするスクリプトを書いた。[1] チャット入力フィールドも同様で、フォローアップの質問がほとんど使えないし、選択した後も安定しない。文句を言うよりも、直した方がいいと思うけどね。[0] https://gist.github.com/volkanunsal/94db50629cad816eca84c836... [1] https://gist.github.com/volkanunsal/fded9124d62422c0d2672b8a...

これが私のウェブサイトだよ！みんなの視点を見るのが大好き。デザインは反復と進化が大事だからね。NLMが進化し続けるのは間違いないと思う。あの進化の初期に関われたことが本当にラッキーだったな。デザイナーとしては、技術的にパックがどこに行くかを見越して動こうとしてた。モデル側から何が来るかの情報を得て、その未来に合わせたUIを作ろうとしてたんだ。Googleのラボチームは、その考え方でしっかりと作ろうとしてくれたと思う。1.5年間、早期にローンチしてユーザーフィードバックを聞きながら、製品が落ち着くまで試行錯誤してた。私の近くにいた人たちは、このプロセスがどれだけ没頭するものだったか知ってるよ。Googleの中で新しい製品を0から1にするのは素晴らしい経験だった。まさか自分のポートフォリオサイトがこんな風に広まるとは思わなかったよ！

└

お疲れ様です。時々愚痴も言うけど、これまで出会った中で最も魅力的な学びの経験だと思ってる。これからもどんどん良くなっていくことを願ってるよ。

└

こんにちは、あなたのウェブサイトにバグがあります。どうやら、実際にはダークモードが有効になっていないのに、ブラウザや他の拡張機能にダークモードが有効だと広告しているみたいで、それが適切なテーマを適用するのを妨げています。

└

@jayspiel > デザイナーとしては、技術的にパックがどこに行くかを見越して動こうとしてた。これ、すごく共感できる！結局、これは完璧な科学じゃなくてアートなんだよね。継続的な調整が必要だし。プロジェクトは多くの役割に関わっていたと思うし、あなたが言ったように、ユーザーフィードバックを基に反復的に作られていったんだ。NLMはこの分野を変革したし、初期のBardやGeminiの頃と同じように、これからもどんどん良くなっていくと思うよ。特にUI/UXがね。Dey Well

└

ちょっと気になったんだけど、こういうふうに公に書けるGoogleのIPに制限ってあるの？

ここには好きな点がたくさんあるよ。3パネルの構造とか、左側のソースビューアーとか。でも、NBLMについて気になったことがいくつかあって、ちょっと痛かった。1// 3つのパネルは、上のバーにアイコンを置いてトグル式にすべきだと思う。ノートとチャットを一緒に使わないなら、スペースを無駄に占有する必要はないよね。2// 画面の中央、つまり一番大きい部分は出力に集中すべきで、チャットじゃないと思う。何かを作ることに集中しているのに、なんで横に置く必要があるの？特に、チャットはオーディオ概要に比べて特別な機能じゃないし。3// 情報密度についてなんだけど、ボタンやアイコンが大きすぎて使いづらい。AIが超人的な情報量を処理する手助けをしているから、スペースの取り合いになってるよね。NBLMの魔法はオーディオ概要にあると思うし、チャットベースのQ&Aは引用付きで、これはほとんどのLLMに共通してることだよね。それに、Geminiフラッシュだけを使ってるみたいで、検索モデルっぽい。これには推論モデルが必要だと思う。

NotebookLMは、インターフェースのおかげじゃなくて、成功してるんだよね。正直、UXはひどいと思う。これを実現したバックエンドエンジニアには感謝だね。シンプルなテキストをコピー＆ペーストできるって気づくのに時間がかかったよ。テキストの編集もあまり良くないし、フォルダやファイルがある専用のマークダウンノートセクションがないのはなんで？ほとんどの人はすぐに使えるPDFを持ってないけど、ほとんどの人がテキストエディタを使ってテキストをペーストする方法は知ってるよね。あなたのノートアプリのUIは、ノートの編集や管理に適切なサポートがないよ。