nexu-io/web-design-guidelines

web-design-guidelines は何をしますか？

Vercel エンジニアリングチームによるWebデザインガイドラインと標準仕様。レイアウト、タイポグラフィ、カラー、モーション、アクセシビリティなど、プロダクトUIの設計を網羅しています。

レイアウト

• 一貫したグリッドシステム（例：12カラムグリッド）を使用します。
• コンテンツの階層を明確にするため、余白とパディングを適切に設定します。

タイポグラフィ

• システムフォントスタックを使用することを推奨します（例：-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif）。
• 見出し、本文、ラベルなどに適したフォントサイズとウェイトを定義します。

カラー

• プライマリ、セカンダリ、アクセント、ニュートラル、エラー、警告、成功の各カラーパレットを定義します。
• コントラスト比を確保し、アクセシビリティ（WCAG 2.1 AA以上）に準拠します。

モーション

• トランジションとアニメーションには標準的なイージング関数（例：cubic-bezier(0.4, 0, 0.2, 1)）を使用します。
• アニメーション時間は200msから500msを目安とします。

アクセシビリティ

• すべてのインタラクティブ要素に適切な aria-label または role 属性を設定します。
• キーボードナビゲーションをサポートし、フォーカスインジケータを明確に表示します。
• 視覚的な手がかりに依存せず、テキストやARIAラベルで情報を補足します。