タスクをカードで積んで、ドラッグで並べ替え。優先順位が一目でわかる。
期限前日にSlackへ自動通知。抜け漏れをゼロに。
チームの進捗を毎週月曜、1枚にまとめて配信。
Free
¥0
(3人まで)
まずは小さなチームで試したい方に。
Team ※人気プラン
¥980
/人・月(ボード無制限)
成長するチームにちょうどいい標準プラン。
Business
¥1,980
/人・月(SSO・監査ログ)
セキュリティ要件の高い組織向け。
How this was made
このページを何で・どう作ったか。使ったスキルとWeb技術を3行で明示する。
high-end-visual-design(tasteskill.dev配布)。「$150k級エージェンシーの仕上がり」を自称するペルソナ型スキルで、二重ベゼル・Button-in-Button・カスタムイージングを強制する。IntersectionObserver。イージングは全箇所cubic-bezier(0.32,0.72,0,1)、フォントはPlus Jakarta Sans+Noto Sans JP。写真はCASE 21の実写素材を再利用。スキルの正体は「Vanguard_UI_Architect」という人格の設計規範。生成前にサイコロを振らせて(Variance Mandate)、質感アーキタイプとレイアウトアーキタイプを毎回選び直させる。今回はSaaS文脈なのでEthereal Glass(OLED黒+発光オーブ+ガラス)とAsymmetrical Bentoが選ばれ、Inter・Roboto・Helveticaなどの定番フォントは禁止リストで最初から使えない。
02-1 二重ベゼル(Doppelrand)。カードを地の上に直置きせず、「アルミトレイに載せたガラス板」として外殻+内核の入れ子で組む決まり。角丸も外2rem・内calc(2rem-0.5rem)と同心円で計算させる。フラットカード一発置きというAIの既定値が構造的に出せない。
02-2 Button-in-Button。CTAの矢印は裸で置かず、専用の円形ラッパーに入れてボタン右端に密着させる。ホバーで内円だけが斜めに動き、ボタン全体は押すと縮む。この「内部が動く」感触はテンプレの語彙に無い。
02-3 動きの全数検査。linearとease-in-outは即失格で、全遷移がcubic-bezier(0.32,0.72,0,1)の質量感に統一される。出現もtranslateY(64px)+blurの「重いフェード」で、ふわっと出るだけのAIアニメと質が変わる。
02-4 ナビは上端に貼り付けず、浮かせたガラスのピルにする規定。セクション余白はpy-24以上を倍がけした150px級で、余白の量そのものが「高い仕事」の顔を作る。ノイズはfixedレイヤー限定、blurはナビとオーバーレイ限定という性能ガードレールまで書いてある。
世界観で魅せたいSaaS・AIプロダクト・ブランドサイトの一枚目。情報を早く比較したい料金表や資料請求ページには、この余白と演出は贅沢すぎる。CASE 27のtaste-skillが「判断力の平準化」なら、こちらは「豪華さの強制」で、同じ配布所のスキルでも狙いがまったく違う。