← 30の作り方

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

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

プロジェクトボード
未対応
請求書送付
月次企画書
進行中
デザインレビュー
顧客ヒアリング
完了
週次MTG準備

TSUMIKIでできること

ボードビュー

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

自動リマインド

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

週次レポート

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

料金プラン

Free
¥0 /月
3人まで
Team おすすめ
¥980 /人・月
ボード無制限
Business
¥1,980 /人・月
SSO・監査ログ

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

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

How this was made

検証レシピ

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

作り方
デジタル庁デザインシステムの公開Markdown一式(カラー・タイポ・コンポーネント仕様)を読み込ませ、規約に従うことだけを指示。
使ったスキル
なし。公開ドキュメントを参照資料として渡した。
使ったWeb技術
素のHTML/CSS+表示アニメ数行のVanilla JS。フォントはNoto Sans JP

検証ノート

デジタル庁デザインシステムの公開Markdown一式(カラー・タイポグラフィ・コンポーネント仕様)を読み込ませ、その規約に従うことだけを指示した。独自のトーンや派手な演出は加えていない。

装飾のためだけの影・グラデーション

影はグラデーション背景と組み合わせ、常時「ふわっと」感を出す

box-shadow:0 6px 20px rgba(0,23,193,.10)をhover時のみ使用。背景グラデーションは使わない。

hoverの浮き方

translateY(-10px)級の過剰な浮き上がり

translateY(-3px)と枠線色の変化(border-color:var(--color-primary))にとどめる

フォーカスの可視化

マウス操作前提で、キーボードフォーカスの見た目を用意しない

:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}を全リンク・ボタンに明示

配色のトーン数

紫・水色・イエローなど複数のアクセントカラーを混ぜる

プライマリは#0017C1の1色のみ。彩度の高い差し色を足さない

見出しの型

セクションごとに見出しの大きさや余白がばらつく

h2は全てfont-size:28px; font-weight:700、余白も--sp-4:40pxで数値化して統一

行政・自治体・公共性の高いサービスなど、誰が見ても読める誠実さが問われる場面に向く。勢いや高揚感を演出したいプロモーション色の強いLPには、このトーンはやや物足りなく映る。