jmaxzh/sdlc-ui-design（UIデザイン）

UIデザイン

適用範囲

• デスクトップ、モバイル、Web向けの、依頼されたビジュアルインターフェースの設計、実装、修正、レビュー、最適化、または原則ガイダンスに適用します。バックエンドのみ、データベースのみ、その他ビジュアルインターフェース作業を含まないタスクは、このスキルの範囲外です。
• このスキルはSDLCワークフローとは独立して動作し、単独でインストールできます。情報構成、インタラクション動作、またはリカバリも含むタスクでは、該当する判断に対してsdlc-ux-designなどの利用可能なUXガイダンスを使用します。
• 原則ガイダンスのみが依頼された場合は、製品固有の設計、実装、または受け入れテストに踏み込まず、そのレベルで簡潔に回答します。
• レビューのみの依頼の場合は、新しい設計を作成したり実装を変更したりせずに、調査結果と推奨事項を報告します。
• 設計探索、提案、コンセプト比較、プロトタイプ検証は、スタンドアロンの設計アーティファクトのみを作成または変更します。実装が依頼に含まれる場合にのみ、プロダクションコードを変更します。
• 複合的な依頼の場合は、許可された実装に進む前に、設計を納品します。それぞれを個別に納品し評価します。プロトタイプ検証は実装の受け入れを確立しません。
• 実装の場合は、既存のプロジェクトチェックに従います。現在の環境が欠陥の再現をサポートしている場合は、その欠陥に焦点を当てた再チェックを使用します。その他の動作変更については、リスクと範囲に応じてチェックを選択します。このスキルを満たすためだけに、追加の検証環境をセットアップしたり、正式な検証レポートを作成したり、既存のチェックを複製したりしないでください。
• 実装結果については、実行したチェック、観察結果、未検証の範囲を報告します。ランタイムエビデンス、コードベースの推論、主観的判断を区別します。モデルの自己評価はユーザーによる受け入れではありません。

オンデマンドで参照

• 以下の共有原則に従い、実際のターゲットとシナリオに応じてプラットフォームリファレンスを参照します。
• デスクトップ：デスクトップ原則を参照。
• モバイル：モバイル原則を参照。
• Web：Web原則を参照。
• モバイルWebの場合は、モバイル原則とWeb原則の両方を参照します。その他の組み合わせの場合は、選択されたドキュメントの条件に従って追加のリファレンスを読み込みます。
• プラットフォームが指定されていない場合は、最初にタスクとプロジェクトのコンテキストから推測します。一般的なアドバイスの場合は、共有原則のみを使用します。具体的なタスクに必要なプラットフォームの決定がまだない場合にのみ、明確化を求めます。
• アダプテーションのコンテキストや制限については、ソースコンテキスト内のリンクされたエントリを参照し、必要に応じて原文を参照します。このスキルの英語の指示がローカルアダプテーションを定義します。参照によってアップストリームのワークフローやツールチェーンがインポートされることはありません。

設計の納品

このセクションは、変更の規模に関係なく、依頼されたビジュアル探索、提案、コンセプト比較、またはプロトタイプ検証に使用します。複合的なタスクでは、設計部分に適用されます。実装の納品と受け入れは、タスクおよび既存のプロジェクト要件に従います。

• UI設計提案は、最初に画像生成を通じて提示します。既存のインターフェーススクリーンショットを参照として使用できます。画像生成が利用できないか失敗した場合は、単一ページのHTMLアーティファクトとして提案を提示します。ソースコンテキスト.
• UI/UXデザインを組み合わせる場合は、UIデザイン画像とインタラクティブなUX HTMLプロトタイプを提供します。UIでHTMLフォールバックを使用する場合は、両方に1つのHTMLアーティファクトを使用します。
• HTMLアーティファクトの場合、デフォルトでインラインCSSとJavaScriptを使用して直接開けるようにします。ローカル状態と明確に識別された例示データを使用して、合意されたインタラクション範囲を示します。
• レンダリングされたデザインを、利用可能な場合は実際のコンテンツを使用して意図されたビューポートで検査します。それ以外の場合は、明確に識別された代表的なコンテンツを使用します。ソースコンテキスト.
• 画像、プレビュー、開けるファイルで納品をリードします。付随する散文は、開き方の説明、シミュレーション範囲、必要な制限事項に限定して簡潔に保ちます。

共有原則

原則の適用

• 依頼された作業、ターゲットプラットフォーム、シナリオに関連する原則を適用します。
• 推奨に影響を与える条件やトレードオフを説明します。特定のビジュアルスタイルを普遍的に規定しないでください。
• 数値要件や推奨事項を引用する前に、そのソース、単位、ターゲットプラットフォームへの適用可能性を確認します。

