← 30の作り方

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

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

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

14日間無料で試す デモを見る
マイボード {{ stack.length }} 枚
{{ item.title }}

Features

TSUMIKIでできること

{{ f.title }}

{{ f.desc }}

Pricing

料金プラン

{{ plan.badge }}

{{ plan.name }}

{{ formatPrice(plan) }} {{ billing === 'monthly' ? '/人・月' : '/人・年' }}

{{ plan.note }}

{{ plan.desc }}

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

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

How this was made

検証レシピ

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

作り方
静的な絵ではなく「状態を持つ動くUI」を要求し、積み木ボードのミニデモと料金の月払い/年払いトグルを実装させた。
使ったスキル
なし。
使ったWeb技術
Vue 3.5.40（unpkg・SRI固定）。機能・料金カードはdata()の配列をv-forで描画。フォントはPublic Sans。

Verification Note

検証ノート

手法

静的なHTMLで見た目だけ再現するのではなく、Vue 3をCDNから読み込み、状態を持つ「動くUI」としてLPそのものを組んだ。機能・料金カードはdata()に入れた配列をv-forで描画し、ヒーローの積み木ボードと料金の月払い/年払いトグルという、実際に操作できる部分を2つ用意している。

why-the-ai-smell-disappears.diff
- background: linear-gradient(135deg,#7C3AED,#EC4899); /* AIのデフォルトの紫→ピンクグラデ */+ background:#FFFFFF; accent:#42B883; /* Vueグリーンを差し色として1色だけ使う */
- .hero-visual{ animation: float 6s ease-in-out infinite; } /* 常時ふわふわ揺れるだけの飾り */+ <transition-group name="block"> /* ＋積むを押した瞬間だけ動き、それ以外は静止 */
- border-radius:20px; box-shadow:0 20px 60px rgba(0,0,0,.15); /* 角丸大+ふわっと影 */+ border-radius:8px; border:1px solid #E2E2E3; /* hover時のみ0 4px 12pxの控えめな影 */
- <div class="price">¥980</div> /* 静的テキスト、切り替え不可 */+ {{ formatPrice(plan) }} /* billingの状態変化でDOMが実際に再計算される */
- font-family:'Inter',sans-serif; /* AIの定番書体 */+ font-family:'Public Sans','Noto Sans JP',sans-serif; /* Vueの公式ドキュメントに近い書体ペア */

向いている場面

プロダクトの操作感そのものを見せたいLPや、デモ画面がそのまま営業トークになるツールに向く。コピーとビジュアルだけで完結する読み物系のLPだと、動く部分がかえってノイズになる場合もある。