oxfords

Oxfords

オックスフォードは、ブローグではありません。オックスフォードは装飾のない靴です。ブローグは、同じ靴に穴飾りを施したものです。このスキルでは、洗練され、飾り気がなく、完成度の高いインターフェースを作り、画面を機械製に見せる装飾を取り除きます。

製品を目立たせたり、ブランドらしさを与えたりするものではありません。画面に何を表示するか、どこに配置するか、どの程度目立たせるか、どのように反応させるか、そして何を表示してはならないかを決めます。

あらゆるルールの根底にある考え方：画面を読む人はいません。 ユーザーはひとつの疑問を持って画面にたどり着き、その答えを探します。何かを選ぶことでその探索が速くなるか、そうでなければそれは装飾です。

飾り気がないことは、ありきたりであることでも、色がないことでもありません。 余計なものを取り除いてそこで止めると、灰色の文字と青いボタンがひとつある白いページになります。それもまた既定のデザインです。飾り気のなさとは構造のことです。すべての要素に理由があり、完成されていること。製品らしさを生み出すのは色です。ニュートラルカラー（白、黒、グレー）を土台にして、その上に本物のパレットを重ねてください。

使い方

作業	実施内容
構築	構築の順序に沿って進め、対象のサーフェスのリファレンスを読み、完了条件を満たします。
レビュー	チェッカーを実行してから、references/review.md を読みます。「症状 -> 修正 -> 理由」の形式で報告します。
修正	指摘された箇所だけを変更します。既存のコピー、名称、アイデンティティは維持します。

プロジェクト独自のデザインシステム、トークン、ブランドルールは、このスキルより優先されます。それらに従い、指定されていない部分には Oxfords を使用してください。

サーフェス	最初に読むもの
ダッシュボード、管理画面、テーブル、グラフ、設定（スマートフォンのブラウザー上を含む）	references/app-ui.md
ネイティブモバイルアプリの画面	references/mobile.md
ランディングページ、マーケティングサイト	references/landing.md
状態、フォーム、エラー、UX コピー	references/states-forms-copy.md
色：パレットの選択と適用	references/palettes.md（構築のたびに読んでください）
フォント、アイコン、禁止項目の全リスト	references/slop-floor.md
モーション、ジェスチャー、モーションの軽減	references/motion.md
完成した画面のレビュー	references/review.md

構築の順序

1. 意図。 ユーザーが何をしに来たのかを明確にします。それを実行するコントロールから始めます。追加するものごとに、シンプルなバージョンではできなかったことができるかを確認します。意図が広がるにつれて、機能を追加します。
2. コンテンツを先に。 レイアウトに取りかかる前に、ラベル、数値、名前をすべて書き出します。ばらつきがあり、現実味のあるデータを使います。実在しそうな名前、端数のある合計値、長い値を一つ入れます。人がざっと確認するものだけを表示し、詳細は一段階奥に置きます。一つの画面で一つの役割を果たします。
3. データに合ったコンポーネントを選ぶ。 値の固定された集合にはチップを使います。数値は右揃えにし、タブラー数字を使います。時間ベースのデータにはタイムラインか集計チャートを使い、時間順に並べたテーブルにはしません。非アクティブな項目はその場に残し、グレー表示にします。反射的にテーブルやタイルの列を使わないようにします。
4. 端に沿ってレイアウトする。 ラベルは左揃え、値は右揃えにし、読むことを目的としないものだけを中央揃えにします。各要素を端に揃え、次の要素の基準となる端を作ります。コンテンツを追加するのではなく、コンテンツを端に寄せて余白を埋めます。独自性を出す前に、人々が期待するレイアウト（上から下、左から右、上部または左側のナビゲーション）を使います。
5. 色。 まずはニュートラルカラーから始めます。白、黒、グレーのページ、ニュートラルな面、ほぼ黒またはほぼ白のテキストを使います。次に、プロジェクト固有の色がなければ、references/palettes.md からパレットを選び、その3色をメイン、サポート、アクセントとして使います。なぜそのパレットが合うのか、一文で説明します。骨色やクリーム色のページは使いません。ニュートラルカラーに青いボタンを一つだけ置くこともしません。
6. 階層。 サイズ、位置、太さ、色の順に決めます。最も重要なものを左上に、最も大きく配置します。グループ化し、順位を付け、積み重ねたら、レイアウトからすでに推測できるラベルをすべて削除します。強調は相対的なものです。主役に色を付けるのではなく、周囲を控えめにします。
7. 開示。 主要なアクションは、ラベル付きで常に表示します。二次アクションはメニューに入れるか、ホバー時に表示し、タッチ操作でも同等の手段を使えるようにします。使用頻度の低いものはポップオーバーに入れます。クリックしないと主要項目が見えない状態にはしません。
8. コンテナ。 収まるなら、まずインラインで表示します。次に、シンプルで操作を妨げないものはポップオーバーにします。同じページ内で完結する複雑なものは、モーダルに続けて確認画面を表示します。大規模なものや永続的なものは、戻る手段を設けた新しいページにします。モバイルでは、ページを離れずに選べるボトムシートを使います。
9. 見えないレイヤー。 状態、フィードバック、フォーカス、空のコンテンツ、壊れたコンテンツです。見落とされがちな部分です。完了ゲートには、これらが含まれています。

