CATEGORIES · 02 / 05
Design
タイポグラフィ、グリッド、色、余白。誌面という装置をつくる手仕事。（28 本）
予定を埋める器から実行の記録へ — 月カレンダーUIを設計し直す判断軸
マンスリーカレンダーを未来の予定を埋める器ではなく、過去の実行を記録する地図として設計し直すと、UI の判断軸が変わります。完了・途中・未着手の状態を色とドットで符号化しつつ詰め込みすぎない設計、空セルを失敗ではなく記録として扱う考え方、月全体の読みやすさと 1 日の情報量の両立を、iOS アプリ Calendar ToDo v2.2.0 の設計記録を起点に整理します。
backdrop-filter では作れない「屈折するガラス」— iOS 26 Liquid Glass を Web で再現する判断軸
iOS 26 の Liquid Glass がガラスに見えるのは、半透明やぼかしではなく背景がレンズのように歪む屈折のためです。CSS の backdrop-filter は仕様上この屈折を作れません。WebGL シェーダーで屈折をどう実装するか、そして設計者として「いつ CSS をやめてシェーダーに切り替えるか」の判断軸を整理します。
AI の UI を「それっぽい」で止めない — DESIGN.md に値ではなく役割を書く
AI コーディングエージェントが吐く UI が「いかにも生成」に見えるのは、色や余白の値だけを渡して役割と理由を渡していないからです。DESIGN.md に値・役割・避けるべきパターンを先に固定してエージェントに参照させ、設計の一貫性を保つ運用を、AetherEchoes のトークン実例とともにまとめます。
ツールチップを JS なしで置く — Popover API と CSS Anchor Positioning の導入判断
ツールチップやポップオーバーの位置決めを、floating-ui のような JS ライブラリから Popover API と CSS Anchor Positioning へ移す導入判断を、運用者目線で書きます。2026 年のブラウザ対応の現実、最小コード、何を捨て何を得たかまで具体的に整理します。
scroll-margin と scroll-padding の使い分け — 固定ヘッダーでアンカー先が隠れる問題を設計する
ページ内アンカーに飛ぶと、見出しが固定ヘッダーの裏に潜って読めない。この古典的な問題を、要素側に効く scroll-margin とコンテナ側に効く scroll-padding の責務の違いから整理し、どちらを第一選択にすべきかを運用者目線で決めます。
ピクセルパーフェクトを「意図の一致」として捉え直す — 実装ズレを減らす判断軸
ピクセルパーフェクトの本質は 1px の座標合わせではなく、余白・階層・リズムというデザインの意図を実装へ移すことです。カンプ幅と全幅の違い、何を死守し何を妥協するかの線引きを、間隔・タイポ・グリッドの観点で具体化します。
コントラスト検証を「要素×状態×テーマ」で総当たりする — axe-core の穴を埋める
axe-core を CI に入れていても、hover やダークテーマに切り替えた瞬間のコントラスト事故は漏れます。要素×状態×テーマを総当たりするブラウザ JS 監査手法を、OKLCH トークン + light/dark 運用の視点で読み解きます。静的 CSS 差分・実効背景色の合成・WCAG 比の計算と、その限界までまとめます。
CSS マスク 3 種の使い分け — alpha / luminance / vector
CSS のマスクは alpha / luminance / vector の 3 種に分かれます。透明度・明度・形のどれで下のレイヤーを抜くかという違いと、向き不向き・実装の落とし穴を、Figma の 3 マスクとの対応もふまえて実務目線で整理します。
Tailwind ユーティリティクラスは実 CSS のどこに落ちるか — 命名から読む utility-first
Tailwind のユーティリティクラスは text-sm や px-4 のように CSS プロパティと値の 1:1 マッピングですが、デザインシステムの「役割」までは届きません。AetherEchoes の paper/ink/cat-* 4 階層と、Tailwind v4 の @theme で utility と token を合流させた実装の観点で整理します。
OKLCH 色空間でデザイナーが実務で詰まる 3 点
Tailwind v4 でデフォルト化された OKLCH カラー。グラデーションの色かぶり、中間色のくすみ、ブランド色の置き換えの 3 つで、私が実装側として詰まったポイントと運用を整理します。