AIで作ったのに、なんだか安っぽく見える人へ。その原因の多くは「動き」です。 これは、濃紺ダークなカンバンダッシュボードの見た目と動きを、AIが再現できる形に書き起こした「設計図」です。Claude CodeやCodexにこのファイルと自分のページを渡すだけで、見本と同じ動きが再現できます。色・寸法・時間などの数値はすべて見本のコードから実測したもので、推測の値は入っていません。 再現できる動き： ・カードのドラッグ＆ドロップ（掴んで浮く、他のカードがずれて隙間が開く、離すと吸着） ・カードの追加（バネのように現れる）と削除（縮んで消えて、後ろが詰まる） ・完了に連動する棒グラフ、効率の円グラフ、今日の予定 ・全タスク完了で現れる完了バナー ・読み込み時の導入アニメーション 検証済みです：作った本人とは別のAIが、この設計図だけを渡されて再現テストを行い、実ブラウザーでの確認で「差分なし」となりました。 こんな人向けです：AIでツールやページは作れるけれど、動きの付け方が分からない人。自分のタスク管理やダッシュボードを、欲しかった見た目と動きに近づけたい人。 含まれるもの：設計図（Markdown）、動く見本ページ（HTML）、使い方README 使い方：①見本を開いて動きを確認 ②AIに設計図と自分のページを渡す ③設計図末尾の適用プロンプトを貼る 利用条件：購入した本人の制作物（個人・商用問わず）に何点でも使えます。ファイル自体の再配布・転売・公開はできません。 無料版との違い：無料版は明るいタスク管理の基本の動き（完了チェックと進捗）です。本商品はダークなカンバンの、ドラッグとデータ連動の一式で、別の商品になります。