見出し画像

アメリカ政府のWebデザインシステム(4) スタイルガイド

(1)(2)(3)ときてようやくガイドライン本体です。ComponentsDesign TokensUtilitiesPage templatesに分かれています。

コンポーネント

ComponentsはボタンやヘッダーなどUIを構成する部品です。

USWDS components are designed to set a new bar for simplicity and consistency across government services.

set a barは「基準を設ける」。越えるべきハードルのバーを設定するイメージです。政府のサービス全体通してレベルをあげてくよ、という意気込みです。

それぞれのコンポーネントごとに、実例や種類、いつ使うべきか(When to use)、他の方法を検討すべき時(When to consider something else)、ユーザビリティについてのアドバイス(Usability guidance)、アクセシビリティについてのアドバイス(Accessibility)、実装について(Implementation)の各項目がまとまっています。

デザイントークン

Design Tokens前回説明したので省略。

ユーティリティ

Utilitiesは要素に特定のスタイルを追加したいときに便利なクラスの集まりです。".bg-primary-darker"を指定すると暗い背景色になる、みたいなやつ。構造と見た目の分離にはイマイチですが、使いすぎなければ実用的です。

Utilities are simple HTML classes typically scoped to a single CSS property like border-style or background-color. Utilities can be used additively to style an object from scratch or to override a style defined in component CSS.

ページテンプレート

Page templatesはここまでに出てきたパーツを使い、実際のページの構造をテンプレートとして組んでみたものです。

These templates for a landing page and a documentation page are built from USWDS components. Each of these pages is flexible; you can add or remove components or subcomponents to suit your needs. These templates are great starting point for prototyping or for trying USWDS to see if it’s a good fit for your project.

ランディングページとドキュメンテーションページ(標準の情報提供のためのページ)が入り口(starting point)として用意されています。ニーズに応じてコンポーネントを足したり引いたりしてください、と。サンプルページや細かなアドバイスも充実しています。

全体を通して

全体を通してかなり完成度の高いガイドラインになっていると思います。

トップページの下の方にこのシステムを元に作られたサイトの実例があります。デザインシステムのサイト自体が一番良くできている感がありますが、どのサイトも一定の基準をちゃんと満たしている感じがします。

ソースコードも含めてオープンソースなので実際のプロジェクトの参考にもしやすいのではないでしょうか。

一応書いておくと、アメリカ政府のサイトやサービス全体が素晴らしいわけではありません。酷いウェブページも山ほどあるし、何かの許可をとったり書類を取り寄せようとして簡単にできたことはありません。しかしTechnology Transformation Servicesのような組織があってプロフェッショナルな仕事をしている(ように見える)というのは少し希望が持てます。

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