チームのタスクを、
積み木のように。

散らばったタスクを1枚のボードに積み上げるプロジェクト管理ツール。今日やることが、開いた瞬間にわかる。

タスク	担当	期限	ステータス
請求書送付	田中	07/24	未対応
デザインレビュー	佐藤	07/23	進行中
顧客ヒアリング	鈴木	07/25	進行中
週次MTG準備	田中	07/22	完了

TSUMIKIでできること

タスクをカードで積んで、ドラッグで並べ替え。優先順位が一目でわかる。

期限前日にSlackへ自動通知。抜け漏れをゼロに。

チームの進捗を毎週月曜、1枚にまとめて配信。

How this was made

このページを何で・どう作ったか。使ったスキルとWeb技術を3行で明示する。

作り方: IBM Carbonデザインシステムの公開トークン（#0F62FE・角丸0・モーション規定）を渡し、その値の外に出ることを禁止して生成。
使ったスキル: なし。Carbonの公開トークンを指示文に貼り付けた。
使ったWeb技術: 素のHTML/CSS＋表示アニメ数行のVanilla JS。フォントはIBM Plex Sans JP／IBM Plex Mono。

IBM Carbonのカラー・角丸・タイポ・モーションのトークンを明示し、その値だけを使うよう指示した。コピー自体はTSUMIKIの共通コピーをそのまま流し込み、AIに文章を考えさせていない。

上書き対象	AIのデフォルト挙動	Carbonでの指定
角丸	border-radius 12〜20pxの丸みで「優しさ」を演出する	`* { border-radius:0 !important }`で全要素を直角に統一
差し色	紫や水色のグラデーションを1〜2本足して華やかさを出す	`--primary:#0F62FE` `--secondary:#393939`の2色に固定、グラデーション禁止
hoverの反応	`translateY(-8px)`前後で浮かせて影を強める	背景色の切り替えのみ。`--duration-fast-02:110ms`で色が変わるだけ
ヒーローの構図	中央寄せでコピーを積み上げる	`grid-column:1/7`と`7/13`の12カラム指定で左右非対称に分割
データの見せ方	絵文字アイコン＋要約テキストのカード3枚	`<table>`の行データとして`IBM Plex Mono`の等幅数字で表示

社内ツールや業務システムなど、すでにCarbonを採用しているプロダクトに追加するLPで効果が高い。個性や高揚感を前面に出したい一般消費者向けサービスには、この直角基調はやや堅すぎる。