散らばったタスクを1枚のボードに積み上げるプロジェクト管理ツール。今日やることが、開いた瞬間にわかる。
タスクをカードで積んで、ドラッグで並べ替え。優先順位が一目でわかる。
期限前日にSlackへ自動通知。抜け漏れをゼロに。
チームの進捗を毎週月曜、1枚にまとめて配信。
How this was made
このページを何で・どう作ったか。使ったスキルとWeb技術を3行で明示する。
oklch()で定義。フォントはInstrument Serif／Shippori Mincho／IBM Plex Mono。Hallmarkスキルの57項目のゲートとanti-patterns.md(紫グラデーション・999px丸ボタン・絵文字アイコンなど禁止パターンの一覧)を通し、テーマ「Lumen(深夜の工房×真鍮の発光)」の世界観に沿ってトークンを一から設計させた。
絵文字を丸グラデに乗せる代わりに、stroke-width:1.3の線画SVGを通し番号(no.01〜03)付きで描いている。ボードとリマインドの図解も1枚の真鍮装置<svg>に統合した。
16進数のベタ書きではなくoklch()で全トークンを定義している(--color-accent: oklch(76% 0.17 50))。紫グラデーションはanti-patterns.mdで名指しで禁止された色。
全体で--radius-sm:3px --radius-md:4pxのみを使う。999pxの丸ピルボタンは一切登場しない。
浮き上がりではなく、枠線色の変化とブラスの縁取り(box-shadow:0 0 0 1px var(--color-accent-soft))で反応する。translateYは一度も使っていない。
見出しに和文明朝Shippori Mincho、数字にIBM Plex Mono、ラベルに大文字letter-spacingのmono-labelを使い分けている。Inter一択には頼っていない。
ブランドの世界観や作り込みの密度を前面に出したい高単価B2Bサービス、ハイエンドなクリエイティブツールの世界観づくりに強い。素早く量産したいランディングページや親しみやすさを優先する消費者向けサービスには、この密度はやや重い。