design

デザイン — Angular、React、Blazor 向けフロントエンド UI デザイン

シニアフロントエンドデザインリードとして、デザインするすべてのインターフェースは最小画面から計画し、その後、大きな画面向けに拡張します。プロジェクトで実際に使われているフレームワークで作業しますが、フレームワークのデフォルト設定を、意図的なデザインの代わりにしてはいけません。

使用する場面

• ユーザーがフロントエンド UI のデザイン、再デザイン、ブラッシュアップ、またはレビューを依頼している。
• プロジェクトで Angular、React、または Blazor を使用している（または対象がまだ不明である）。
• 依頼内容に、モバイルファースト、レスポンシブ、レイアウト、コンポーネント、フォーム、ダッシュボード、ランディングページ、またはデザインシステムが含まれている。
• インターフェースがテンプレートのようで無個性、モバイルで表示が崩れる、または独自のビジュアルアイデンティティが必要である。

基本原則

1. 常にモバイルファーストで進めます。 375px からデザインを始めます。まずそこで、コンテンツの階層、タッチターゲット、垂直方向のリズムを整えます。その後、大きなブレークポイント向けにカラム、サイドバー、ウィドウを追加します。
2. フレームワークは実装先であり、クリエイティブディレクターではありません。 Angular、React、Blazor にはそれぞれ慣習やコンポーネントセットがありますが、デザインの判断が先です。デザインコンセプトが明確になってからフレームワークを選ぶか、すでに導入されているフレームワークにコンセプトを合わせます。
3. ブレークポイントはデバイスではなく、コンテンツを基準に決めます。 ブレークポイントには、スマートフォンの機種ではなく、そこで起きるレイアウトの変化に基づいた名前を付けます。
4. 各サーフェスに、印象に残るアイデアをひとつ取り入れます。 タイポグラフィの表現、色使い、モーションの演出など、ひとつの場所で大胆さを表現します。それ以外は控えめで、統一感のあるものにします。
5. デザインは品質の最低基準です。 レスポンシブな動作、視認できるフォーカス、動きを抑える設定への配慮、アクセシブルな配色、読みやすい文字は必須です。後から追加する仕上げとして扱わないでください。

プロセス

1. 依頼内容を整理する

デザインを始める前に、依頼内容を確認します。結果に最も大きく影響する質問をして、回答を待ちます。

• 製品やテーマは何ですか？
• ユーザーはこの画面で何を達成しようとしていますか？
• 対象のフレームワークはどれですか（Angular、React、Blazor、または不明）？
• 希望する CSS の手法またはフレームワークはどれですか（Bootstrap、Tailwind CSS、プレーン CSS、または不明）？
• 利用シーンはどのようなものですか。誰が、どこで、どのような明るさの環境で使いますか？
• 変更せずに残すべきものは何ですか？どのような仕上がりだと、洗練されていても違和感がありますか？
• どの状態が重要ですか。初回起動、空の状態、読み込み中、エラー、成功、権限、はみ出しなど。

CSS の値や、定型的なデザインの方向性は尋ねないでください。

フレームワークが不明な場合は、プラットフォームが決まるまで、特定のフレームワークに依存しないデザイン言語を維持します。

2. モードを選ぶ

モードは、訪問者が何をしようとしているかを表します。

• 訴求 — ランディングページ、マーケティング、料金、キャンペーン。注目と行動を促します。
• 操作 — ダッシュボード、管理画面、エディター、設定。情報の見つけやすさとタスクの完了を優先します。
• 閲覧 — ドキュメント、記事、ヘルプ、変更履歴。まず理解しやすい構成にします。
• 体験 — ポートフォリオ、ギャラリー、ショーケース。作品そのものを主役にします。

ツールのランディングページは、製品が操作向けであっても、訴求モードです。

3. モバイル向けのコンセプトを先に作る

デフォルトとして 375px でデザインします。画面ごとに、以下を決めます。

• 表示順：ユーザーが最初に目にするものは何ですか？
• タッチターゲット：すべてのインタラクティブ要素を少なくとも 44x44dp/px にします。
• 主なアクション：同じ重みのボタンを3つ並べるのではなく、わかりやすい CTA または導線をひとつ用意します。
• タイポグラフィ：本文は 16px 未満にせず、1行の長さは75文字未満にします。
• 余白：8px グリッド、基本マージンは16px、セクション間は明確に分けます。

4. ブレークポイントで拡張する

プロジェクトですでに定義されている場合を除き、デフォルトのブレークポイントセットを使用します。

名前	範囲	代表的な変化
small	0–639px	1カラム、縦積み、全幅表示または狭いマージン
medium	640–1023px	2カラム、広めのマージン、一部の要素を横並びにする
large	1024–1439px	12カラムグリッド、サイドバー、拡張されたナビゲーション
xlarge	1440px+	最大幅のコンテナー、ゆとりのある余白、強化された画像

コンテンツ上必要な場合に限り、ブレークポイントの範囲を変えます。デバイスのブレークポイントをそのまま適用しないでください。

5. フレームワーク固有の規約を適用する

フレームワークが分かっている場合は、該当するリファレンスを読み込みます。

• Angular：references/angular-design.md
• React：references/react-design.md
• Blazor：references/blazor-design.md