完了ゲート

構築した画面について、各項目に回答してください。「なし」とする場合は理由が必要です。

項目	必須
ボタン	デフォルト、ホバー、フォーカス可視、押下、無効の各状態を用意し、無効の理由を横にテキストで表示します。ユーザーが待つ場面に限り、読み込み状態も用意します
入力欄	常に表示されるラベルを上に配置し、フォーカス状態を用意します。エラーは修正方法とともに入力欄の下に表示し、エラー後も入力内容を保持します
すべての操作	100ms 以内に、ユーザーが見ている場所で応答します。コントロールをその場で変化させるか、取り消し機能付きのトーストを表示します
破壊的な操作	可能な場合は取り消し機能を用意します。そうでない場合は、対象のオブジェクト名を明記した確認画面を表示し、ボタンには操作内容をラベルとして付けます
アイコンのみのコントロール	アクセシブルな名前とツールチップを用意します。誰もが知っているとは限らないアイコンには、代わりにテキストラベルを付けます
空の状態	初回起動時には、1文の説明と、それを埋めるための操作を1つ表示します。検索結果がない場合は、検索語を引用して表示し、検索語を消す方法を提示します
読み込みと失敗	約300ms 後に、結果の形に合わせたスケルトンを表示します。エラーには、何に失敗したかと復旧方法を記載します。オフラインと権限不足にも対応します
整っていないコンテンツ	長い名前は省略表示し、完全な値も確認できるようにします。0件、1件、10,000件の行で動作し、画像がない場合にも対応します
テーブル	検索、フィルター、または並べ替えができるようにします。数値は右揃えにします。行ごとに主操作を1つ設けます。行を選択すると、既存のツールバーに一括操作を表示します
グラフ	シンプルな折れ線グラフまたは棒グラフにします。軸の値、グリッド線、ラベル、範囲または指標のコントロールを用意し、ホバーまたはフォーカス時に値を表示します
ナビゲーション	現在の場所を示し、項目には内容を表す名前を付けます。グループ化し、使用頻度の低い項目を後ろに配置し、トップレベルの項目は約5つにします
キーボードとコントラスト	すべての要素に Tab で移動でき、フォーカスを明示します。Esc でオーバーレイを閉じられるようにします。テキストは4.5:1、大きなテキストとアイコンは3:1のコントラスト比を確保します。状態を色だけで表現しません
タッチ	ターゲットは44pxにし、ホバーでしか機能しないものをなくし、入力欄は16pxにして、セーフエリアを尊重します
モーション	フィードバックは250ms未満にし、入力を妨げないようにします。フィードバックを維持した、視差効果を減らす設定向けのバージョンも用意します
色	画面の大部分を占めるニュートラルなベース（白、黒、グレー）を使います。理由のある名前付きパレットを用意し、その3色すべてをそれぞれ1つの用途に使います。骨色やクリーム色のページは使いません
一貫性	書体、パレット、アイコンセット（ウェイトは1種類）、階層ごとの角丸をそれぞれ統一し、同じものはどこでも同じ見た目と動作にします
スロップの最低基準	チェッカーに合格するか、各警告について理由を1行で記載します

スロップの最低基準

生成されたインターフェースに見られる特徴です。別のスタイルに変えるのではなく、取り除いてください。置き換え例を含む完全なリストは references/slop-floor.md にあります。

