variant

バリアント

このスキルは、説明された 1 つの UI 要素から、意図的に異なる 3 つのバージョンを作成します。実際のページではピッカーの背後に配置されるため、切り替えて比較し、選択できます。

候補を作成しますが、順位は付けません。既存の UI をレビューするには interface-review と better-interface を、1 つのコンポーネントをストレステストするには break を、コンポーネントの状態を検討するには state-machine を使います。

色合いではなく、異なる答え

各バリアントは、このコレクションが担当する軸において、同じ依頼に対する異なる答えです。

軸	担当	変化する要素
構造	better-layout	グループ分け、順序、列数、折りたたむ要素
密度	better-layout	余白のスケール、表示できる情報量
強調	better-colors	塗りつぶし色を使う箇所、目立たせない要素
書体	better-typography	サイズの段階、太さのコントラスト、行長
文体	better-writing	ラベル、語調、コピーの量

主要な軸を 1 つ選び、各バリアントにその軸上で異なる位置を与えます。軸の名前がピッカーのグループ見出しになります。二次的な選択はその軸から導かれるものであり、独立して変化するものではありません。密度の高いバリアントで文字サイズを小さくする必要があっても、それは一貫性を保つためであり、2 つ目の軸ではありません。

すべてのバリアントが満たすべき最低条件

バリアントをピッカーに追加する前に、better-interface のエスカレーション条件を満たします。

• すべてのコントロールにアクセシブルな名前と、視認できるフォーカスインジケーターがある。
• ポインターで操作できるすべての要素に、キーボードでアクセスできる。
• モーションや自動再生コンテンツが prefers-reduced-motion を尊重する。
• 幅 320px またはズーム率 200% で、切り取り、重なり、アクセス不能が発生しない。
• 本文とコントロールのテキストが、必要なコントラスト比を満たす。
• 状態や意味を色だけに依存させず、状態変化をモーションだけに依存させない。
• 破壊的な操作には、確認、取り消し、または明確に異なる表示のいずれかがある。
• 省略されたコンテンツに、全文を確認する方法がある。
• スクロール領域の端や、表示を示す手がかりがない開示要素の背後に、コンテンツが隠れない。
• すべてのエラーに、復旧方法が示されている。
• 破壊的でない操作に危険色を使うなど、意味に反するセマンティックカラーを使わない。

この最低条件はすべてのバリアントで同じです。これは軸ではなく、他の要素と引き換えにしてはなりません。この条件を破らなければ実現できない方向性は、その旨を述べて採用しないでください。

1. 対象を 1 つに絞る

1 回につき UI 要素は 1 つです。「ダッシュボード」は 1 つの要素ではありません。指標カードが 1 つの要素です。依頼が複数の要素にまたがる場合は、候補を列挙し、どれを検討するか尋ねてください。

依頼の内容を 1 文で言い換えます。対象が何か、どこに表示されるか、何をする必要があるかを明確にします。

2. 前提を把握する

バリアントは明日にもリリースできるような見た目である必要があるため、土台となるものを確認します。

• スタイルシステム、コンポーネントライブラリ、モーションライブラリがあればその内容。
• トークン：色、余白、角丸、文字サイズのスケール、イージング。
• プロダクトの情報密度と文体。情報量の多いプロ向けツールでは、最も大胆なバリアントにも許容範囲があります。
• 対象が表示される場所：どの背景に対して、どの隣接要素の横に、どの画面幅で表示されるか。

参照できるプロジェクトがない場合は、ニュートラルなグレー、アクセントカラー 1 色、システムフォントスタックを使い、そのように実装したと伝えてください。

3. コードを書く前に軸を決める

標準は 3 つのバリアントです。依頼された場合に限り、5 つにします。

まずセットを書き出し、それぞれに名前と軸上の位置を付けます。名前は方向性を表すものにします。Option A ではなく、Quiet、Editorial、Dense のようにします。

