← 30の作り方
● SYS ONLINE

TSUMIKI

チーム運営を、もっとシンプルに

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

Generative background — p5.js flow field

seed: 0000

押すたびに背景が描き直される

UNIT / S-01

0

つの機能

UNIT / S-02

¥0

から始められる

UNIT / S-03

0日間

無料で試せる

01[ FEATURES ]///

TSUMIKIでできること

機能は3つだけ。増やさないことを設計方針にしたので、覚えることも3つで済む。

UNIT / F-01+

01

ボードビュー

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

>>> BOARD.VIEW

UNIT / F-02+

02

自動リマインド

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

>>> AUTO.REMIND

UNIT / F-03+

03

週次レポート

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

>>> WEEKLY.REPORT

02[ SPEC ]///

仕様

導入の判断に必要な数字を、飾らずに並べる。

BOARD.SYNC
1 VIEW
REMIND.CH
SLACK
REPORT.CYCLE
WEEKLY / MON
TRIAL.WINDOW
14 DAYS
PLAN.TIERS
3
SEAT.MIN
1

NOTICETSUMIKIはデザイン検証のための架空サービスです。申し込みも課金も発生しません。

03[ A DAY WITH TSUMIKI ]///

積み上げていく、一日の輪郭

朝のまっさらな机から、夕方の静かな片づきまで。スクロールに合わせて写真が切り替わる6つの場面で、3つの機能が実際に働くタイミングを追う。

9:00 01 / 06

朝、まだ何もない机

今日のタスクは、まだどこにも書かれていない。ここから積み上げていく一日が始まる。

9:30 02 / 06

テーブルに集まって、今日の順番を決める。

FEATURE

ボードビュー

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

10:15 03 / 06

ボードの前で、並べ替える

昨日の残りと今日の予定が混ざる時間。順番を決めるだけで、迷いが消える。

13:00 04 / 06

机に戻って、ひとつずつ手を動かす。

FEATURE

自動リマインド

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

15:40 05 / 06

詰まったら、隣に一声

画面をのぞきこむだけで片づくことも多い。同じボードを見ているから、相談が早い。

18:00 06 / 06

窓の外が暮れる頃、ボードは静かに片づいている。

FEATURE

週次レポート

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

04[ PRICING ]///

料金プラン

3つのプランを、料金・対象・向いている方の3行だけで比較できる表にした。

Free・Team・Businessの3プランを、料金・対象・向いている方で比較した表
プラン Free Team人気プラン Business
料金 ¥0 ¥1,980/ 人・月
対象 3人まで SSO・監査ログ
向いている方 まずは小さなチームで試したい方に。 セキュリティ要件の高い組織向け。

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

[ TRIAL / 14 DAYS / NO CARD REQUIRED ]

14日間無料で試す
検証レシピ

How this was made

検証レシピ

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

作り方
29ケースのうち、手ごたえのあった4つ——15(自社ブルーDS)を土台の色と形に、19(p5.jsフローフィールド)をファーストビューに、24(sticky写真ストーリー)を中盤の6場面に、30(ブルータリズムの区画設計)を線とモノスペースに割り当てて統合した。初版で使っていたWebGL生シェーダーは外し、その席をp5.jsに譲っている。
使ったスキル
image-genスキル(gpt-image-2)の写真素材を続投。区画設計はbrutalist-skillindustrial-brutalist-ui)の「1つのアーキタイプを選んで混ぜるな」という運用規則を、色だけ自社ブルーに置き換えて適用した。
使ったWeb技術
p5.js 1.11.1のフローフィールド+GSAP 3.12.5ScrollTrigger(いずれもSRI固定)+position:stickyIntersectionObserverの写真ストーリー+grid gap:1pxの区画線+repeating-linear-gradientの走査線とハザード帯。
05[ NOTES ]///

検証ノート

N-01手法

4ケースを並べると、担当が自然に決まった。15は色と角丸の形を持っていて土台になる。19は「毎回違う絵が出る」という再現不可能性をファーストビューに持ち込める。24はスクロールという時間軸を扱える。30は線の引き方と情報の詰め方を規定できる。重ならないので、同じページに置いても場所の取り合いにならない。初版のWebGLシェーダーだけは19と役割が丸かぶりだったため、席を明け渡してもらった。

N-02なぜAI感が消えるのか

02-1ファーストビューがスクリーンショットで再現できない。Perlinノイズのベクトル場に沿って粒子がalpha 9〜20の線を描き溜める方式なので、noiseSeed()が変わるたびに別の絵になる。「Regenerate」を押せばその場で証明される。テンプレート生成の武器である再現性が、ここでは原理的に成立しない。

02-2仕切り線をborderで引かず、display:grid; gap:1pxの背景色差で彫っている。ヘッダー・スタッツ・機能・仕様・フッターがすべて同じ作り方の区画になるので、カード+影というテンプレの語彙が入り込む隙がない。

02-3タイポの振れ幅を大きく取った。ワードマークはArchivo Blackをclamp()で紙面いっぱいまで膨らませ、機体番号は10.5pxのモノスペースまで絞る。全部が中くらいのサイズに揃うAI出力の平均化と、正反対の作り方になる。

02-4色は#247db9の1系統だけ。走査線もハザード帯も、赤ではなくブランド青で引き直した。赤は「架空サービスです」の注意書き1箇所、端末緑はヘッダーの状態表示1箇所に限定してある。使う色を増やさずに、明るい紙面と暗い端末を行き来させている。

02-5時間の流れを写真に語らせた。9:00の何もない机から18:00の窓辺まで、position:stickyのステージとIntersectionObserverで6場面を切り替える。機能紹介を「朝から夕方までのどこで効くか」に変換すると、箇条書きの並列感が消える。

N-03向いている場面

4つの技法を1本のHTMLに収めるには、それぞれを単体で検証してから重ねる工程が要る。フローフィールドの粒子数とアルファ値の調整、区画線と角丸が同居する境界の詰め、写真ステージとステップの座標合わせ。数時間で仕上がる作業ではない。ローンチページや会社の顔になる1枚のように、時間をかけてでも見せ場を作る場面には向く。社内向けの検証LPや量産したいキャンペーンページには明らかに過剰で、そこは軽い技法を選んだ他のケースを見たほうが早い。