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

タスクを、積む — TSUMIKI — 今日やることが、開いた瞬間にわかる — タスクを、積む — TSUMIKI — 今日やることが、開いた瞬間にわかる — タスクを、積む — TSUMIKI — 今日やることが、開いた瞬間にわかる — タスクを、積む — TSUMIKI — 今日やることが、開いた瞬間にわかる — タスクを、積む — TSUMIKI — 今日やることが、開いた瞬間にわかる — タスクを、積む — TSUMIKI — 今日やることが、開いた瞬間にわかる — タスクを、積む — TSUMIKI — 今日やることが、開いた瞬間にわかる — タスクを、積む — TSUMIKI — 今日やることが、開いた瞬間にわかる —

PRICING

料金プラン

Free

¥0

3人まで

Team

¥980/人・月

ボード無制限

Business

¥1,980/人・月

SSO・監査ログ

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

14日間無料で試す

How this was made

検証レシピ

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

作り方: 先にFigmaで明朝の級数・行間・テラコッタの配分を決めたモックを1枚作り、その数値をそのままCSSへ写した。実装から始めない順番の検証。
使ったスキル: Figmaによるデザイン先行ワークフロー（Figma MCP経由）。
使ったWeb技術: HTML/CSS＋GSAP 3.12.5＋ScrollTrigger（cdnjs・SRI固定）。フォントはZen Old Mincho。

NOTE

検証ノート

手法

Figmaで見出しの明朝の級数、行間、テラコッタの配分だけを先に固めたモックを1枚作り、そのレイアウトの数値をそのままCSSに写した。コードから先に書くと、装飾は最後に思いつきで足すことになる。順番を逆にしただけで、版面の意図が最初から通っている。

なぜAI感が消えるのか

行間と余白

生成AIが標準にしがちな1.5前後の詰まった行間ではなく、本文全体をline-height:1.9まで開けた。ガター(--gutter)も48pxではなく72pxを取り、明朝の懐の広さに余白を合わせている。

見出し書体

Interだけで押し切らず、見出しにZen Old Mincho、本文にNoto Sans JPを組んだ。和文の明朝を横組みに乗せると、AIが選びがちなゴシック一色の量産感から離れる。

アクセント1色

紫や青のグラデーションを足さず、テラコッタ(#C8552C)を1色だけ、ボタンとTeamプランの強調に絞って使った。使う場所を絞るほど、色そのものの意味が強くなる。

章番号の余白

font-size:200pxの巨大な章番号を、opacity:0.07で右上に沈めた。装飾のためではなく、雑誌の柱と同じ、読んでいる位置を示すためだけに置いている。

罫線と角

border-radius:0で通し、区切りは全部1pxの実線(hr.divider、料金表の罫線)にした。角を丸めず、線だけで面を分けている。

向いている場面

ブランドに固有の世界観があり、コピーの間や余韻まで含めて読ませたいプロダクトに向く。情報を素早く処理させたい機能訴求型のB2B SaaSには、この行間と余白は重すぎる。

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

TSUMIKIでできること