見出し画像

アメリカ政府のWebデザインシステム(3) デザイナー向け

(1)(2)に続いて、次はデザイナー向けのページです。前にも書きましたが、誰が何をまず読むべきかという情報が整理されているのは良いですね。

イントロ

USWDS offers a flexible yet coherent visual style you can apply to any government website. Our visual style offers a clean, modern aesthetic that meets high standards of usability and accessibility while promoting credibility and trust.

フレキシブルで一貫性のある(coherentについてはここで少し解説してます)スタイルを提供。クリーンでモダン、ユーザビリティとアクセシビリティの標準を高いレベルで満たして、信頼をアップ。

Credibilityとtrustは似ていますが、trustは一般的な「信頼」、credibleは情報や発言が正しいと信じられる、というニュアンスです。「信頼」シリーズには頼りにできる感じの reliableやdependableという単語もあります。

ディベロッパー向けと比べるとあっさりとした内容ですが、重要なのはSketchファイルのダウンロードとDesign Tokensの概念です。アクセシビリティやコントリビューションについての言及もあります。

デザイントークン

USWDS visual design is based on consistent palettes of typography, spacing units, color, and other discrete elements of style we call design tokens.

耳慣れない言葉ですが、該当ページを読むとタイポグラフィやスペーシング、色、などデザインに用いる要素のことを指すようです。ボタンなどのコンポーネントではなくもっと細かなレベルの値を指します。

Anything we see on a website is built from elements of style: elements like color, spacing, typography, line height, and opacity. The CSS rules associated with these elements can accept a broad continuum of values — in the case of color, there are over 16 million separate colors in the RGB color space. Font size, line height, spacing, and others can accept a similarly wide range of values.
This degree of choice can slow down design work and make communication between designer and developer unnecessarily granular. USWDS seeks to maximize design efficiency and improve communication with design tokens: the discrete palettes of values from which we base all our visual design.

デザインで用いることのできる値は幅広く連続的(broad continuum of values)で、色だったら16,000,000色も使えるし、フォントサイズや行間、スペースなどの他の要素も同様です。

この自由度(degree of choice)はデザインを遅くしたり、デザイナーとディベロッパー間の情報伝達を無駄に細く(unnecessarily granular)してしまいます。

あらかじめ使える値のパレットを用意して選ぶようにするともっと効率的で間違いが減りますね。このフォントサイズは11pxで、ではなくフォントサイズ「micro」で、といった具合です。間違えていらないスタイルを作ってしまうことも避けられるし、Sassで変数として定義されているのでまとめて値を変更もできます。

the discrete palettes of valuesのdiscreteは「離散的」で、上の「continuum」に対応しています。広い範囲から自由に値を選んでこれるのではなくて、飛び石のように間を置いていくつかの値だけをピックアップして定義しておく。うまく口語的に訳せないので誰か教えてください。



この記事が気に入ったらサポートをしてみませんか?