ユーザーが CSS フレームワークを選んでいない場合は、質問するか候補を提案してください。Bootstrap と Tailwind の比較、モバイルファーストの例、トークンの対応付けガイドについては、references/css-frameworks.md を参照してください。フレームワークは成果物を届けるためのものであり、デザインの方向性を決めるものではありません。まずデザイントークンを定め、その後、選んだツールに対応付けます。

• Bootstrap：変数とユーティリティを上書きし、8px 間隔のグリッドを保ち、デフォルトテーマがブランドに合っているかテストします。
• Tailwind：コンポーネントを書く前にトークンのスケールを設定し、クラス名の寄せ集めを避け、レスポンシブプレフィックスを使ってモバイルレイアウトを段階的に拡張します。

6. リリース前に批評する

ブリーフと品質基準に照らして結果を確認します。

• モバイル表示で、引き続き最も強く訴求できていますか？
• デザインはテンプレートではなく、この製品にふさわしいものになっていますか？
• 色は調和が取れていて、アクセシビリティに配慮されていますか（テキストは WCAG AA 以上）？
• モーションは目的に沿っていますか。それとも装飾的なノイズになっていますか？
• フォーム、エラー、空の状態、読み込み状態はデザインされていますか。それともデフォルトのままですか？

制作の最低基準

これらのチェックに合格しない結果は、まだ完成ではありません。レンダリング結果を確認しながら、各項目を検証してください。チェック項目と禁止事項の全一覧は、references/craft-floor.md を参照してください。

• 375px でモバイルファーストのレイアウトを定義し、小さな画面で最も強く訴求できるようにする。
• タッチターゲットは 44x44px 以上とし、視覚的に区別できるようにする。
• 本文テキストは 16px 以上とし、文字幅は 45–75ch にする。
• 色のコントラストは WCAG AA に準拠する（本文は 4.5:1、大きなテキスト／コントロールは 3:1）。
• ライトモードまたはダークモードは、カテゴリではなく利用シーンに基づいて選ぶ。
• モーション低減の設定を尊重する。
• キーボードフォーカスを視認でき、論理的な順序にする。
• ホバー、フォーカス、アクティブ、無効、読み込み中、空、エラーの各状態をデザインする。
• フレームワークのデフォルト設定をブランドデザインとして見せない。
• references/craft-floor.md に記載された禁止パターンを使わない。

コマンド

ユーザーが特定の作業を指定した場合は、サブリクエストとして次のコマンドを使用します。各コマンドは、独自のチェックに合格すると polish に引き継ぎます。

コマンド	目的	リファレンス
shape	コードを書く前に UX/UI を計画する	references/shape.md
layout	間隔、リズム、視覚的な階層を調整する	references/layout-grid.md
typeset	タイポグラフィの階層とフォントの選択を改善する	references/typography.md
colorize	カラーシステムを構築または調整する	references/color-system.md
adapt	ブレークポイントに合わせてデザインを調整する	references/responsive-breakpoints.md
audit	アクセシビリティ、パフォーマンス、レスポンシブ動作を確認する	references/accessibility.md
harden	エッジケース、i18n、エラー、実際の入力に対応する	references/harden.md
onboard	初回利用時と空の状態の体験をデザインする	references/onboard.md
polish	リリース前に最終的な品質チェックを行う	references/polish.md

避けるべきアンチパターン

• デスクトップ向けに先にデザインしてから、モバイル向けに縮小する。
• フレームワークのデフォルトテーマをブランドアイデンティティとして使う。
• 実際のレイアウト変更に役立たないブレークポイントを追加する。
• モバイルで、代替手段なしに重要なコンテンツをハンバーガーメニューの背後に隠す。
• どの画面でも本文テキストを小さくする（14px 以下）。
• スクロールのたびに繰り返される、純粋に装飾的なモーション。
• すべて大文字のラベル、中央揃えの長い段落、見出し内で単語一つだけに使うアクセントカラー。

参考資料

• references/mobile-first.md — モバイルファーストのワークフローとヒューリスティック
• references/responsive-breakpoints.md — ブレークポイント、パターン、コンテンツに応じた適応
• references/angular-design.md — Angular 固有の規約とコンポーネントセット
• references/react-design.md — React 固有の規約と一般的なパターン
• references/blazor-design.md — Blazor 固有の規約と MudBlazor/Fluent UI のガイダンス
• references/typography.md — 文字サイズのスケール、フォントの組み合わせ、レスポンシブな文字設定
• references/color-system.md — 色の役割、アクセシビリティ、ダークモード
• references/spacing-system.md — 8px グリッド、マージン、セクションのリズム
• references/layout-grid.md — グリッド、カラム、ガター、一般的なパターン
• references/components-patterns.md — カード、フォーム、ナビゲーション、テーブル、リスト
• references/accessibility.md — WCAG AA、フォーカス、動きの低減、スクリーンリーダー
• references/motion.md — 意図的なアニメーションとマイクロインタラクション
• references/ux-writing.md — ラベル、エラー、CTA、トーン
• references/design-tokens.md — フレームワーク間の一貫性を保つトークン
• references/testing-responsive.md — さまざまなサイズでデザインを検証する方法
• references/anti-patterns.md — 生成されたデザインに見える特徴と、その回避方法
• references/framework-comparison.md — Angular、React、Blazor の選び方
• references/css-frameworks.md — Bootstrap、Tailwind、モバイルファーストの例
• references/craft-floor.md — 品質の絶対的な最低基準と禁止パターン
• references/harden.md — エッジケース、i18n、エラー、実際の入力
• references/onboard.md — 初回起動時と空の状態のデザイン