frame-flowchart-sticky

【テンプレート：付箋フローチャートフレーム（Sticky Flowchart）】 【用途】プロセス／システム／ワークフローを「ホワイトボード＋付箋」のように描きます。オンボーディング動画、運用フローの説明、システムアーキテクチャの解説に適しています。hyperframes flowchart に着想を得ています。

【キャンバス】1920×1080。背景：ベージュ系のホワイトボード用紙 #f4ede1、またはクールグレーのホワイトボード #f0f2f4。ごく薄い六角形グリッド rgba(0,0,0,0.04) を加え、ホワイトボードらしさを出します。

【ノード（付箋）】

• 各ノードは 240×180px の付箋 1 枚です。4 色をランダムに割り当てます：黄 #fcd34d／桃 #fca5a5／ミント #a7f3d0／空色 #a5b4fc。
• 付箋には少し不揃いな回転 transform: rotate(±2deg) と、影 drop-shadow(0 6px 14px rgba(0,0,0,0.12)) を付けます。上部にはテープの装飾 linear-gradient(...) を加えます。
• ノードの内容：絵文字 1 つ、または単色の SVG アイコン 1 つ＋大きなタイトル（16-20px）＋説明 1 行（12px）。
• ノードのフォント：手書き風の Kalam／Caveat／Patrick Hand（中国語には 霞鹜文楷 または LXGW WenKai Screen を使用）。

【接続線（SVG）】

• <path> のベジェ曲線でノードを接続します。stroke は #2a2a2a、width は 2.5、stroke-linecap: round、stroke-dasharray: 0（実線）または 8 6（点線＝条件分岐）を使用します。
• 矢印の終端には marker-end を使い、黒い小さな三角形の矢印を付けます。
• 複雑なノードにはループや分岐を設けられます。同じノードから 2 本の線を出す（分岐）、または 1 つのノードに 2 本の線を入れる（合流）ことができます。

【任意のインタラクション】

• 上部のキャプション（sans、12px、大文字）："FLOW · MIGRATION · 2026"。
• ノードにマウスをホバーすると、影を浮き上がらせて scale 1.05 にします。CSS transition を使用します。
• 装飾用の「カーソル」（<svg> の矢印＋名前タグ）をノードのそばに浮かべ、figma の共同編集カーソルを模します。

【デザインの詳細】

• ノードは 5 個以上、12 個以下にします。
• ノードはすべて中央揃えにせず、ホワイトボードに「気軽に貼った」感じを少し出します。ただし、接続線が明瞭で交差しないようにします。
• 禁止事項：画面全体を覆う暗い背景、ネオンカラー、企業向けダッシュボード風のデザイン。
• フォントに Inter／セリフ体は使用せず、必ず手書き風にします。
• HTML は単一ファイルとし、外部アイコンライブラリは使いません（インライン SVG を使用）。
• ユーザーが実際に使っているプロセスの内容を必ず使用します。ノードのテキストにはユーザーの入力をそのまま使います。