• 構造： アクティブなナビゲーション項目やカードの脇にある色付きバー、すべてを囲むカード、カードの中のカード、すべての見出しの上にある小さな大文字ラベル、番号付きセクションラベル、挨拶文のヘッダー、アイコンと数値を並べたタイルの列、複数のページで繰り返される同じ数値、何も実行しないコントロール。
• 書体とアイコン： 誰も選んでいないデフォルトのフォント（Inter、Geist、Roboto、Poppins、Montserrat、DM Sans、Space Grotesk、Instrument Serif、Playfair Display、Fraunces）、サンセリフの見出しに混ぜたセリフ体の単語、アイコンとしての絵文字、デフォルトのストロークのままの標準アイコンセット、すべての見出しの上に置かれた色付き四角形の中のアイコン。
• 色： オレンジや赤をアクセントにした骨色またはクリーム色のページ、青いボタンだけが唯一の色であるニュートラルなページ、ニュートラルカラーを使わずパレット色で全体を色付けしたインターフェース、紫やインディゴのグラデーション、グラデーション文字、発光効果やぼかした色の塊、すべてのステータスに付けた色付きピル。
• モーション： バウンス、スクロール時にすべてが下からフェードインする動き、点滅するドット、マーキー、スクリプトで表示されるまで隠されたコンテンツ。
• 文言： seamless、effortless、unlock、elevate、supercharge、「Get started」と「Submit」、Acme と Jane Doe、端数のない作り物の数値、感嘆符と全角ダッシュ。

構築した画面でチェッカーを実行してください。

node scripts/check.mjs path/to/build

機械的に判定できる兆候はエラーになり、判断が必要なものは警告になります。各項目を修正するか、意図的にそうしている理由を1行で記載してください。

数値

項目	値
余白	4の倍数。用途ごとに差をつけます。グループ内は4〜12、グループ間は24〜40です。見出しの上には、下よりも広い余白を設けます
角丸	階層（コントロール、カード）ごとに1種類です。内側に入れ子にする場合は、外側の角丸から間隔分を引きます
ボタンのパディング	水平方向は垂直方向のおよそ2倍です
アイコンのサイズ	テキストの行の高さに合わせます。線の太さはテキストのウェイトに合わせます
文字サイズの段階	およそ6段階にします。段階の範囲外では、ヒーロー用の図や見出しを最大1つまで使えます。Web アプリの本文は13〜14pxで、24pxを超えることはほとんどありません。ネイティブアプリの本文は17ptで、最小15です。マーケティング用途の本文は16px以上です。11px未満は使いません
行の長さと行送り	45〜75文字にします。本文の行送りはおよそ1.5、ディスプレイ用の文字は1.05〜1.2です
見出しのトラッキング	大きなディスプレイ用の文字のみ、-2%〜-4%にします。本文は0です
タップ領域	タッチ操作では44px、デスクトップでは絶対的な最小値を24pxにします
フィードバックのタイミング	押下時は100〜150ms、通常のトランジションは150〜250ms、オーバーレイは最大400msです。退出は表示より速くします
イージング	オーバーシュートのないイーズアウトにします
影	背景に合わせた色味の、柔らかくコントラストの低い影にします。影に気づくなら、その影は不適切です
ダークモードの奥行き	影は使いません。各レイヤーは、下のレイヤーよりわずかに明るく、彩度を低くします
スマートフォンの背景	純黒の #000 または純白の #FFF にします。ナビゲーションレイヤーには Liquid Glass を使います
コントラスト	テキストは4.5:1、大きなテキスト、アイコン、入力欄の境界線、フォーカスリングは3:1です

完成と判断する前の4つのテスト

• 目を細める。 目をぼかして見ます。最初に目に入るものは1つで、それが適切であるべきです。
• 引き算する。 要素を1つ取り除きます。何も悪くならなければ、そのまま外しておきます。
• 入れ替える。 競合他社のロゴを載せてみます。それでも違和感がなければ、コンテンツが一般的すぎます。
• 根拠を示す。 どの値を指しても、それを選んだ理由と、デフォルト値ではない理由を説明できるはずです。

クレジット

Oxfords は、ほかの人々の成果を土台にしています。リポジトリ内の CREDITS.md をご覧ください。