きょうの おてつだい
クリアするとスターが3つもらえるよ
あと2回19棚・141標本を収録したUI表現のライブ標本カタログ。各標本は自己完結したHTML+CSSで、コピーしたコードはそのまま動きます。右上の切替でPC表示とスマホ実機フレーム(375px)を行き来でき、標本自体もコンテナクエリで実際にレスポンシブ変形します。
各カードの「コピー」でスペック+コード一式がクリップボードへ。Sonnet等への実装指示にそのまま貼れます。
世界観ごとの5色セット+ミニUI見本
クリアするとスターが3つもらえるよ
あと2回影は落とさない。置く。枠は3px、迷いなし。
背景が透けて「層」になる。境界線は白の半透明1px。
発光は2色まで。地は真っ黒でなく紺寄りに。
角は立てず、金は一筋。書体が世界の半分を担う。
影は使わない。塗りとマーカー下線で温度を出す。
主役CTAは1画面に1つ。残りは静かに
情報のひとかたまり。PC/スマホで組み替わるものはコンテナクエリ入り
AIと道具づくりの記録。作ったものは棚に並べる主義。
6月の海霧、午前5時の遊歩道から
棚のモック
3案つくる
影は落とさず
「置く」
読了 8分 ・ CSS
7/20 (土) 14:00 – 15:30
ページの第一声。全幅表示なのでPC/スマホ切替の差が一番出る
プロジェクトの現在地を1枚に集約。チームの「あれどこ?」を今日で終わらせる。
出し物36ブース / 入場無料 / 雨でもやる
オンライン開催 / 参加無料 / 朝まで
入力は摩擦。状態(フォーカス/エラー/完了)を必ず作る
SMSに届いた4桁のコードを入力
数字はtabular-nums、マークは細く、色は仕事(状態/量)にだけ使う
反復の設計。同じものは同じ見た目、違いだけ際立たせる
ゆきちさんがあなたの投稿にコメントしました
タロウさんがフォローしました
システム: 利用規約を更新しました
状態色(緑/黄/赤/青)は仕事専用。装飾に流用しない
「7月のアイデア」を完全に削除します。この操作は取り消せません。
最初のノートを作って、思いつきを逃さない場所にしましょう。
¥2,380 ・ 注文番号 #10294
書体を増やさず、サイズ対比と余白で組む
見出しと本文のサイズ差だけで階層はつくれる。書体を増やす前に、まずこの一手を検討する。
増設で標本数が増えるほど、探す速度が価値になる。検索とタグ設計を先に固めておくと後の追加が楽になる。
本文はここに続く。リード文よりわずかに小さく色も濃くして、読み進める本編であることを示す。
棚は増やすものではなく、育てるものだ。標本の数より、並べ方の一貫性が信頼をつくる。
編集後記より
公開前にこの一文だけ読者の目に留めたい、というときはマーカーを1箇所にとどめる。
手順の中で絶対に外せない条件は太字1箇所で示すと迷わない。
本文の色から外れる重要な数値や注意は色文字を1箇所だけ使う。
見出しだけを縦書きにして骨格を作り、本文は横書きのまま読みやすさを保つ。混在は和文サイトに珍しくない型である。
表現の再現性を、道具立てから伝える。
動きは意味の通訳。1画面で自走する無限ループは1つまで
最近のアクティビティ
毎日をちょっと快適に。
社
導入企業数
形式が正しくありません。@以降を確認してください
新着通知
LPは棚の組み合わせ。1セクション=1メッセージ
読み込みを待たない設計。
思いついた時にすぐ書ける。
閉じても消えない。
下書きは常に手元に残る。
PCでもスマホでも続き。
作業の続きは常に最新。
はい。1人での利用であれば無料プランの範囲で完結します。チーム利用から有料プランをご検討ください。
登録時のカード入力は不要です。14日間はすべての機能をそのままお試しいただけます。
いつでも変更可能です。差額は日割りで自動計算され、次回請求にまとめて反映されます。
入力の手間が減って、記録が続くようになりました。3日坊主だった自分にとっては大きな変化です。
チームの進捗が一目で分かるようになり、確認のためだけの会議が減りました。導入して半年で定着しています。
サポートの返信が早く、初期設定で詰まった時もすぐに解決できました。乗り換えの不安が一番少ないサービスでした。
無料プランはクレジットカード登録なしで今すぐ使えます。
導入企業 300社以上
メールアドレスだけで
30秒で完了。
使う目的を選ぶだけ。
あとから変更も可能。
その日のうちに
最初の記録が残せる。
| 他社A | 他社B | 自社プロダクト | |
|---|---|---|---|
| 初期費用 | ¥50,000 | ¥30,000 | ¥0 |
| 月額料金 | ¥12,000〜 | ¥9,800〜 | ¥2,480〜 |
| サポート体制 | 平日のみ | メールのみ | 365日チャット |
| API連携 | 一部対応 | 非対応 | 標準搭載 |
| 導入までの期間 | 2〜4週間 | 1〜2週間 | 即日 |
背景は主役の引き立て役。テクスチャは1画面1種
小さい部品ほど状態設計が命。色は仕事にだけ使う
表は縦線を引かない。揃えと余白で行を読ませる
| 注文ID | 顧客名 | 商品 | 金額 | ステータス | 注文日 |
|---|---|---|---|---|---|
| ORD-1042 | 田中 誠 | ワイヤレスイヤホン | ¥12,800 | 発送済み | 2026-07-10 |
| ORD-1041 | 佐藤 美咲 | 保温タンブラー 500ml | ¥2,400 | 処理中 | 2026-07-10 |
| ORD-1040 | 小林 陽 | 折りたたみデスクライト | ¥6,980 | 発送済み | 2026-07-09 |
| ORD-1039 | 渡辺 葵 | モバイルバッテリー 10000mAh | ¥3,600 | キャンセル | 2026-07-09 |
| ORD-1038 | 中村 光 | スマート体重計 | ¥5,200 | 処理中 | 2026-07-08 |
| ORD-1037 | 山口 遥 | USB-C急速充電器 | ¥1,980 | 発送済み | 2026-07-08 |
| 商品名 | 売上 | 件数 |
|---|---|---|
| ワイヤレスイヤホン Pro | ¥842,300 | 312 |
| スマート体重計 | ¥615,000 | 245 |
| 折りたたみデスクライト | ¥398,200 | 501 |
| 保温タンブラー 500ml | ¥276,900 | 683 |
| モバイルバッテリー | ¥198,400 | 227 |
| 氏名 | メール | 権限 | |
|---|---|---|---|
| 鈴木 彩 | suzuki.a@example.jp | 管理者 | |
| 高橋 陸 | takahashi.r@example.jp | 編集者 | |
| 中村 光 | nakamura.h@example.jp | 閲覧者 | |
| 渡辺 葵 | watanabe.a@example.jp | 編集者 |
| 注文ID | 顧客名 | 金額 | ステータス |
|---|---|---|---|
| ORD-1042 | 田中 誠 | ¥12,800 | 発送済み |
| ORD-1041 | 佐藤 美咲 | ¥2,400 | 処理中 |
| ORD-1040 | 小林 陽 | ¥6,980 | 発送済み |
| ORD-1039 | 渡辺 葵 | ¥3,600 | 処理中 |
| ORD-1038 | 中村 光 | ¥5,200 | 発送済み |
| ORD-1037 | 山口 遥 | ¥1,980 | 処理中 |
| ORD-1036 | 加藤 陸 | ¥9,400 | 発送済み |
| ORD-1035 | 斎藤 澪 | ¥2,800 | 発送済み |
| ORD-1034 | 木村 悠 | ¥15,600 | 処理中 |
| ORD-1033 | 林 楓 | ¥4,300 | 発送済み |
| ORD-1032 | 清水 蓮 | ¥7,100 | 発送済み |
| ORD-1031 | 山本 凛 | ¥3,200 | 処理中 |
| ORD-1030 | 森 湊 | ¥18,900 | 発送済み |
| ORD-1029 | 池田 環 | ¥1,200 | 発送済み |
| ORD-1028 | 橋本 陽菜 | ¥6,600 | 処理中 |
| ORD-1027 | 石川 大和 | ¥9,900 | 発送済み |
| 注文ID | 顧客名 | 金額 |
|---|---|---|
| ORD-1032 | 清水 蓮 | ¥7,100 |
| ORD-1031 | 山本 凛 | ¥3,200 |
| ORD-1030 | 森 湊 | ¥18,900 |
| ORD-1029 | 池田 環 | ¥1,200 |
| 注文ID | 顧客名 | 金額 |
|---|---|---|
| ORD-1042 | 田中 誠 | ¥12,800 |
| ORD-1040 | 小林 陽 | ¥6,980 |
| ORD-1037 | 山口 遥 | ¥1,980 |
| 注文ID | 顧客名 | 金額 | ステータス |
|---|---|---|---|
| ORD-1042 | 田中 誠 | ¥12,800 | 発送済み |
| ORD-1041 | 佐藤 美咲 | ¥2,400 | 処理中 |
| ORD-1039 | 渡辺 葵 | ¥3,600 | キャンセル |
| ORD-1038 | 中村 光 | ¥5,200 | 処理中 |
重ねるUIは退路(閉じる)を最初に設計する
画像は器で品質が決まる。比率固定でガタつきを殺す
雨上がりの商店街、夕方6時の灯り
撮影: 表現の棚 編集部報酬は数字より演出。ただし毎回は麻痺する、ここぞだけ
次のレベルまであと 600XP
親指の届く場所に主役を。画面下こそ一等地
行を左へ引くと削除ボタン
今日のフィード
上下にドラッグして選択