logs 機能（180字 + 写真必須の一文投稿）の構想と UI モック

  • 起票日: 2026-07-12

  • 関連: tech / note タブの posts 統合

  • ステータス: UI モック（Storybook）完了。API / 管理画面 / インフラ設計は 管理画面計画 で確定

  • 追記: 機能名は logs から moments に改名決定（logs はシステムログと誤読されやすいため。タブ / ルート / API / DB / コンポーネント名まで一新）。本文の logs / LogCard / LogFeed 表記は起票時点の名称で、コードのリネームは実装フェーズ 4 で行う

起票理由

従来の posts（記事）とは別に、log という軽量な投稿の概念を作る。Web アプリのタブ（posts / logs / about）で切り替えられる新しいセクション。

  • 180 文字以内の一文 + 画像必須（posts と逆で、写真が主役）

  • 一覧はページネーションではなく無限スクロール

  • 投稿は公開 UI からではなく、別途作る管理画面（admin.shuntaka.dev）から行う

  • モバイルで撮った写真を圧縮してアップロードし、閲覧できるところまでが最終ゴール

UI モック（Storybook）

apps/web に閲覧側のコンポーネントを追加した。bun run storybook の Components/LogCard / Components/LogFeed で確認できる。

コンセプトは「壁に貼られた写真」。ポラロイド風フレーム（下帯に日付）の写真が 2 度前後の傾きを偶奇で交互につけて並び、右に一文を添える。写真は留め具で壁に留められている。

コンポーネント

内容

LogCard

左に留め具付きポラロイド風写真、右に一文。hover で留め具を支点に減衰振り子でふわっと揺れる（prefers-reduced-motion では無効）

留め具

fastener: clip（木製洗濯バサミ、デフォルト） / tape（マスキングテープ）。fastenerColor（pink / blue / yellow / green）は tape で有効。投稿ごとに管理画面で選ぶ想定。丸画鋲案は「実物感が出ない」、台形シルエットの短躯クリップ案も「実物と形が違う」ため廃案。実物写真を参照した縦長の直線シルエット + 明るい松系の木肌 + 右にループが垂れる金属バネに再設計

LogFeed

IntersectionObserver の番兵による無限スクロール。読み込み中はポラロイド形のスケルトン、末尾到達で ochaIcon が静かに締める。role="feed" / aria-busy 付き

Story

LogCard/FastenerVariants（留め具比較）、LogCard/TapeColors（テープ色）、LogFeed/LogsPage（posts / logs / about タブ込みのページ全体）、LogCard/MaxLength（上限ちょうど 180 文字）

モック写真は Unsplash（square crop URL）を使用。当初 picsum.photos を使ったが、Chrome から fastly CDN への接続が不安定で白画像になったため差し替えた。

デザインシステムとの差分（意図的な例外。本実装時に DESIGN.md へ明記する）:

  • hover の「1 プロパティ 1 段階」ルールから外れ、留め具を支点にした揺れアニメーションを許容（logs は写真が主役の情緒的なサーフェスとして）

  • 留め具は「現実にある物の描写」としてグラデーション・落ち影・多色（木肌 + 金属バネ等）を許容。UI サーフェスのグラデ禁止 / 静止カード影禁止は従来どおり

  • カード自体はフラット（影は hover 時の --shadow-2 のみ）。アクセント色は未使用

システム構成

当初は「UI = Cloudflare Workers、画像 = R2、API = 共用 api.shuntaka.dev」を検討したが、Workers custom domain に DNS ゾーン移管が必要なため 廃案。CloudFront ベースのオール AWS 構成（admin.shuntaka.dev = CloudFront + S3 + API Gateway/Lambda、画像配信 = images.shuntaka.dev、認証 = Cognito SRP、ORM = Kysely）に決定した。詳細は logs 管理画面のアーキテクチャ決定と実装計画 を参照。

未決事項

  • 留め具のデフォルト / 最終ラインナップ（現状 clip / tape の 2 種 + テープ 4 色。Storybook の FastenerVariants で比較中）

  • タブ追加時の BaseLayout 拡張（currentTab union に 'logs' を追加）と /logs ルート（実装フェーズは管理画面計画のフェーズ 4）