どの 2 つのバリアントも同じ位置を共有せず、それぞれの軸をひと言で説明できれば、この手順は完了です。

4. 実際のページに組み込む

実際にその要素を配置するページで、実際の画面構成や周囲の要素、現実的なデータとともにバリエーションを表示します。

?__variant=quiet のような URL 検索パラメーターで選択できるようにします。各バリエーションをリンクとして共有できます。その要素の横にグループ分けしたリストを置いて切り替えます。横に置くスペースがない場合は、同じグループ分けを使ったセレクトとして上に配置します。仕様は picker.md を参照してください。

一度に表示するバリエーションは1つにして、実際のサイズで表示します。サムネイルでは余白や縮尺が崩れますが、通常、選択の決め手となるのは余白です。

バリエーションのファイルから、本番用のコンポーネントをインポートしてもかまいません。バリエーションをインポートするのはホスティングページだけにし、ハーネスからほかのファイルをインポートしないでください。

表示先となるページがない場合は、自己完結型の HTML ファイルを1つ作成し、同じピッカーを使用します。

各バリエーションには現実的なコンテンツを使います。製品に合った文言、もっともらしい名前、実際のページに表示される項目数を用意してください。Lorem ipsum と3行だけでは、どんな構成もよく見えてしまいます。

5. トレードオフを示し、そこで止める

手元にあるブラウザーでページを一度読み込み、すべてのバリエーションを切り替えて確認します。それぞれが正しく表示され、各インタラクションが反応し、コンソールに問題がないことを確認してください。使えるブラウザーがない場合は、その旨を伝え、確認用の URL をユーザーに渡します。

次に、決定をユーザーに委ねます。

バリエーション	軸上の位置	適している場合	コスト
Quiet	視覚的な重みが最も小さい	ページを毎日使う場合	印象に残りにくい
Editorial	文字が最も大きく、余白も最大	その瞬間を際立たせたい場合	縦のスペースを大きく使う

ピッカーがどこで動作しているか、どのキーで切り替えるか、どの幅で評価したかを伝えます。375px と 1440px では答えが変わることがあります。

表でお気に入りを示すことは決してしないでください。直接尋ねられた場合は、どれを作るのが楽しかったかではなく、その要素がどれくらいの頻度で目にされるか、製品の個性に合っているかをもとに答えます。

6. 1つを採用し、残りを削除する

選択されたら、そのバリエーションが本来あるべき場所で、プロジェクト独自の規約に沿って適切に実装します。その後、ほかのバリエーション、ピッカー、ホスティングページにあるバリエーションのインポートを削除します。バリエーション名と __variant パラメーターを検索し、差分にハーネスの痕跡が残っていないことを確認します。

代わりにもう一度試すよう求められた場合は、ハーネスを残し、コードを書く前に軸を決めるをもう一度実施して、傾いた方向の周辺に新たな位置を設定します。

終了前の確認

ミス	修正
バリエーションの違いがアクセントカラーや文言だけ	主要な軸上で異なる位置に移すか、そのバリエーションを削除します
すべての軸を一度に変えている	変える軸は1つにし、それ以外はその軸に合わせます
空のルートで評価している	要素を配置するページで表示します
Lorem ipsum、3行、「Jane Doe」を使っている	実際の文言と、ページに表示される実際の項目数を使います
最も大胆なバリエーションでキーボード操作やフォーカスが抜けている	条件を満たすか、その方向性を取り下げます
表でお気に入りを示している	各バリエーションのコストを示し、ユーザーに選んでもらいます
ピッカーをプロジェクトのトークンでスタイル設定している	デザインシステムの外にあることが明確にわかる状態を保ちます
バリエーションごとのタブが横一列に並んでいる	要素の横には独立してスクロールするグループ分けされたリストを置き、収まらない場合は上にセレクトを置きます
採用後もハーネスが残っている	ハーネスを削除し、名前とパラメーターを検索します