ノートの表現（AI が作れるレイアウト・コンポーネント）

チャットで「見やすくまとめて」「進捗バーで」「手順書にして」「売上を棒グラフで」「フローチャートにして」「数式で書いて」「重要度をスライダーで」「ステータスを Todo/Doing/Done で」「評価を加重平均で集計して」などと頼むと、AI が内容に合わせてコンポーネント（ブロック）を選んでノートを組み立てます。自分でレイアウトを選ぶ必要はありません。使える主なコンポーネント:

• 基本: 見出し / 段落 / 箇条書き / 番号付きリスト / チェックボックス / チェックリスト / 表 / 区切り線 / コールアウト（注意喚起ボックス）/ 画像 / 動画 / 音声 / 埋め込み / 引用 / コード。タイトルは先頭の見出しで、テーマが帯や大見出しの見た目を付けます。
• レイアウト: 2カラム / Nカラム / カード / トグル（折りたたみ）/ タブ / タイムライン（日付付きの時系列）/ 目次 / ステップ。
• 構成（入れ子）: AIは関連する内容（小見出し＋本文＋箇条書き）をカードにまとめ、並列の項目は2カラム／Nカラムの各列にカードを1枚ずつ置いて横に並べます。比較は左右のカード、補足やFAQはトグル（折りたたみ）、期間別などの切り替えはタブに入り、深さは2段まで（列の中のカードまで）です。「カードで整理して」「3列で並べて」「補足は折りたたんで」のように頼めます。
• 見た目の指定: 強調したいブロックに薄い帯を付ける、ブロックの下の余白を詰める・広げる、カードを塗りや薄い色の背景にする、列の間隔を詰める・広げる、段落を大きく（導入文）・小さく（注記）・中央寄せにする、見出しの上に小さなラベル（例: STEP 1）を置く、ができます。「導入の1文を大きく」「このカードを薄い背景に」「見出しの上にSTEP 1と入れて」のように頼みます。指定しなければ見た目は従来どおりで、既にあるノートも変わりません。外観のテーマにあるカードの様式（「塗り」など）は全カードに一括で効き、ここでの指定はブロック単位です。
• 目次（toc）: ノート内の見出しから自動生成する目次（アウトライン）。長文ノートの先頭付近に置くと、各見出しへのリンク一覧になり、クリックでその場所へジャンプできます。「目次を付けて」「最初に目次を入れて」。見出しを増やしたり書き換えたりすると目次は自動で追従します。書き出した .html でも目次リンクは機能します。既定ではノートタイトル相当（先頭の大見出し）は目次に出しません。タイトルも目次に載せたいときは「目次にタイトルも入れて」と頼んでください。
• N カラム: 2〜4 列のグリッド。「3 列で並べて」のように頼めます。
• ステップ（手順）: 番号付きの手順表示。「手順書にして」「ステップで」。
• stat（数値ハイライト）: KPI・指標を大きな数字のカードで強調。「主要指標をダッシュボードっぽく」。
• progress（進捗バー）: 達成率・進捗を 0〜100% のバーで表示。「各タスクの進捗をバーで」。
• 特徴カードの並び（feature-grid）: 特徴・利点・選択肢を「アイコン＋題＋短い説明」のカードで横に並べます。「機能を特徴カードで並べて」「3つの利点をカードで」。
• バッジ: タグ・状態・カテゴリのような短いラベルを色付きのピルで並べます。「対応OSをバッジで」「関係者をバッジで添えて」。
• キーと値の一覧: 項目名と値の対（概要・スペック・担当と期日）を2列で並べます。「基本情報をキーと値で」「スペックを一覧に」。
• チャート（グラフ）: 数値データを棒 / 横棒 / 折れ線 / 面 / 積み上げ棒 / 100% 積み上げ棒 / 積み上げ面 / ロリポップ / 円 / ドーナツ / レーダーで可視化。「売上を棒グラフにして」「ランキングを横棒で」「推移を折れ線（や面）で」「内訳を積み上げ棒で」「構成比の推移を 100% 積み上げ棒で」「累積の推移を積み上げ面で」「KPI をロリポップで」「構成比を円（やドーナツ）グラフで」「評価をレーダーチャートで」。静的な SVG で描かれ、書き出した .html・サムネイルでもそのまま表示され、系列の色は、見分けやすさを優先した専用の配色です（明るい画面・暗い画面それぞれに合わせて切り替わります）。テーマ側がグラフ用の配色を持っている場合は、そちらに従います。
• ダイアグラム（図）: プロセスや構造を図で表現。フローチャート（手順・分岐）、組織図（階層）、マインドマップ（1 つの中心テーマから枝分かれする木）に対応。「リリース手順をフローチャートにして」「組織図を作って」「企画のマインドマップにして」。マインドマップは中心から左右へ自動で振り分けられ、枝ごとに色が変わります。AI が要素（ノード）と矢印（エッジ）を出力し、自動でレイアウトされた静的 SVG になります（色はテーマ追従）。
• 数式: LaTeX 記法の数式をブロック（中央の大きな式）で表示。「二次方程式の解の公式を数式で」「ガウス積分を書いて」。本文の文中に短い数式を入れたいときは「$ で囲んだインライン数式」（例 $E=mc^2$）も使えます。KaTeX で MathML として描画され、書き出した .html でもそのまま表示されます。
• スライダー: 重要度・優先度・満足度などのスコアを 0〜N のスライダーで入力。「重要度をスライダーで」「5 段階評価のスライダーを作って」。アプリ内ではトラックをドラッグして値を変えられ、変更はノートに保存されます（書き出した .html では読み取り専用の塗りバー）。色はテーマに追従。
• ステータス: Todo / Doing / Done のような状態を色付きバッジで表示。「タスクのステータスを付けて」「ステータスを 下書き/レビュー中/公開 で」。アプリ内ではバッジをクリックすると次の選択肢へ循環し、変更はノートに保存されます（書き出した .html では読み取り専用）。
• 計算フィールド: 名前付きの数値入力から合計 / 平均 / 加重平均を自動算出（スコアリング・採点・費用集計）。「テストの平均点を出して」「採用評価を加重平均で」。編集モードで各入力値を編集すると結果がその場で再計算され、ノートに保存されます。スライダーと並べて評価シートにできます。

これらは話して作るのが基本ですが、編集モードの「＋」（種類ピッカー）から選んで手で挿入することもできます（本文のブロックを選んでチャットで部分編集も可）。色はテーマに追従します（チャートの系列色だけは、上記のとおり見分けやすさを優先した専用の配色です）。