NotebookLM音声概要【完全攻略】

# 目的
目的は、このチャットのやり取りであなたが回答した内容を「ひと目見て理解できる図解資料のHTML」を作成することです。

# 指示内容
あなたが出力した解説をもとに以下のデザイン要件に基づいたインフォグラフィック風HTMLで作成してください。
​
# 文章のスタイル
・親しみやすい口語体＆敬語
・簡潔な文章
・初心者にも理解しやすい言葉を使う
・分かりやすい具体例を活用する

# 図解資料のタイトル条件
・想定読者を引き込むキャッチーなタイトル
・20字から35字の間
・テーマに適切なタイトル付け
・「図解」というフレーズは使用禁止

# 【デザイン要件詳細】
## 全体的なスタイル:
リッチフラットデザインを採用してください。フラットデザインを基盤としつつ、グラデーション、適度な影（box-shadow）、角丸などを効果的に使用し、モダンで深みのある視覚表現を目指します。図解要素のスタイルを多めに活用しましょう。
## カラースキーム:
基調色: オーシャンブルー系（例: 濃い青 #023e8a から標準的な青 #0077b6、明るい水色 #48cae4 まで）をメインに使用してください。
グラデーション: オーシャンブルーから水色へのグラデーションを効果的に活用してください。例えば、ヘッダー背景、カードのアクセント（上部ボーダーなど）、アイコン背景、背景の微妙な変化などに適用することを検討してください。
コントラスト:
ページ全体の背景: 非常に薄い水色（例: #f0f8ff AliceBlue）または白に近い明るい色。
コンテンツカード背景: 白 (#ffffff)。
主要テキスト: 濃紺 (#012a4a) またはダークグレーで、白い背景に対して高い可読性を確保してください。
濃い青の背景上のテキスト: 白 (#ffffff)。
アクセントカラー: 鮮やかな黄色（例: #ffc107）を強調ボックスなどに限定的に使用してください。
## レイアウト:
各情報セクションを、背景色が白で、角丸と影（box-shadow）を持つ独立したカードとして表示してください。カード間のマージンを適切に設定してください。
コンテンツ要素間の余白（パディング、マージン）は、情報が整理され、見やすいように調整してください。
## タイポグラフィ:
見出し (h1, h2など): 'Poppins' などのモダンなサンセリフ体（文字色は濃い青）。
本文 (pなど): 'Noto Sans JP' などの可読性の高い日本語対応サンセリフ体（文字色は濃紺）。
重要な語句にはマーカーや太字を活用するなどして強調。
文章は簡潔にする。
## アイコン:
Font Awesome 6 アイコンを使用してください。
リスト項目では、アイコンを円形の背景（オーシャンブルー系のグラデーションまたは単色）で囲み、テキストの左側に配置してください。
## ヘッダー:
ページの最上部に配置し、オーシャンブルーから水色へのグラデーション背景にしてください。
タイトル（h1）は中央揃えで、文字色は白にしてください。
## 図解要素のスタイル:
### 表 (<table>):
シンプルでクリーンなデザインにしてください。
ヘッダー行（<th>）はオーシャンブルー系の背景色に白文字など、区別しやすいスタイルにしてください。
行（<tr>）ごとに背景色を交互に変える（ゼブラストライピング）と見やすくなります。
罫線は細く、色は明るいグレー（例: #dee2e6）などが適切です。
表 (<table>) のデータ行 (tbody 内の <tr> 要素) にマウスカーソルを合わせた際 (:hover 擬似クラスを使用) に、その行の背景色が変わるようにしてください。
ホバー時の背景色: 既存のデザインと調和する、明るく目立ちすぎない色を指定してください。例えば、基調色（オーシャンブルー系）の非常に薄いバージョン（例: #e0f2f7, #eaf7ff など）や、ごく薄いグレー（例: #f8f9fa）などが考えられます。
色の変化: 背景色がスムーズに変わるように、必要であれば transition プロパティ（例: transition: background-color 0.2s ease;）を追加してください。
対象範囲: このホバーエフェクトは、表のヘッダー行 (<thead> 内の <tr>) には適用しないか、適用する場合はより控えめな効果にしてください。データ行の視認性を高めることが目的です。
表には「おすすめ度」などの評価指標を★の数で評価する項目を入れてください。
### 図（フロー図/ステップ図/ツリーマップ/ネットワーク図）:
CSS（FlexboxやGridなど）で表現可能な範囲で、視覚的に分かりやすく目立つスタイルを定義してください。
各ステップや要素を角丸のボックスで表現し、背景色や枠線にオーシャンブルー系の色を使用してください。
要素間の接続を示す矢印は、CSSの疑似要素（::before, ::after）やボーダープロパティ、またはFont Awesomeアイコンで表現し、色は基調色が望ましいです。
図のホバー: マウスオーバー時に図やカードが結構浮き上がり、影が濃くなるインタラクションを追加してください。
### グラフ（円グラフ/棒グラフ/面グラフ/バブルチャートなど）:
CSS（FlexboxやGridなど）で表現可能な範囲で、視覚的に分かりやすく目立つスタイルを定義してください。
各ステップや要素を角丸のボックスで表現し、背景色や枠線にオーシャンブルー系の色を使用してください。
要素間の接続を示す矢印は、CSSの疑似要素（::before, ::after）やボーダープロパティ、またはFont Awesomeアイコンで表現し、色は基調色が望ましいです。
図のホバー: マウスオーバー時に図やカードが結構浮き上がり、影が濃くなるインタラクションを追加してください。

## 特定の要素:
強調ボックス: 特に重要なメッセージを示す部分では、アクセントカラー（黄色）の背景を持つボックスを使用してください。
リスト項目のホバー: マウスオーバー時にカードが結構浮き上がり、影が濃くなるインタラクションを追加してください。
## レスポンシブデザイン:
スマートフォンなどの画面サイズでも、レイアウトや図解が見やすいようにメディアクエリで調整してください。（特に表やフロー図は横スクロールや縦積みにするなど工夫が必要な場合があります）
## 見出しのデザイン:
各見出しはオーシャンブルーから水色へのグラデーション背景にしてください。
##  {### 図}やや{### グラフ}の挿入:
適切な場所に数値を数値で説明できる資料をグラフ（円グラフやレーダーチャート等）形式で作成してください。
数値は事実ベースで作成してください。
図やグラフなどの図解資料は設定したカラーデザインではなく、コントラストのある色を使用してください。
# 作成するコンテンツのテーマ: [ここに具体的なテーマや内容を記載。表やフロー図などを含めてほしい旨も具体的に記述すると良い]

上記要件を可能な限り満たしたHTMLコード（CSSは<style>タグ内に記述）を生成してください。よろしくお願いします。