name: detail-design
description: detail.design のUIディテール集を活用して、プロダクトの品質を上げる。実装前のチェックリスト、UI改善アイデア出し、記事ネタ探しに使う。「UI改善」「ディテール確認」「detail.design」「プロダクト磨き」などの作業に使う。
Detail Design — UIディテールリファレンス
サイト: https://detail.design/
キュレーター: @renedotwang
コンセプト: "A collection of small details that make big difference"
（大きな違いを生む小さなディテールのコレクション）
🎯 このスキルの用途
- プロダクト実装前のチェック — UI/UXの細部を確認
- 既存プロダクトの改善 — ディテールを追加して品質向上
- 記事ネタ探し — AI Solo Craft / Essential Navigator のネタとして
- 学習・インスピレーション — 世界のベストプラクティスを吸収
📚 カテゴリ別ディテール一覧
Motion（アニメーション・動き）
| テクニック | 内容 | 活用シーン |
|---|
| Shake Disabled Button | 無効ボタンクリック時に揺らす | フォームバリデーション |
| Closing Modal Respects Physics | モーダル閉じる時にスクロール位置を物理的に追従 | モーダルUI |
| ASCII loaders | ASCIIアートのローダー | ターミナル風UI |
| Smooth Number Counter | 数字のスムーズなカウントアップ | ダッシュボード |
| Magnetic Button | カーソルに引き寄せられるボタン | CTA強調 |
Accessibility（アクセシビリティ）
| テクニック | 内容 | 活用シーン |
|---|
| Larger Hit Area than It Appears | 見た目より大きなタップ領域 | モバイルUI全般 |
| Focus Visible Only on Keyboard | キーボード操作時のみフォーカスリング表示 | フォーム |
| Skip to Content Link | コンテンツへスキップリンク | サイト全体 |
Optimization（パフォーマンス最適化）
| テクニック | 内容 | 活用シーン |
|---|
| Prevent Layout Shift from Font Weight Change | フォント太さ変更時のレイアウトシフト防止 | ホバー効果 |
| Avoid Using webp for OG image | OG画像にWebPを使わない（SNS互換性） | SEO/SNS |
| Skeleton Loading | スケルトンローダー | データ読み込み |
| Optimistic Updates | 楽観的UI更新 | インタラクション |
Design（ビジュアルデザイン）
| テクニック | 内容 | 活用シーン |
|---|
| Outer and Inner Border Radius | 外側と内側のborder-radiusの関係 | カード/ボタン |
| Photo Response to Theme Mode | ダーク/ライトモードで写真も対応 | 画像表示 |
| Drop the WWW prefix | wwwプレフィックスを省く | ブランディング |
| Consistent Icon Stroke Width | アイコンの線幅を統一 | アイコンセット |
Easter Egg（隠し機能・遊び心）
| テクニック | 内容 | 活用シーン |
|---|
| Cast Ending | ランディングを99→100にする仕上げ | 遊び心 |
| Konami Code | コナミコマンドで隠し機能 | ファンサービス |
✅ 実装チェックリスト
モバイル対応
アニメーション
パフォーマンス
ビジュアル
🔧 活用ワークフロー
プロダクト開発時
1. 実装前に detail.design をブラウズ
2. 該当カテゴリのテクニックを確認
3. チェックリストで適用可能なものを特定
4. 実装に組み込み
記事作成時（AI Solo Craft / Essential Navigator）
1. detail.design で新しいテクニックを探す
2. 日本語で解説記事を作成
3. 実装例・コードサンプルを追加
4. 個人開発者向けの活用法を提案
UI改善時
1. 現状のUIを分析
2. detail.design のテクニックでギャップを特定
3. 優先度付け（影響大 & 実装コスト低を優先）
4. 段階的に適用
🔗 関連スキル
- ui-design-principles — CSS/サイトレベルのUI設計方針
- asb-content-design — AI Solo Craft記事の読者体験設計
- web-design-guidelines — Web Interface Guidelines準拠チェック
📝 メモ
- サイトは定期的に更新される — 新しいテクニックをチェック
- 各テクニックには動画/GIFがあり視覚的に学べる
- 実装難易度は低〜中程度のものが多い
最終更新: 2026-02-20（けいた指示で作成）
⚠️ よくある落とし穴
- ディテールの過剰適用: 全テクニックを1つのプロダクトに詰め込むと逆にUXが悪化する。影響度が大きく実装コストが低いものから優先的に適用する
- OG画像にWebPを使う: SNS（Twitter/Facebook等）のクローラーがWebPに対応していない場合がある。OG画像は必ずPNG/JPEGを使用する
- タップ領域の見た目だけ確認: 見た目のボタンサイズが十分でも、実際のタップ領域（hit area）が44x44px未満だとモバイルで操作しにくい。CSSの padding や疑似要素で hit area を拡大すること
- 入れ子要素の border-radius 不一致: カード内のボタンや画像の border-radius は、外側の border-radius から padding を引いた値にする。外側と内側が同じ値だと視覚的に不自然になる