GOV.UK デザインシステム
GOV.UK Design System / 2012– / スタイル / プラットフォームの画面言語
英国政府の Government Digital Service が公開し維持する設計言語。装飾のない一列左寄せに GDS Transport を組み、角を丸めない緑のボタンは下辺の濃い帯で厚みを持ち、押すとその分だけ沈む。焦点の当たった要素は黄色い地と黒い下線で示す。
.png)
ひと目で判断
見た目の特徴
- 装飾のない一列の左寄せで、囲みも影もほとんど使われない
- 角を丸めない緑のボタンの下辺に濃い緑の帯が敷かれ、押すとその厚みの分だけ沈む
- 焦点の当たった要素だけが黄色い地に変わり、その下に黒い線が引かれる
- 文字は 48 / 36 / 24 / 19 / 16px という粗い段しか持たず、中間の大きさが存在しない
向いている用途
- 行政や公共サービスの申請画面を、一画面につき一問の左寄せ一列で組み直すとき
- キーボードだけで操作する人に、いまどこに焦点があるかを疑いなく伝えたいとき
このスタイルを使う
短い指針を制作へ持ち込むか、構造化された仕様をAIへ渡せます。
詳しい作り方と出典制作ルール、実在作例、比較、研究、引用形式
辞書情報
- 文字
- サンセリフ一種だけを使い、大きさは五段に固定して中間を作らない。見出しは太く、本文は 19px を基準に置く。
- 構成
- 内容の幅を一列に絞り、すべてを左端の一本の線に揃える。段組も囲みも使わず、話題の切れ目は横罫だけで示す。
- 素材
- 色は意味に結びつけてだけ使い、飾りに回さない。ボタンは角丸をゼロにし、自身の暗い色の帯を下辺に敷いて厚みを作る。焦点は黄色い地と黒い下線に固定する。
- 注意
- 見栄えを整えようとしてボタンの角を丸めたり入力欄の枠を細くしたりすると、押せる厚みと焦点の位置という、この様式が唯一頼っている合図が消える。
- 関連研究
- GOV.UK Design System の Styles にある色の使用規則 / govuk-frontend の focused ヘルパーが黄色い地と黒い下線をどう作っているか / GDS Transport という書体の出自と、なぜ政府サービス向けに限って配られるのか
関連項目
- ネオ・グロテスク（Neo-grotesque Sans）共通する印象：信頼 / 静けさ。GOV.UK デザインシステムとネオ・グロテスクの違いを見る
- スイス・スタイル（Swiss）共通する印象：信頼 / 静けさ。GOV.UK デザインシステムとスイス・スタイルの違いを見る
プラットフォームの画面言語をさらに見る
同じ「プラットフォームの画面言語」から、共通する印象が多い順に次の項目を選んだ。
- アドワイタ（Adwaita）共通する印象：技術 / 静けさ / 信頼。
- ブリーズ（Breeze）共通する印象：技術 / 静けさ / 信頼。
- GitHub Primer（GitHub Primer）共通する印象：技術 / 信頼 / 静けさ。
この項目を引用する
辞典はリンクされるためにある。書いている場所に合う形をそのまま持っていってよい。
- Link
- https://indexstyle.org/ja/styles/govuk-design-system
- Markdown
- [GOV.UK デザインシステム（GOV.UK Design System） — デザインスタイル辞典](https://indexstyle.org/ja/styles/govuk-design-system)
- HTML
- <a href="https://indexstyle.org/ja/styles/govuk-design-system">GOV.UK デザインシステム（GOV.UK Design System） — デザインスタイル辞典</a>