ボードビュー
タスクをカードで積んで、ドラッグで並べ替え。優先順位が一目でわかる。
FEATURES
タスクをカードで積んで、ドラッグで並べ替え。優先順位が一目でわかる。
期限前日にSlackへ自動通知。抜け漏れをゼロに。
チームの進捗を毎週月曜、1枚にまとめて配信。
直近8週間・チーム全体の完了タスク数（デモデータ）
PRICING
まずは小さなチームで試したい方に。
成長するチームにちょうどいい標準プラン。
セキュリティ要件の高い組織向け。
2026年7月時点・登録チーム数の内訳（デモデータ）
How this was made
このページを何で・どう作ったか。使ったスキルとWeb技術を3行で明示する。
forceSimulationで動かし、グラフはスクロールで画面に入った瞬間に描画するよう指示。スケールは定数で先に固定。D3.js 7.9.0（jsdelivr・SRI固定）。フォントはIBM Plex Sans JP／IBM Plex Mono。NOTE
ヒーローのタスクボードをd3.forceSimulationで物理的に動かし、機能セクションと料金セクションのグラフはスクロールで画面に入った瞬間にd3.transitionで描くよう指示した。数値・スケール・力学パラメータは先にコードの定数として固定し、装飾ではなくデータ構造がそのまま絵になる設計にしている。
テンプレートLPにある「グラフ風のイラスト」は絵でしかなく、数値をどう変えても形は変わらない。ここではy軸をd3.scaleLinear().domain([0, d3.max(values)])から生成しているので、週次消化数が8件の週と19件の週とでは棒の高さの比率が実データに応じて動く。軸・目盛・単位の正確さは、装飾では絶対に作れない部分だ。
force simulationはcharge・collide・alphaという物理パラメータの設計そのものになる。forceManyBody().strength(-12)で円を軽く反発させ、forceCollide().radius(d => d.r + 4)で衝突を防ぎ、alphaTarget(0.02)をゼロに戻さず保つことで、円の座標は毎フレーム再計算され続ける。CSSの@keyframesが同じ軌道を繰り返すのに対して、こちらは止まった瞬間がない。
棒グラフとプラン別チャートは、IntersectionObserverで画面に入った瞬間だけd3.transition().duration(700).ease(d3.easeCubicOut)を発火させ、高さと幅をゼロから伸ばす。完成画像を最初から貼っておくのではなく、見えた瞬間にデータが生まれる感覚を作っている。
配色はベース#2A78D6の青一色を、クラスタや系列の違いは明度だけで3段階に分け、強調は#D6672Aひとつに絞った。多色のカテゴリカルパレットで塗り分けるAI生成グラフとは、この一点だけで見分けがつく。
進捗ボードやKPIをそのまま見せたいSaaS、分析ツールのLPに向いている。逆に、通信環境が弱いユーザーが多い場面や、情報量を絞った一枚絵のブランディングLPには、D3の読み込みと常時計算がそのまま重さになる。