capsrock/nordic-civic-design-skill

Nordic Civic Design

HDS の値を土台に、公共サービスの画面を作るための指針です。ヘルシンキ市とは関係のない非公式のスキルです。

市のサービスに見せることが目的ではありません。使うのは数値と構成の考え方で、市を識別する要素は使いません。

使わないもの

• ロゴ、市章、波のモチーフ: ロゴは登録商標で、作り直しも改変も認められていません。波のモチーフは市の視覚要素で、第三者の利用条件を確認できていません。
• Helsinki Grotesk のフォントファイル: Camelot Typefaces の商用書体で、再配布も AI 学習への利用も禁じられています。同梱も、Web やアプリへの埋め込みもしません。CSS で書体名を指定するだけにします。
• 「ヘルシンキ市」を名乗る表現: 成果物の名前や本文に、市の公式と誤解される語を入れません。

書体

font-family: HelsinkiGroteskPro, "Schibsted Grotesk", Arial, "Noto Sans JP", sans-serif;

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Schibsted+Grotesk:wght@400;500;700&display=swap">

ライセンスを持つ人の環境では本来の書体が使われ、それ以外では Schibsted Grotesk になります。これは HDS の指定ではなく、このスキルの選択です。公式の代替は Arial です。

Schibsted Grotesk は OFL 1.1 で、太さは 400 から 900 まであります。HDS の 3 段階（400、500、700）をそのまま使えます。

和文の指定は HDS にありません。日本語の画面では Noto Sans JP を既定にし、行の高さは 1.75 にします。これもこのスキルの判断です。

形

形の基準が HDS らしさの中心です。崩すと印象が大きく変わります。

• 角丸は 0: ボタン、入力欄、カードのすべてで使いません。
• 枠線は 2px: ボタン、入力欄、カードの枠線に使います。
• 操作部品は高さ 56px: ボタンと入力欄の標準です。小さいボタンは 44px です。
• 影は使わない: HDS は「影はブランドの一部ではない」と明記しています。高さの表現、強調、文字の装飾に影を使いません。使うのは、内容の上に重なるトースト通知とダイアログの区別だけです。
• カードは枠線なしが既定: HDS の既定です。枠なしのカードは薄いグレー（--color-black-5）の面に置きます。白地に置くときは 2px の枠線ありにします。この白地の扱いはこのスキルの判断です。
• 通知は左に 8px の帯: 面全体を強い色で塗らず、薄い背景と左の帯で伝えます。

色

値は references/tokens.css に、色ごとの使いどころとコントラストの表は references/foundation.md にあります。色の名前（bus、tram、metro、engel など）は、ヘルシンキの街並みから取られています。

• 操作の色は bus: --color-bus (#0000bf) を主要な操作とリンクに使います。ホバーは --color-bus-dark です。
• フォーカスは coat-of-arms: --color-focus-outline の 3px の輪郭線を使います。暗い背景では白にします。
• 本文は black-90: --color-black-90 (#1a1a1a) です。文字色は黒か白のどちらかで、他の色の文字は意図があるときだけです。
• アクセント色は面で使う: summer、suomenlinna、metro などは、見出し帯や区切りに大きく使います。小さく散らすと個性が出ません。1 画面に 1 色を目安にします。この目安はこのスキルの判断です。
• 白地に文字として置けるブランド色は 4 つ: bus、brick、coat-of-arms、tram だけです。metro は大きな文字に限り、summer や engel などの明るい色は白地では面として使います。
• -light と -dark の変種は主色にしない: ホバーなど部品の状態と、情報の種類の区別にだけ使います。
• 状態色はアクセントと分ける: error、success、alert、info は状態を伝えるときだけ使います。ブランド色を状態の表示に使いません。色だけで伝えず、文字かアイコンを添えます。

文字と背景の組み合わせは WCAG 2.1 AA のコントラスト比を満たします。本文は 4.5:1 以上、大きな文字は 3:1 以上です。ブランド色の上の文字色は references/foundation.md の表に従います（bus、coat-of-arms、tram、brick の上は白、それ以外は black-90）。グレーの文字は --color-black-60 までで、--color-black-50 以下は白地で使いません。

余白

4px を基準にします。値は --spacing-* と --spacing-layout-* を使い、中間の値を作りません。

• 部品の内側と部品同士: --spacing-* の 8、12、16、24、32px
• セクションの間: --spacing-layout-* の 48、64、96、128px
• 小さい余白でまとめ、大きい余白で分ける: 近いものは関係があるように見えます。余白が広い要素ほど重要に見えます。
• 画面の性格で密度を変える: 広報や案内の画面は広く、情報量の多い業務画面は詰めます。

迷ったら広いほうを選びます。余白の広さが画面の落ち着きを作ります。この一文はこのスキルの判断です。グリッドは 12 カラム、最大幅 1200px、ガター 24px（モバイルは 16px）です。

文字

• 太さは 3 段階: 本文 400、ボタンやフォームのラベル 500、強調 700 です。
• 本文は 16px から: 16px が HDS の本文の最小値で、どの画面幅でも使えます。文字量が少ない画面では 18px を既定にし、狭い画面で 16px に落とします。14px は補助的な文字と部品の中だけです。
• 見出しは二つの尺度: デスクトップは h1 が 64px、h2 が 48px。モバイルと業務画面では h1 が 40px、h2 が 32px です。見出しの階層は意味どおりに使い、見た目だけ変えたいときはトークンで大きさを変えます。
• 行の高さ: 長い本文は 1.5、短い段落とリード文は 1.2、1行の見出しと部品は 1、小さい文字と引用は 1.75 です。

見出しの太さは 700 を既定にします。これはこのスキルの判断で、HDS の文書に見出しの太さの指定はありません。値の表と使いどころは references/foundation.md にあります。

部品

references/components.md を読んでから部品を作ります。ボタン、入力欄、チェックボックス、通知、カード、リンクの値と使いどころがあります。要点は次のとおりです。

• primary のボタンは 1 画面に 1 つ: 画面でいちばん重要な操作だけです。取り消しや閉じるは supplementary にし、枠が無いのでアイコンを付けます。ページの移動はボタンではなくリンクです。
• 入力欄にはラベルを必ず付ける: 必須の項目は * で印を付け、印の意味をフォームの先頭で説明します。
• 通知は重要な情報にだけ: インラインは同時に 1 つが目安で、動的に追加しません。エラーなど重要な通知は自動で消しません。
• カード全体をクリック可能にしない: 全体を押せるようにしたいときは Linkbox です。
• 外部リンクにはアイコン: 原則、新しいタブで開きません。

ここにない部品は、形、色、余白の基準から組み立てます。HDS の値として確認していないものを、HDS の値として書きません。

確認すること

作り終えたら次を見ます。

1. 角丸と影が残っていない（トースト通知とダイアログの影は除く）
2. トークンにない色と余白の値を使っていない
3. 操作部品の高さが 44px 以上ある
4. フォーカスの輪郭線が見える
5. 文字と背景のコントラスト比が AA を満たしている
6. ロゴ、波のモチーフ、市の名称を使っていない

出典

トークンと部品の値は hds-design-tokens と hds-core の 6.0.7 から、使いどころは HDS の公式文書（https://hds.hel.fi/ 、原文は同じリポジトリの site/src/docs）から取りました。いずれも MIT License、Copyright (c) 2023 City of Helsinki です。ライセンス文は references/LICENSE-HDS.txt にあります。スキルを配布するときは、このファイルも一緒に配布します。色の名前の由来は、ヘルシンキ市のビジュアルアイデンティティの案内によります。