← 30の作り方
チーム運営を、もっとシンプルに

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

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

積み木のマクロ写真
Features

TSUMIKIでできること

ボードビュー

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

ボードの前で話すチーム

自動リマインド

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

週次レポート

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

デスクの上の資料
Pricing

料金プラン

Free

¥0

(3人まで)

まずは小さなチームで試したい方に。

Team ※人気プラン

¥980

/人・月(ボード無制限)

成長するチームにちょうどいい標準プラン。

Business

¥1,980

/人・月(SSO・監査ログ)

セキュリティ要件の高い組織向け。

Get started

今日のタスクから、
積み始めよう。

検証レシピ

How this was made

検証レシピ

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

作り方
tasteskill.devのsoft-skillを読み込ませて「このスキルに従って作って」とだけ指示。スキルが持つ質感アーキタイプ3種×レイアウト3種からEthereal Glass × Asymmetrical Bentoの組み合わせが選ばれた。
使ったスキル
soft-skillhigh-end-visual-design(tasteskill.dev配布)。「$150k級エージェンシーの仕上がり」を自称するペルソナ型スキルで、二重ベゼル・Button-in-Button・カスタムイージングを強制する。
使ったWeb技術
素のHTML/CSS+IntersectionObserver。イージングは全箇所cubic-bezier(0.32,0.72,0,1)、フォントはPlus Jakarta Sans+Noto Sans JP。写真はCASE 21の実写素材を再利用。
Notes

検証ノート

01 手法

スキルの正体は「Vanguard_UI_Architect」という人格の設計規範。生成前にサイコロを振らせて(Variance Mandate)、質感アーキタイプとレイアウトアーキタイプを毎回選び直させる。今回はSaaS文脈なのでEthereal Glass(OLED黒+発光オーブ+ガラス)とAsymmetrical Bentoが選ばれ、Inter・Roboto・Helveticaなどの定番フォントは禁止リストで最初から使えない。

02 なぜAI感が消えるのか

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はナビとオーバーレイ限定という性能ガードレールまで書いてある。

03 向いている場面

世界観で魅せたいSaaS・AIプロダクト・ブランドサイトの一枚目。情報を早く比較したい料金表や資料請求ページには、この余白と演出は贅沢すぎる。CASE 27のtaste-skillが「判断力の平準化」なら、こちらは「豪華さの強制」で、同じ配布所のスキルでも狙いがまったく違う。