黒と白: 集中するために構築されたデザインシステム

当社ではすべての OLUWA 製品を厳密な白黒で構築しています。ブランドブルーもアクセントティールも、トースト通知に忍び寄る「サクセスグリーン」もありません。黒と白のミニマルなデザインシステムは、端末に対するノスタルジーではなく、私たちが夢中になったムードボードでもありません。これは、意思決定を迅速化し、インターフェースをより読みやすくし、デフォルトでアクセシビリティのベースラインを高くするための作業上の制約です。これが、私たちがモノクロを選択した理由、私たちが放棄したもの、そして明日採用できるトークンとルールです。

意図的に色を削除した理由

色はインターフェイス設計において最も悪用される変数です。追加するのは安価ですが、管理するのは高価です。パレットを作成した瞬間、すべての要素がいずれかの色相をめぐって競合し、「これは何色にすべきか」という質問は、週に何百回も、通常は一貫性なく答える質問になります。

破壊ボタンは赤です。ただし、エラー状態、必須フィールドマーカー、通知バッジ、離脱ユーザー向けのグラフシリーズも同様です。赤は現在、5 つのことを意味します。つまり、何も意味しません。

色を削除すると、そのクラス全体の決定が削除されます。重要性を示す色相に手が届かない場合は、位置、サイズ、重み、空白など、実際に意味を伝えるツールを使用して色相を示します。それらのツールはより正直です。見出しが重要であると判断されるのは、見出しが大きく、上部に配置され周囲にスペースがあるからであり、誰かが見出しを紫色に塗ったからではありません。

要点: 階層の問題を解決するために色を使用している場合、色の問題ではなく、階層の問題があることになります。 モノクロは、紙で上書きすることを拒否します。

色のない階層: 3 つのレバー

色合いを気にせずに、3 つのレバーですべての作業を行います。

タイプスケール。 サイズの連続的な勾配ではなく、明確なジャンプを伴うモジュラースケールを実行します。近すぎるステップはノイズとして解釈されます。目には明確なランクが必要です。私たちの作業スケールはおよそ 12 / 14 / 16 / 20 / 28 / 40 / 64px です。本文テキストは 16 に位置し、二次メタデータは 14 に位置し、20 を超えるものはすべて構造的です。 2 つの事柄の重要性が異なると感じられる必要がある場合、それらは異なるステップを取得し、2 つのグレーの階調で同じステップになることはありません。

重量とケース。 1 つの書体で色がない場合、重量が主な信号になります。最大で 3 つのウェイトを使用します。レギュラー、ミディアム、および実際の強調のために予約されている 1 つの太字です。追跡された文字間隔を持つ大文字は「ラベルの色」の役割を果たし、文字列を色合いなしでカテゴリまたは眉毛としてマークします。

スペース。 ホワイトスペースは、モノクロレイアウトの耐力壁です。近接グループ関連のもの。距離が彼らを隔てる。当社の暗号通貨注文アプリ MadaiOps では、注文チケットはこれに完全に依存しています。価格、サイズ、側面がしっかりとグループ化されている一方で、確認アクションは意図的にスペースを空けて押しやられているため、入力の隣に集中することはありません。赤の「危険」スタイルは必要ありません。間隔がガードになります。

コントラストは雰囲気ではなくシステムです

白黒の罠は、価値観が 2 つしかないと考えることです。完全なグレースケールランプがあり、それを抑制することに規律が必要です。小規模で固定された一連のステップを定義し、オフランプグレーを禁止します。実際に出荷するランプは次のとおりです。

--ink-000: #000000   /* primary text, headings */
--ink-700: #3d3d3d   /* body on light, secondary headings */
--ink-500: #6b6b6b   /* metadata, captions, disabled-adjacent */
--ink-300: #b0b0b0   /* borders, dividers, placeholder */
--ink-100: #e6e6e6   /* subtle fills, hover backgrounds */
--paper:   #ffffff   /* base surface */

6 つの値。これがシステム全体と、その逆のダークモードです。レビューで強制するルール: ランプ上にないグレーは存在してはならない 「境界線が少し重いと感じた」という理由で誰かが #8a8a8a をスポイトした瞬間、システムは腐り始めます。閉じた値のセットは、モノクロ UI が泥だらけの同一性へと漂流するのを防ぐものです。

テキストは 4.5:1 でクリアされ、構造は 3:1 でクリアされます。