設計原則

• エントリポイントとアフォーダンス：主要なエントリポイントを視覚的に認識可能にします。コントロールの外観、ラベル、配置を使用して、その使用方法とアクションの意味を伝えます。ソースコンテキスト.
• 一貫性とスタイル：アイコン、コンポーネント、装飾を製品の目的と既存の設計慣行に合わせます。装飾を追加する場合でも、コンテンツが読みやすく、アクションが使用可能であることを保ちます。製品タイプ、対象ユーザー、使用コンテキスト、明示されたビジュアルプリファレンスに適合するビジュアルスタイルを選択します。ソースコンテキスト.
• ビジュアルデザインシステム：デフォルトで製品全体のビジュアルデザインルールを使用し、明示的なページレベルの例外がそれらのページで優先されます。再利用可能なデザイン値とパターンをセマンティックロールで整理し、繰り返しのニーズが確立されたら共有定義を抽出します。再利用するものを決定する際に、意図の違いを保持します。ソースコンテキスト.
• 美的方向性：ユーザーの明示的な美的選択がスキルのスタイル上の好みと矛盾する場合は、ユーザーの選択に従います。ソースコンテキスト.
• プレゼンテーションコンセプト：プレゼンテーションページのビジュアルコンセプトを、その主題に固有の特性に基づいて設定します。ソースコンテキスト.
• コンテンツフィット：実際のコンテンツの形式、長さ、量に対応できるレイアウトを選択します。構造が必要なコンテンツを保持できない場合は、事実と必要な情報を保持しながら構造を適応させます。ソースコンテキスト.
• 利用可能なメディア：ビジュアルアプローチがメディアに依存する場合は、存在するか実際に入手可能なアセットに基づいて決定します。必要なアセットが利用できない場合は、実現可能な構成を選択します。ソースコンテキスト.
• タイポグラフィ：読み取り条件に合わせてフォント、サイズ、行間を選択します。サイズと太さで階層を確立します。ボディテキストと補助テキストは、拡大時にも必要なコンテンツやコントロールをクリップや非表示にすることなく読み取り可能にします。
• 対象言語：製品がサポートする言語と書記体系に対して、テキスト拡張、読み方向、スクリプト固有のシェーピングをタイポグラフィとレイアウトで考慮します。ソースコンテキスト.
• レイアウトとスペーシング：位置とグループ化を使用して、重要度と関係性を表現します。整列とスペーシングを一貫して適用します。密度を読み取り、比較、操作のニーズに合わせます。競合する強調を避けます。インターフェースまたはコンテナに利用可能なスペースに基づいてレイアウト構造を選択します。そのスペースが変更された場合は、主要なコンテンツとアクションにアクセス可能な状態を保ちながら、必要に応じてコンテンツを再編成します。ソースコンテキスト.
• カラー、ステート、フォーカス：プライマリ、サポート、ステータスの色を定義し、一貫して使用します。テキスト、コントロール、ステートに適切なコントラストを確保します。色が情報を伝える場合は、テキストまたは形状で補足します。コントロールのステートとフォーカスを視覚的に識別可能にします。製品がサポートする各外観について、テキストとコントロールの読みやすさとステートの区別を検証します。ターゲットプラットフォームがハイコントラスト設定を公開している場合は、レンダリングされたインターフェースでそれを尊重します。ソースコンテキスト.
• インタラクションターゲット：マウス、タッチ、またはその他の入力方式に合わせてターゲットのサイズとスペースを設定し、偶発的な隣接アクティベーションなしで簡単に選択できるようにします。
• データエンコーディング：データをグラフィカルに提示する場合は、ユーザーが理解する必要のある関係に適したビジュアルエンコーディングを選択します。該当する単位とスケールを明確にします。ソースコンテキスト.
• モーションの目的：タスク指向および読み取りサーフェスでは、フィードバック、状態変更、または連続性のためにモーションを使用します。モーションが変更を説明する場合は、その原因と結果を理解可能にします。説得または体験的なサーフェスでは、モーションはそれ自体で明確な表現目的を果たすことがあります。ユーザーがターゲット環境でサポートされる動きを減らす設定を有効にしている場合は、それを尊重します。モーションを減らしたり置き換えたりする場合は、コンテンツの読みやすさと必要な状態変更の理解可能性を維持します。必須ではないモーションは入力をブロックしてはなりません。切り替えまたはキャンセルをサポートするインタラクションでは、そのアニメーションを中断可能にし、最新のインタラクション状態に移行します。アニメーションを中断しても、それ自体でバックグラウンド操作がキャンセルされるわけではありません。ソースコンテキスト.