米国Webデザインシステム
U.S. Web Design System / 2015– / スタイル / 公共デザイン
米国連邦政府のウェブサービスを、アクセシブル、モバイル対応、一貫した体験へ揃える公共デザインシステム。旗、公共色、明快な見出し、検証済みのフォームと案内パターンを共有する。
ひと目で判断
見た目の特徴
- 白地に濃紺と赤の公共色
- 太い見出しと読みやすい本文
- 公式サイトを示すバナー
- 明瞭なフォーム、警告、手順表示
向いている用途
- 行政手続きや公的情報を端末や能力にかかわらず届けるとき
- 複数省庁のサービスへ一貫した信頼と操作方法を与えるとき
このスタイルを使う
短い指針を制作へ持ち込むか、構造化された仕様をAIへ渡せます。
詳しい作り方と出典制作ルール、実在作例、比較、研究、引用形式
辞書情報
- 文字
- 大きく平明なサンセリフで、専門語より行動を先に書く。
- 構成
- 公式バナー、主題、手順、入力の順に一列で進め、戻り道を常に残す。
- 素材
- 白、濃紺、青を基礎に赤を警告へ限定し、焦点線を太く保つ。
- 注意
- 星条旗色を借りるだけでは公共性にならない。アクセシビリティと検証済みの手順を同時に実装する。
- 関連研究
- USWDS design principles / Section 508とWCAG / public service patterns
関連項目
- GOV.UK デザインシステム（GOV.UK Design System）共通する印象：信頼 / 静けさ。米国WebデザインシステムとGOV.UK デザインシステムの違いを見る
- スイス・スタイル（Swiss）共通する印象：信頼 / 静けさ。米国Webデザインシステムとスイス・スタイルの違いを見る
公共デザインをさらに見る
同じ「公共デザイン」から、共通する印象が多い順に次の項目を選んだ。
- NHSデザインシステム（NHS Design System）共通する印象：信頼 / 親密 / 静けさ。
- VA.govデザインシステム（VA.gov Design System）共通する印象：信頼 / 親密 / 静けさ。
- WPAポスター（WPA Poster）共通する印象：信頼 / 親密。
この項目を引用する
辞典はリンクされるためにある。書いている場所に合う形をそのまま持っていってよい。
- Link
- https://indexstyle.org/ja/styles/uswds
- Markdown
- [米国Webデザインシステム（U.S. Web Design System） — デザインスタイル辞典](https://indexstyle.org/ja/styles/uswds)
- HTML
- <a href="https://indexstyle.org/ja/styles/uswds">米国Webデザインシステム（U.S. Web Design System） — デザインスタイル辞典</a>