すべての表面上のテキストのペアは、出荷前に WCAG コントラスト比と照合してチェックされます。 --paper 上の --ink-500 は 5.7:1 付近に達し、本文テキストのしきい値 4.5:1 を余裕で超えています。 --ink-300 はテキストとしては失敗するため、3:1 の非テキストしきい値が適用される境界線と分割線に「のみ」許可されます。トークンの値だけでなく、トークンの許可された用途にルールをエンコードすることで、トークンを定着させることができます。

アクセシビリティの恩恵

ここではモノクロが静かに勝利を収めます。男性のおよそ 12 人に 1 人が何らかの色覚異常を抱えており、意味を伝えるために赤と緑に依存したインターフェイスは、意味のあるユーザーの一部には判読できません。私たちは最初から色相に意味をコード化したことがなかったため、その壁にぶつかることはありませんでした。州は、形状、ラベル、重量、位置によって区別されます。

この規律により、より健全なパターンがあらゆる場所に強制されます。単一のチャンネルだけで意味を持たせることは決してしないでください。 システム内の無効になっているボタンは、単に軽いだけではありません。境界線が失われ、ラベルが --ink-300 に低下するため、状態はグレースケール画面でも、明るい日光の下でも、色盲のユーザーでも同様に存続します。当社のジャーナリングアプリ Youp は、通常の赤から緑への感情のグラデーションではなく、図像とラベルテキストで気分のエントリをマークするため、多くの人が見ることのできないスペクトルに依存することなく、感情の歴史を読み取ることができます。

また、ブラウザ自身のアクセシビリティを繊細なブランドパレットで上書きすることに一度も抵抗したことがないため、ハイコントラストと強制カラーのサポートもほぼ無料で利用できます。

制約が意思決定をいかに迅速化するか

過小評価されている利点は速度です。パレットは組み合わせの爆発です。すべての新しいコンポーネントが、すべての色相およびすべての状態に対して乗算されます。モノクロはそれを崩壊させます。色を決定する必要がないため、コンポーネントのデザインは、ステップ、重み、間隔、および境界線のグレースケールトークンをタイプするだけになります。それは数秒で決定でき、好みを議論する代わりにルールを使ってレビューで擁護することができます。

それも複雑になります。トークンセットは小さく閉じられているため、コンポーネントは予測どおりに構成されます。カード、テーブルの行、およびモーダルはすべて同じ 6 つのグレーと同じ 7 つのタイプステップから描画されるため、調整することなく関連しているように見えます。新しいサーフェスは、一貫性をネゴシエートするのではなく、一貫性を継承します。複数の製品を出荷している小規模なスタジオの場合、その共有基盤が、1 つのファミリーのように感じられる 4 つのアプリと 4 つのベンダーのように感じられる 4 つのアプリの違いになります。

このトレードオフは現実のものであり、名前を付ける価値があります。モノクロには生の表現範囲が少なく、多くのシリーズを使用したデータの視覚化、物理的な色にマッピングされたもの、暖かみと引き換えにブランドの瞬間など、いくつかのカテゴリでは本当に色が必要です。私たちはそうではないふりをしません。私たちのスタンスは、色は獲得され、希少であるべきであり、決して階層のデフォルトの手段としてではなく、特定の仕事のために意図的に導入されるべきであるというものです。私たちがそれに手を伸ばそうとすると、周囲がすべて静かなため、激しく着地します。

明日から取り入れられるルール

すべてを再構築せずにこれを試したい場合は、次のようにします。

灰色のランプを閉じます。 5 つまたは 6 つの値を選択して名前を付け、コードレビューですべてをランプから除外します。この 1 つのルールでほとんどの作業が行われます。
1 種類のスケールを作成し、そのステップのみを使用します。 任意のフォントサイズは使用できません。新しいサイズが必要な場合は、スケールが間違っています。スケールを修正し、一回限りのものを追加しないでください。
許可された使用をトークンにエンコードします。 --ink-300 は単なる 16 進値ではなく、「境界線のみ」です。エンジニアが読む場所に文書化してください。
2 番目のチャネルのすべての意味のある信号を監査します。 色を削除すると状態が曖昧になる場合は、曖昧にならないまで形状、ラベル、または位置を追加します。
空白をコンポーネントとして扱います。 名前付きトークンにスペースを与え、他の場所で色を保護するのと同じように、レビューでそれらを保護します。

終わりの思い

白か黒かで仕事をすることは、私たちが許容する制限ではありません。を鮮明にするレンズです。最も簡単な変数を取り除くと、リズム、プロポーション、コントラスト、スペースなどの構造的な変数は隠れる場所がありません。インターフェイスに実際の階層があるかどうかは、すぐにわかります。その誠実さは私たちにとってどんなパレットよりも価値があります。