プレミアムUI/UXデザイン は何をしますか？
謝辞：Peter Bamuhigire (techguypeter.com, +256 784 464178) より共有。
承認されたウェブサイト戦略とユーザー体験証拠を、差別化された実装可能なプレミアムUXの方向性に変換します。
使用するケース
- リード獲得、Eコマース、高額商品、または公的証明が必要なウェブサイトにプレミアムUXゲートが必要な場合
- ビジュアルディレクションを実装の制約に結びつける必要がある場合
使用しないケース
- 一般的なビジュアルドクトリンの場合（
chwezi-design-engineに属する） - デザインシステムが所有するトークン実装の場合
必要な入力
| 成果物 | ソースまたは提供者 | 必須？ | 目的 | 欠如した場合 |
|---|---|---|---|---|
| 承認された戦略、体験マップ、コンテンツ階層、ブランド証拠、参照分析、技術的制約 | 上流のウェブサイトスキルと外部設計ドクトリン | はい | 実装可能な体験の方向性を定義する | 戦略またはコンテンツ階層がない場合は停止する |
ワークフロー
- 外部設計ドクトリンを読み込み、上流の戦略を検証する
- 階層、インタラクション、タイポグラフィの方向性、状態、レスポンシブ動作を選択する
- 差別性、アクセシビリティ、多言語対応の成長性、低帯域幅制約をテストする
- 禁止されたデフォルトまたはサポートされていないパターンで停止し、方向性を修正した後、デザインシステムとページビルダーに決定を引き渡す
出力
| 成果物 | 消費者 | 受け入れ条件 |
|---|---|---|
| プレミアムUXの方向性と実装ブリーフ | デザインシステムとページビルダー | タイプの根拠、階層、コンポーネント、状態、ブレークポイント、モーションの制限、品質リスクを命名する |
生成される証拠
| 証拠 | 消費者 | 受け入れ条件 |
|---|---|---|
| 決定とレビューの記録 | デザインおよびリリース責任者 | 各主要なビジュアル選択をブランド、動作、アクセシビリティ、またはパフォーマンスの証拠にリンクする |
機能契約
読み取り、検索、および視覚的検査が必要です。計画はデフォルトで読み取り専用です。設計成果物またはコードの編集には実装権限が必要です。アセットライセンス、外部公開、支出、およびプロダクションの変更には明示的な権限が必要です。
縮退モード
レンダリング、フォント、アセット、または外部ドクトリンがない場合は、最も狭い適格な方向性を返し、視覚チェックを「未評価」とマークし、プレミアム品質を認定しません。
意思決定ルール
| 選択肢 | アクション | 回避される失敗またはリスク |
|---|---|---|
| ブランドとコンテンツが特徴的な表示書体を正当化する | パフォーマンスフォールバック付きで指定する | 汎用的なAIデフォルトのタイポグラフィ |
| インタラクションがタスク価値を追加しない、または3G使用を損なう | 削除または簡略化する | 装飾的な摩擦 |
品質基準
- ビジュアルプロダクションの前に選択した書体とその理由を記載する。エラー、空、ローディング、フォーカス、無効状態を網羅する。アクセシビリティとアフリカのパフォーマンス制約を満たす。
アンチパターン
- プライマリ書体としてInterまたはベアシステムスタックを選択する。修正：ブランドに適合した許可された書体を選択し、理由を文書化する。
- プレミアムの略語としてパープルグラデーションを使用する。修正：ブランド証拠から色とコントラストを導出する。
- ホームページのみをデザインする。修正：すべてのテンプレートファミリーに共通のパターンを定義する。
- 非ハッピー状態を無視する。修正：エラー、空、ローディング、フォーカス、無効状態の動作を指定する。
- レンダリングなしで品質を認定する。修正：視覚評価を「未評価」とマークし、視覚QAを要求する。
動作例
カンパラのコンサルティング会社向けに、その権威ポジショニングに支えられたライセンスされたエディトリアルセリフを選択し、モバイルユーティリティ用のコンパクトサンセリフと組み合わせ、ハンドオフ前に3Gフォント予算で両方をテストする。
参照
-
ux-strategy-differentiation-and-meaning.md — UX戦略、差別化、および未テストローンチ禁止の証拠ルールを組み立てる際に読む。
-
lean-design-cycle-and-deliverable-selection.md — リーンデザインサイクルと適切な成果物を選択する際に読む。
-
enterprise-internal-tools-and-portal-ux.md — 内部ツールまたはクライアントポータルをデザインする際に読む。
-
ai-feature-discovery-and-risk-framing.md — AI機能を追加するかどうか、およびその方法を決定する際に読む。
-
ai-interface-trust-and-control-spec.md — AIインターフェースの信頼、制御、修正を指定する際に読む。
-
ux-discovery-and-wireframe-procedure.md — UXディスカバリー、ジャーニーグリッド、サイトマップ、ワイヤーフレームを実行する際に読む。
保存されたドメイン使用ガイダンス
- ウェブサイトは、高額商品の価格、信頼、または真剣な商業的注目を正当化するために十分にプレミアムに見える必要があります。
- リード獲得、Eコマース、製品、ポートフォリオ、SaaSマーケティング、ホスピタリティ、教育、ヘルスケア、非営利、またはエンタープライズのウェブサイトを構築する。
- サイトが汎用的、テンプレート的、過度に装飾的、遅い、スキャンしにくい、または視覚的に安っぽく見えるリスクがある。
- ウェブサイトは、所有者の提供価値をより高く感じさせると同時に、開発者のプレミアム技術の証明としても機能する必要があります。
保存されたドメイン入力
- ウェブサイト戦略ブリーフ、ターゲットオーディエンス、提供価値、ブランドポジション、コンテンツインベントリ、写真/アセット、コンバージョン目標。
- 現在のデザインシステム、スクリーンショット、競合ベンチマーク、パフォーマンス/アクセシビリティ制約。
保存されたドメインワークフロー
- ウェブサイトのビジネスジョブを定義する：信頼、コンバージョン、販売サポート、アプリケーション、予約、寄付、製品教育、または権威。
- バイヤーと提供価値に合ったビジュアルボイスを選ぶ：運用、エディトリアル、ラグジュアリーミニマル、コンシューマーポリッシュ、インスティテューショナル、またはローカルプレミアム。
- ブリーフがスタイリング開始前にプレミアムポジショニング、コンテンツ、SEO、スタック、またはエージェンシープルーフを必要とする場合、
premium-website-productを読み込む。 - セクションのスタイリング前にコンバージョンパスから階層を構築する。
- プレミアムプレイブックを使用してデザインシステムを作成する：ビジュアル原則、色、タイプ、スペーシング、イメージ、モーション、チャート/テーブル、プロダクションポリッシュ。
- ページプロダクション前とビジュアルQA後の両方でプレミアムウェブサイトゲートを適用する。
- プロジェクトスコアカードとデザイン品質レポートに証拠を記録する。
保存されたドメイン品質ガイダンス
- 最初のビューポートは、ブランド/カテゴリ、提供価値、信頼性、プライマリアクションを即座に伝える。
- レイアウトはレスポンシブで、高速で、アクセシブルで、プライマリテンプレート間で視覚的に一貫している。
- イメージは、可能な限り実際の製品、場所、人物、証明、インターフェース、または結果を示す。
- 色、タイポグラフィ、スペーシング、モーションはトークン化され、商業的に適切である。
- フォーム、価格設定、サービスページ、製品ページ、お問い合わせフローは不安を軽減し、次のステップを明確にする。
- データ、 testimonial、ケーススタディ、統計、比較は、正確で読みやすい視覚的階層で提示される。
- シンプルさをプレミアムとして扱う：ナビゲーション、フォーム、コピーブロック、状態変更、モバイルフローは、必要な証明を隠すことなくバイヤーの労力を削減する。
- すべてのプライマリテンプレートは、プレミアムUI/UXゲートおよびデザイン品質スコアのルーブリックで少なくとも8/10を獲得する。
保存されたドメインアンチパターン
- 汎用的なAI出力のように感じられるランディングページ：曖昧なグラデーション、ブラー背景、装飾的なカードの山、弱いストック写真、裏付けのない主張。
- 提供価値を説明したり、ユーザーをビジネス成果に向かわせたりしない美しいページ。
- 単調なカラーパレット、窮屈なモバイルレイアウト、遅いヒーローメディア、アクセシブルでないオーバーレイ。
- 証明、明確さ、信頼が必要な場所での視覚的な斬新さの使用。
保存されたドメイン出力
- プレミアムウェブサイトUXブリーフ、ビジュアルディレクション、トークンプラン、ページレベルの品質ノート、コンバージョンパスガイダンス、またはゲートレポート。
保存されたドメイン参照
references/premium-website-ui-ux-playbook.md- 書籍から派生したウェブサイトデザインルール。references/enterprise-website-ux-playbook.md- エンタープライズウェブサイトのステークホルダー、証明、ナビゲーション、信頼、およびアフリカ調整済みUXルール。references/mobile-dashboard-website-patterns.md- モバイルナビゲーション、初回訪問ガイダンス、ダッシュボード/証明の提示、モバイル品質チェック。references/premium-website-gate.md- スコアリングとブロッキング欠陥。../premium-website-product/references/premium-website-market-asset-gate.md- ウェブサイトをプレミアム製品として扱う、コンテンツ、SEO、ローンチ、スタック、エージェンシープルーフゲート。references/source-register.md- 出典処分と権利ゲート。アクティブなソースパスは主張されない。
ワールドクラスのUX基盤（書籍由来）
プレミアムエンゲージメントを開始する前に必須の読書：
references/levy-four-tenets.md— 四つのテネットフレームワーク（ビジネス戦略+価値革新+検証済みユーザーリサーチ+キラーユーザーエクスペリエンスデザイン）。クライアントブリーフで拒否すべきトップ10のアンチパターン。references/enterprise-five-outcomes.md— 5つの必須アウトカム（有用/簡単/効率的/満足/アクセシブル）をローンチ前のゲートとして。1つでも「いいえ」ならローンチしない。references/pm-collaboration-rules.md— Fekeshazi 5+1（説明に5〜10分、デザインは継続的プロセスなど）と「重要な機能をメニューに隠さない」ルール。
ブリーフがLevyのトップ10チェックに失敗するか、5つのアウトカムのいずれかを省略した場合、スコーピング前に反論する。