政府のサイトに統一感を持たせるためにアメリカ政府が開発したツール「USWDS」とは？

アメリカでは国の組織ごとにさまざまなウェブサイトが作成されています。そうしたサイトはそれぞれの組織が自ら作成しているのですが、別の組織が作成しても統一感が出るようにするために政府自らツールを作成し、パブリックドメインで公開しています。

18F: Digital service delivery | Introducing the U.S. Web Design Standards
https://18f.gsa.gov/2015/09/28/web-design-standards/

Introducing USWDS 2.0 / DigitalGov - Building the 21st Century Digital Government
https://digital.gov/2019/04/08/introducing-uswds-2/

アメリカ政府のウェブサイトはそれぞれの組織が独立して作成しており、同じアメリカ政府のサイトであっても組織が違えばサイトごとの統一感がなかったり、ボタンの色や配置がまったく違ったりしてしまっていました。

そうした問題を解決するために作成されたツールが「United States Web Design System(USWDS)」です。USWDSはアメリカ政府のウェブサイトに共通のUIを提供し、ビジュアルデザインに統一感をもたらすことを目的としたツールで、2015年9月の登場以来、約200個の政府サイトに導入されています。

そして2019年4月8日にUSWDSの新たなバージョンとなるUSWDS 2.0がリリースされました。USWDS 2.0時点でUSWDSは以下のような機能を持っています。

・コンポーネント単位での導入

ページ全体を一度に書きかえる必要は無く、パーツ単位で部分的に導入可能になっています。

・デザイントークン

ウェブサイトのデザインにおいて設定できる要素は色、間隔の開け方、フォント、不透明度など多岐に渡り、さらに設定できる値も非常に幅広くなっています。デザイントークンとはそうした多数の設定をある程度ひとまとめにしたプリセットのことで、デザイントークンを用いることでデザイナーと開発者の意思疎通を助け、ウェブサイトの構築にかかる時間を短縮できます。

・カラーシステム
USWDSで用いられるシステムカラーはそれぞれ等級が振られており、その数字の差を見るだけでどれほどのコントラストが得られるのかが分かりやすくなっています。数字の差が50以上でWCAG 2.0のAAレベル、70以上でAAAレベルのコントラストが得られるようになっています。例えば「gray-10」と「red-80」を使用した場合、等級の差は70のためAAAレベルのコントラストを得られることが分かります。

・単純化された12列のグリッドを利用可能

・商用利用可能なフォントを提供

USWDS用に、癖が少なく中立的なフォントとして新たに「Public Sans」というフォントが開発されており、SIL Open Font License v1.1ライセンスで提供されています。

上記のように、USWDSは便利な機能がまとまっているウェブデザインツールとなっています。USWDSはアメリカ政府の製作物であるため多くの部分がパブリックドメインとなっており、ライセンスを気にせず利用可能で、GitHubからダウンロードできるほか、Node.js用のパッケージ管理ツール「npm」を通しても配布されています。