特集 01/ Feature
タスクをカードで積んで、ドラッグで並べ替え。優先順位が一目でわかる。
期限前日にSlackへ自動通知。抜け漏れをゼロに。
チームの進捗を毎週月曜、1枚にまとめて配信。
特集 02/ Team
毎朝ボードを見ながら、その日いちばん積むべきタスクを選んでいる人たちがいる。
Column/ Notes
特集 03/ Plan
まずは小さなチームで試したい方に。
成長するチームにちょうどいい標準プラン。
セキュリティ要件の高い組織向け。
How this was made
このページを何で・どう作ったか。使ったスキルとWeb技術を3行で明示する。
CSS Gridの非対称レイアウト＋明朝体（Shippori Mincho）。JavaScriptなし。Note
雑誌の特集ページを型にして、写真の大小と余白の配分だけで情報を組んだ。同じ機能説明でも、カード状のUIコンポーネントは一切使っていない。CSS Gridで組んだ写真の集合と、明朝体の級数差でヒエラルキーを作る構成だ。機能や料金の見出しも枠で囲わず、罫線と数字だけで区切っている。
AIが素で作るLPは、影付きの角丸カードに写真を収めがちだ。ここでは img に aspect-ratio を指定し、grid-template-areas で大小の写真を敷き詰めている。カードという単位を外すと、画面全体が1枚の誌面に見えてくる。
見出しは60px近くまで引き伸ばし、写真のキャプションは10.5pxまで絞った。SaaSサイトにありがちな均質な文字サイズとは違う振れ幅だ。級数の差そのものが情報の重みを語り、説明がなくても本文と添え書きの区別がつく。
機能や料金の見出しにアイコンは置かず、01・02・03という大きな数字と1本の罫線だけで区切った。装飾を削った分だけ余白が構成要素として働き、雑誌の版面に近い呼吸が生まれている。
写真素材を揃えられる業種、たとえば人材・不動産・飲食・美容のように人や空間の実写を主役にできるサービスに向いている。反対に、写真を用意しにくいプロダクトや、機能数が多く一覧性を優先したいSaaSには不向きだ。読み込む画像点数が多い分、表示速度の設計も欠かせない。