Files
everything-claude-code/docs/ja-JP/rules/web/design-quality.md
Claude ec9ace9c54 docs: add native Japanese translation of ECC documentation (ja-JP)
Translate everything-claude-code repository to Japanese including:
- 17 root documentation files
- 60 agent documentation files
- 80 command documentation files
- 99 rule files across 18 language directories (common, angular, arkts, cpp, csharp, dart, fsharp, golang, java, kotlin, perl, php, python, ruby, rust, swift, typescript, web)
- 199 skill documentation files

Total: 455 files translated to Japanese with:
- Consistent terminology glossary applied throughout
- YAML field names preserved in English (name, description, etc.)
- Code blocks and examples untouched (comments translated)
- Markdown structure and relative links preserved
- Professional translation maintaining technical accuracy

This translation expands ECC accessibility to Japanese-speaking developers and teams.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-05-17 02:31:40 -04:00

3.6 KiB

このファイルは common/patterns.md を Web 固有のデザイン品質ガイダンスで拡張します。

Web デザイン品質基準

アンチテンプレートポリシー

汎用的なテンプレートに見える UI をリリースしない。フロントエンドの出力は意図的で、主張があり、プロダクトに固有であるべきである。

禁止パターン

  • 均一なスペーシングで階層のないデフォルトのカードグリッド
  • 中央揃えの見出し、グラデーションブロブ、汎用 CTA の定番ヒーローセクション
  • 完成したデザインとして出す未変更のライブラリデフォルト
  • レイヤリング、深度、モーションのないフラットレイアウト
  • すべてのコンポーネントで均一な角丸、スペーシング、シャドウ
  • 1つのアクセントカラーだけの安全なグレー・オン・ホワイトのスタイリング
  • サイドバー + カード + チャートで視点のないダッシュボード量産レイアウト
  • 意図的な理由なしに使用されるデフォルトフォントスタック

必要な品質

すべての意味のあるフロントエンドサーフェスは、以下のうち少なくとも4つを示すべきである:

  1. スケールコントラストによる明確な階層
  2. 均一なパディングではなく、スペーシングの意図的なリズム
  3. オーバーラップ、シャドウ、サーフェス、またはモーションによる深度やレイヤリング
  4. 個性と実際のペアリング戦略を持つタイポグラフィ
  5. 装飾的ではなく、セマンティックに使用される色
  6. デザインされたと感じるホバー、フォーカス、アクティブ状態
  7. 必要に応じたグリッドを打ち破るエディトリアルまたはベントーレイアウト
  8. ビジュアルの方向性に合ったテクスチャ、グレイン、または雰囲気
  9. 注意をそらすのではなく、フローを明確にするモーション
  10. 後付けではなく、デザインシステムの一部として扱われるデータビジュアライゼーション

フロントエンドコードを書く前に

  1. 具体的なスタイルの方向性を選ぶ。「クリーンミニマル」のような曖昧なデフォルトを避ける。
  2. パレットを意図的に定義する。
  3. タイポグラフィを意図的に選択する。
  4. 少なくとも少数の実際のリファレンスを集める。
  5. 関連する ECC のデザイン/フロントエンドスキルを使用する。

価値あるスタイルの方向性

  • エディトリアル / マガジン
  • ネオブルータリズム
  • 実際の深度を持つグラスモーフィズム
  • 規律あるコントラストのダークラグジュアリーまたはライトラグジュアリー
  • ベントーレイアウト
  • スクローリーテリング
  • 3D 統合
  • スイス / インターナショナル
  • レトロフューチャリズム

自動的にダークモードをデフォルトにしない。プロダクトが実際に求めるビジュアルの方向性を選択する。

コンポーネントチェックリスト

  • デフォルトの Tailwind や shadcn テンプレートに見えないか?
  • 意図的なホバー/フォーカス/アクティブ状態があるか?
  • 均一な強調ではなく階層を使用しているか?
  • 実際のプロダクトのスクリーンショットで信憑性があるか?
  • 両テーマをサポートする場合、ライトとダークの両方が意図的に感じられるか?