TSUMIKI
無料で始める
Features
タスクをカードで積んで、ドラッグで並べ替え。優先順位が一目でわかる。
期限前日にSlackへ自動通知。抜け漏れをゼロに。
チームの進捗を毎週月曜、1枚にまとめて配信。
Standup / 09:00
朝会のホワイトボードが、
そのまま1枚の画面になる。
Pricing
Free
¥0
3人まで
まずは小さなチームで試したい方に。
Team
¥980
/人・月（ボード無制限）
成長するチームにちょうどいい標準プラン。
Business
¥1,980
/人・月（SSO・監査ログ）
セキュリティ要件の高い組織向け。
How this was made
このページを何で・どう作ったか。使ったスキルとWeb技術を3行で明示する。
object-fit:coverのフルブリード配置＋グラデーションスクリムで文字の可読性を確保。フォントはNoto Sans JP。Note
6枚の写真を全セクションの土台に据え、CSSは写真の邪魔をしない範囲に留めた。ヒーローは100svhでチームの写真を全面に敷き、下に向かう黒スクリムだけで白文字の可読性を確保している。中盤の写真バンドも同じ手法で、background-attachment:fixedは使っていない。iOSでは効かないうえ、スクロール中の描画も重くなるためだ。
01
AIが装飾を足したくなる場所に、写真を置いた。ヒーローの背景にlinear-gradientで紫や青のグラデーションを敷くのが定番パターンだが、ここでは実写1枚と黒スクリムのみ。色を作るのではなく、写真が持つ陰影をそのまま階調として使っている。
02
ボタンの角丸はborder-radius:4pxに抑えた。テンプレSaaSに多いborder-radius:999pxのピル型ボタンをやめただけで、画面全体の温度が少し下がる。カードにもbox-shadowを持たせず、影で浮かせる代わりに1pxの罫線と写真の質感で余白を作っている。
03
見出しの文字色にbackground-clip:textのグラデーション文字を使っていない。白地では墨色、写真の上では白の単色のみ。色数を絞るほど、写真の色が主役として立つ。
04
3枚の機能カードは同じaspect-ratioで写真を揃え、番号タグだけを添えた。アイコンや絵文字を並べる代わりに、実在する道具・人・手元の写真そのものを機能の説明にしている。
人・現場・チームの空気を見せたいプロダクトと相性がいい。採用ページや会社紹介、コミュニティ系のサービスなら、写真1枚で言葉より雄弁に伝わる。逆に、扱う写真の質が低いと一気に安っぽく見える諸刃の手法でもある。プロトタイプ段階でまだ実写素材がないプロダクトや、抽象的な技術基盤を売るB2B SaaSには向かない。写真が主役になれない場面では、無理に写真を敷くよりテキストと図解で語ったほうが誠実に伝わる。