ボードビュー
タスクをカードで積んで、ドラッグで並べ替え。優先順位が一目でわかる。
タスクをカードで積んで、ドラッグで並べ替え。優先順位が一目でわかる。
期限前日にSlackへ自動通知。抜け漏れをゼロに。
チームの進捗を毎週月曜、1枚にまとめて配信。
まずは小さなチームで試したい方に。
成長するチームにちょうどいい標準プラン。
セキュリティ要件の高い組織向け。
How this was made
このページを何で・どう作ったか。使ったスキルとWeb技術を3行で明示する。
6px 6px 0 #000・原色・傾きの実数値だけを先に固定して組ませた。Space Grotesk／M PLUS 1p。指定したのは「ネオブルータリズムで組む」という手法名と、黒枠3px・ハードシャドウ6px 6px 0 #000・原色2〜3色・要素の傾き-1.5deg〜1degという4つの数値。曖昧に「粗くしてほしい」と頼むのではなく、崩す幅そのものをCSSの実数値で先に固定してから組んでいる。
生成AIのLPは頼まなければbox-shadow:0 8px 24px rgba(0,0,0,.12)のような多段ぼかし影に寄る。ここでは光源のないブラー半径ゼロの6px 6px 0 #000に置き換え、影が「物理的にそこにある」状態にした。
border-radius:16px〜24pxの優しい角丸をやめ、カードは直角のまま。曲線で調和を作らせず、枠線3px＋直角という「選び直した」跡を残している。
primary1色＋グレースケールという配色AIの得意な「調和優先」を外し、#FF6B6B・#FFD93D・#4D96FFを隣り合わせて衝突させた。既視感のある落ち着いた組み合わせから意図的に離れている。
カードやバッジのrotate()を0degで揃えない。テンプレ出力は基本グリッドに完全に整列するので、-1.5deg〜1degのばらつきそのものが「テンプレでは事故になる」要素として効いてくる。
ボタンはhoverで浮いてshadowが伸び、activeで沈んでshadowが縮む。ふわっと拡大するCSSトランジションではなく物理的な押し感にし、アイコンも絵文字ではなくstroke幅3のSVG線画だけで描いている。
向いているのは、個人開発やインディー系プロダクトのように作り手の顔が見えるサービス。若い層向けのプロダクトや、一度見たら忘れないキャンペーンLPにも合う。金融や法人向けの信頼感を優先する場面では、この崩し方はただのノイズになる。