USWDS

私が勤める会社は、各部署でそれぞれ製品を開発するのですが、デザイナーが居ないため私の部署に依頼が入ります。しかし私の部署は別の使命がありそれがメインでは無いため、時間を割くことが難しい。各部署、外部委託は可能ですが、当社の製品である以上は統一感が必要です。そのため各部署に使用して頂けるデザインガイドラインを作成するプロジェクトが始まりました。

参考にするものの一つは、某情報サイトでタイムリーに見かけた、タイトルのUnited States Web Design System (USWDS)。アメリカの各州それぞれ政府系サイトを持っていますが、制作者が違うので統一感がありません。USWDSはその解消のための、政府系Webサイトを作成するためのガイドラインです。

・政府のサイトに統一感を持たせるためにアメリカ政府が開発したツール「USWDS」とは？
　https://gigazine.net/news/20190409-united-states-web-design-system-uswds/
・United States Web Design System
　https://designsystem.digital.gov/

締め切りが来月頭とタイトなため、この日曜はこれについて調べていました。以下の構成です。

1. Documentation
a. 素材のダウンロードと説明
・開発者用、デザイナー用
・最新版はSketchというオランダのソフトウェア会社のものを利用。Adobeでは使えないようです。
　旧版はお馴染みのIllustratorやEPSの他、OmniGraffleというソフトウェアの素材が準備されています。
・Githubプロジェクトページ

b. Webのパフォーマンスについて
・ページの表示速度によるコンバージョンへの影響
・ページの表示速度の計測方法
・お役立ちツール
・HTTPについて

c. コーディングのガイドライン...個々の環境への導入方法、インストール方法
d. USWDSの旧バージョンから新バージョンへの移行方法
e. 動画素材
f. Drupal等、各利用環境のための素材
g. USWDSを利用した政府サイトのショーケース

2. Components...提供しているデザイン素材の紹介
アコーディオン機能、アラート、ボタン、フッター、フォーム、グリッド、ヘッダー、アイコン、検索、サイトナビ、テーブル、タグ、タイポグラフィー

3. Design tokens...一般的なCSSの説明
色、フォント、CSS Flex、CSS Opacity、CSS Shadow、行間、重なりの順序

4. Utilities...提供しているCSS機能の説明
5. Page templates...ホームページ、ヘッダ、フッタのテンプレート素材
6. About...USWDSについて
概要、目標、年間訪問数、リリース情報、アップデート情報、今後の開発予定のロードマップ、利用状況の調査

・開発者用とデザイナー用にガイドラインを分け、異なるそれぞれの分野に対しアプローチ。
・バージョンアップした時の移行方法。Drupalなど各環境の考慮。
・Googleのツールの利用を公言しているのが驚きました。
・年間訪問数は、収支がある訳ではないので代わりに掲載している感じ。職業病っぽく思いました。
・完成度の高さから、民間企業であれば相当なコストと思いましたが、
　動画を見るに、大学との提携のようでスマートだと思いました。
　日本政府がこのレベルのものを運用するのは無理です。